본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

Code View/Design

[Design] 헤리포터를 귀엽게 만든 CSS 디자인입니다. 헤리포터를 귀엽게 만든 CSS 디자인입니다.[미리보기]소스를 보면 별거없네요~그냥 노가다입니다.^^열정만 있으면 만들 수 있습니다. See the Pen Harry Potter by Richard Vyslouzil (@remeritus) on CodePen.
[Design] CSS3를 통해 간단하게 만들수 있는 카메라 아이콘 심플하고 간단한 카메라 앱 디자인입니다.연습삼아 만들기 좋은 소스입니다..camera-body { position: relative; height: 11em; width: 11em; background: #EEF7FD; margin: auto; border-top-left-radius: 12%; border-top-right-radius: 12%; border-bottom-left-radius: 12%; border-bottom-right-radius: 12%; box-shadow: 0 0.55em 0.78571em rgba(0, 0, 0, 0.2);}.camera-body:before, .camera-body:after { content: ''; position: absolute;}.camera-bod..
[Design] 요런 얼굴을 CSS를 통해 만들었는데요~ 복잡하네요 요런 얼굴 어디서 나오는거죠?ㅋㅋ 많이 본 거 같은데 암튼 이 놈의 얼굴을 만드는데 엄청나게 고생해서 만든 티가 나네요~ 만들어진 디브만 해도 엄청나네요^^
[Design] box-shadow를 이용한 깔끔한 체크 아이콘 디자인 box-shadow를 이용한 깔끔한 체크 아이콘 디자인입니다.요런 디자인에은 linear-gradient, box-shadow, border-radius이런것만 잘사용하면 완성 할 수 있습니다.[미리보기] See the Pen Tick app icon exercise by Rachel Wong (@rachelwong) on CodePen.
[Design] CSS3를 이용한 깜직한 시계 아이콘 디자인 하기 | 깔끔하고 색감좋은 시계 아이콘이네요~#clock { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 150px; height: 150px; margin: auto; border-radius: 100%; background: #8CF; box-shadow: inset 0 5px #6AD, 0 0 0 5px #FFF, 0 0 0 15px #6AD, 0 5px 0 15px #CCC;}#clock:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 25px; height: 25px; margin: auto; border-radius: 100%..
[Animation] 360도 회전하는 듯한 지구 모형 만들기 CSS3 플래시를 배우면 이런거 항상하는데~플래시보단 어설프지만 구현은 가능합니다.@keyframes rotate { from {background-position:0 0; -webkit-filter: hue-rotate(0deg)} to {background-position:400px 0; -webkit-filter: hue-rotate(360deg)}}@-webkit-keyframes rotate { from {background-position:0 0; -webkit-filter: hue-rotate(0deg)} to {background-position:400px 0; -webkit-filter: hue-rotate(360deg)}}@-moz-keyframes rotate { from {background..
[Design] linear-gradient를 이용한 멋있는 장소 아이콘 만들기 linear-gradient를 이용해서 이렇게 만들었습니다.배경처리가 돋보이는 디자인입니다.text-shadow: 0 0.035em 0.035em rgba(0, 0, 0, 0.5); box-shadow: 0 0.025em 0.025em rgba(0, 0, 0, 0.25); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15) 10%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 30%), -moz-linear-gradient(to..