'2016/06'에 해당되는 글 4건
css calc 함수
CSS 2016. 6. 8. 16:48http://techbug.tistory.com/215
http://cafe.naver.com/hacosa/94427
div{ width: calc( 100% - 2.5em ); background-position: calc( 50% + 50px ); margin: calc( 1.25rem - 5px );}'CSS' 카테고리의 다른 글
| css 무료 벡터 아이콘 (0) | 2015.07.22 |
|---|---|
| ie9 이하 버전의 제한 (0) | 2014.02.26 |
| One-Time Expression 한번만 실행시키자. (0) | 2012.07.27 |
| 대체 텍스트기법 (0) | 2012.06.27 |
| 하단 풋터고정 (0) | 2012.06.07 |
윈도우10 엣지브라우저 전화번호 형태 링크없앰
크로스브라우징 2016. 6. 8. 10:46이번 프로젝트에서 윈10 엣지에서 발생한 전화번호 형태의 링크속성 없애는 법.
메타태그는 삽입 했는데 적용되는지는 확인하지 못함.
<meta name="format-detection" content="telephone=no"/>
'크로스브라우징' 카테고리의 다른 글
| ie6 이상한아이 발견~! (0) | 2012.09.06 |
|---|---|
| ie6 주소창고정프레임셋 백그라운드 버그 (0) | 2011.12.01 |
| ie6/ie7 border-collapse 문제 (0) | 2011.11.23 |
| 익스플로러 filter 적용 문제 (0) | 2011.06.13 |
| word-break 이런 문제가.... (0) | 2011.05.31 |
on/off 버튼
HTML 2016. 6. 2. 15:23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
* {box-sizing:border-box}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat + label {
padding: 2px;
width: 52px;
height: 21px;
background-color:#b3b3b3;
border-radius:13px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat + label:after {
top: 2px;
left: 2px;
bottom: 4px;
width: 17px;
height:17px;
background-color: #fff;
border-radius:50%;
transition: margin 0.4s, background 0.4s;
}
/*
input.cmn-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color:#b3b3b3;
border-radius:50%;
transition: background 0.4s;
}
*/
input.cmn-toggle-round-flat:checked + label {
background-color: #f52969;
}
input.cmn-toggle-round-flat:checked + label:after {
margin-left: 32px;
background-color: #fff;
}
input.cmn-toggle + label span:after {font-size:13px; font-weight:500; color:#fff}
input.cmn-toggle + label span:after {display:block; content:"OFF"; position:absolute; top:1px; right:7px }
input.cmn-toggle:checked + label span:after {display:block; content:"ON"; position:absolute; top:1px; left:10px}
</style>
</head>
<body>
<div class="switch">
<input id="toggle" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="toggle"><span></span></label>
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| 반응형 웹디자인 참고 (0) | 2012.05.23 |
|---|---|
| 브라우저 창 늘림/줄임시 이미지/width값 밀림 현상 (1) | 2011.09.30 |
| dl, dt, dd 요소 (0) | 2011.07.08 |
| 비디오 (0) | 2011.05.12 |
| 펌] 폼(Form) 디자인 잘했다는 소리를 듣기 위한 방법론 (0) | 2011.03.09 |