Louis Harboe가 iOS 4 아이콘을 CSS만으로 만들었습니다. 그의 작품을 볼 수 있는 것은 물론, 아이콘을 그리기 위해 사용한 높은 수준의 아이디어를 들어볼 수도 있습니다.
연락처 아이콘에서 사람의 실루엣을 그리기 위해 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로 표현했습니다.
'[IT] Web Tech' 카테고리의 다른 글
| 좀비 버전 게임 스타일 패럴랙스 스크롤링 제작 (1) | 2014.05.30 |
|---|---|
| MySQL(또는 다른 RDBMS) 보다는 MongoDB를 사용해야 할 때 : 결제시스템 사례 (0) | 2014.05.26 |
| localForage : 더 나아진 오프라인 저장소 (0) | 2014.02.14 |
| W3C 모바일 웹 모범 사례 (0) | 2014.02.03 |
| CSS만으로 아이폰 아이콘 만들기 (1) | 2010.06.29 |
| 파이어폭스, 플러그인 오류 보호를 도입하다. (1) | 2010.06.25 |
| HTML5를 배우고 싶다면? HTML5Rocks.com! (2) | 2010.06.24 |
| MagnifyMa : CSS 돋보기 (1) | 2010.06.17 |
| CSS calc() (2) | 2010.06.16 |
