연락처 아이콘에서 사람의 실루엣을 그리기 위해 5개의 도형을 사용했습니다. 머리는 둥근 모서리를 가진 사각형으로, 목은 사각형으로, 몸은 약간 찌그러뜨린 반원으로 표현했습니다. 어깨에서 목으로 이어지는 선을 표현하기 위해 원 두개를 그 위에 겹쳤습니다.
날씨 아이콘에는 해의 뒤편에서 나오는 여러 갈래의 햇살이 있습니다. 햇살은 양 끝단으로 갈수록 투명해지는 그래디언트 배경색이 적용된 긴 사각형으로 표현했습니다. 사각형의 각기 다른 각을 표현하기 위해 -webkit-transform:rotate를 사용했습니다. 같은 효과를 iTunes 아이콘에도 적용했습니다.
iDisk 아이콘의 구름 아이콘을 그리기 위해 둥근 모서리 사각형 위에 두 개의 원을 겹쳐 표현했습니다. 큰 원은 사각형 바로 앞에서 멈추는 그래디언트 배경색을 가지고 있습니다.
달력을 표현하기 위한 전체 소스는 다음과 같습니다.
[code:css]
.calendar {
background: #9B2424;
}
.calendar .header {
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEC4C4), to(#521B1C), color-stop(.92,#da3434),color-stop(.1,#ef9fa5));
height: 50px;
width: 176px;
-webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.4);
}
.calendar p.weekday {
color: #fff;
font-weight: bold;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
width: 176px;
line-height: 50px;
font-size: 25px;
text-align: center;
}
.calendar p.daynumber {
color: #000;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
width: 176px;
line-height: 126px;
font-size: 130px;
text-align: center;
}
.calendar .paper {
-webkit-border-bottom-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#EDEDED), color-stop(.05,#BFBFBF),color-stop(.2,#E3E3E3));
height: 126px;
width: 176px;
}
멋지죠? 이 방법의 장점은 크기를 자유자재로 조절할 수 있다는 것입니다. 벌써 아이폰 4 사용자들 사이에서는 저해상도 아이콘에 대한 불만이 나타나고 있습니다. 심지어 페이스북 앱이라 해도... 텍스트는 정말 훌륭하지만 아이콘은 투박합니다.
이 외에 또 다른
CSS 그래디언트 예제를 소개할까 합니다. 아이콘, 버튼, 진행상태바 등을 CSS로 표현했습니다.
from
Made In CSS; iOS icons and more
댓글을 달아 주세요
정말 대단하네요!