본문 바로가기

광고

Design

Tutorial

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

Reference

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..
[Design] 요런 얼굴을 CSS를 통해 만들었는데요~ 복잡하네요       요런 얼굴 어디서 나오는거죠?ㅋㅋ 많이 본 거 같은데 암튼 이 놈의 얼굴을 만드는데 엄청나게 고생해서 만든 티가 나네요~ 만들어진 디브만 해도 엄청나네요^^   <div id="v" style="margin-top:100px;">    <div class="left absolute">      ..
[Design] 4개의 카드를 보여주는 귀여운 아이콘 만들기 CSS3 4개의 카드를 보여주는 귀여운 아이콘 만들기 CSS3[미리보기] See the Pen Four of a Kind by Rachel Wong (@rachelwong) on CodePen.
[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: in..
[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 {&nbs..
[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..