이온디

웹디벨로퍼

세월호, 71시간의 기록
한국어
[SVG] CSS HEXAGON
https://codepen.io/eond/pen/xWQgGB ">
2018.04.19 조회 4 댓글 0 추천 0
[css] CSS animation infinite
@keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages:...
2018.04.13 조회 2 댓글 0 추천 0 출처 https://marksheet.io/css-animations.html
[css] CSS로 Center 정렬
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; ju...
2018.01.13 조회 6 댓글 0 추천 0
[css] css 선택자 | CSS [attribute*=value] Selector
CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #f...
2018.01.02 조회 5 댓글 0 추천 0
[CSS아이콘] social Icon with XE icon
See the Pen socialIcon with XEicon by eond (@eond) on CodePen.
2017.12.22 조회 4 댓글 0 추천 0 출처 https://codepen.io/eond/pen/GyjWBz
[css] ul 컬럼 다단
ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
2017.12.20 조회 11 댓글 0 추천 0 출처 https://developer.mozilla.org/ko/docs/CSS3_Columns
[input] input 속성 중 placeholder 의 색 바꾸기
::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC...
2017.09.25 조회 21 댓글 0 추천 0 출처 https://nizbridge.github.io/all/html-css...older.html
[CSS아이콘] Animated dots icon
[js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm
2017.03.30 조회 27 댓글 0 추천 0 출처 http://codepen.io/elliottmangham/pen/RoVwRm
[css] [CSS] 배경 이미지에만 흐림효과(Blur) 적용하기 :: Life is an egg.
참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443
2017.03.27 조회 445 댓글 0 추천 0 출처 http://codepen.io/akademy/pen/FlkzB
[css] CSS로 표현하는 스텝바(Step bar only CSS)
http://codepen.io/eond/pen/ALbQbr http://codepen.io/eond/pen/BLmwzZ
2016.10.04 조회 62 댓글 0 추천 0
[css] 두줄이상 여러줄 멀티라인 말줄임 처리 (-webkit-line-clamp)
웹킷엔진을 사용하는 브라우저에서 두줄이상 여러줄 말줄임 처리가 가능한 프로퍼티가 생겼다. 이름은 -webkit-line-clamp 언제 생겼는지 참 유용하다! .ellipsis{ overflow: hidden; text-overflow...
2016.07.05 조회 3323 댓글 0 추천 0 출처 http://blog.mckwon.com/425
[css] CSS 화면 가운데 정렬
데모 : https://hungred.com/wp-content/demo/css-align-center-absolute-display-all-browser/demo.html position:absolute를 사용하여 화면 가운데 정렬을 해줍니다. body { text-align: center; margin: 0 auto; }...
2016.07.05 조회 212 댓글 0 추천 0 출처 http://aspdotnet.tistory.com/1015
[아이콘폰트] 폰트텔로 - 여러개의 아이콘폰트를 조합해서 나만의 아이콘 폰트로 커스텀하기
여러개의 아이콘폰트 중에서 선택해서 나만의 아이콘폰트 커스텀 css를 만들 수 있습니다. 대박이지 않나요. 이렇게 다양하게 조합해서 사용하실 필요는 잘 없겠지만 ^^; 저는 한 도메인에서 레이아웃 디자인이 다른 ...
2016.06.16 조회 54 댓글 0 추천 0 출처 http://fontello.com/
[아이콘폰트] Simple Line Icons
심플한 선으로만 만들어진 아이콘폰트입니다. :) 좋네요! Simple Line Icons github https://github.com/eondcom/simple-line-icons https://github.com/eondcom/simple-line-icons">https://github.com/eondcom/simp...
2016.06.16 조회 29 댓글 0 추천 0 출처 https://thesabbir.github.io/simple-line-icons/
[css] CSS 이미지 흑백처리 -webkit-filter : grayscale(100%)
CSS로 이미지를 흑백처리하는 코드입니다.
2016.06.15 조회 444 댓글 0 추천 0 출처 http://www.410content.com/home/develop/917
[아이콘폰트] 폰트아이콘 3종
부트스트랩 폰트아이콘 http://getbootstrap.com/components/ 폰트어썸 폰트아이콘 http://fontawesome.io/icon/times-circle-o/ 폰텔로 폰트아이콘 http://fontello.com/
2016.06.15 조회 73 댓글 0 추천 0 출처 http://nubiz.tistory.com/575