Louis HarboeiOS 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로 표현했습니다.

from Made In CSS; iOS icons and more
Posted by 행복한고니 트랙백 1 : 댓글 1

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon Ohming 2012.01.04 14:32 신고

    정말 대단하네요!

Brad Neuberg씨가 이번에 iPhone에 포함된 두 가지 근사한 HTML5 기능에 대해 알려주셨습니다.

Safari 자바스크립트 데이터베이스 프로그래밍
HTML5 스펙에는 클라이언트 데이터 저장을 위한 새로운 메커니즘이 있습니다. 바로 자바스크립트 데이터베이스 지원입니다. HTML 5는 현재 Web Hypertext Application Technology Working Group(WHATWG)가 개발하고 있습니다.

자바스크립트 데이터베이스 지원은 Safari 3.1 이후부터 가능하며, iPhone OS는 2.0 이후부터 가능합니다.

HTTP 쿠키가 허용하는 용량보다 많은 데이터를 사용자의 로컬 컴퓨터에 저장하려는 웹 개발자라면 이 문서를 꼭 읽어보셔야 합니다.

HTML5 응용프로그램 캐시
구글의 Michael Nordman씨가 "이건 아직 Safari나 iPhone에서 지원하지 않습니까?"라고 물었습니다.

David Kilzer씨가 이에 대한 답변을 남겼습니다. "이 기능은 iPhone OS 2.1에 포함되었습니다. iPhone에 설치된 Safari에서 '+' 버튼을 눌러 '홈 스크린에 추가하기'를 사용하면, (HTML5 스펙별로) manifest가 정의된 웹 응용프로그램이 다른 캐시된 리소스와 함께 저장될 것입니다. 이 기능이 동작하려면 manifest 파일이 '반드시' 정확한 MIME 타입으로 제공되어야 합니다.

Mac OS X에는 아직 이 기능을 지원하는 Safari를 탑재하지 않았습니다."

from HTML5 Features in latest iPhone; Application Cache and Database
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

Matthew Congrove씨가 iPhone SKD를 가지고 놀았지만, 원래 자기 분야가 아니라 자기 분야로 돌아와 iPhone용 웹 응용프로그램을 작성하셨다고 합니다. 그리고 새로운 것들을 가능하게 한 Safari의 업데이트에 아주 즐겁게 놀라셨다고 합니다:
연구 도중에 저는 제가 정말 좋아함에도 불구하고 완전히 잊혀진 어떤 것을 떠올렸습니다; iPhone 업데이트가 네이티브 써드파티 응용프로그램만을 위한 것은 아니었지만, 이미 있는 응용프로그램들도 업그레이드 했습니다. 네, 이미 있는 응용프로그램에는 Safari도 포함되어있습니다. iPhone의 내장 브라우저 업그레이드는 CSS 애니메이션과 트랜지션에 대한 지원, JavaScript로 접근할 수 있는 데이터베이스, 약간의  새로운 DOM 셀렉터 등을 추가했습니다. 나에게 이것은 myDailyPhoto 응용프로그램이 좀 더 네이티브 Cocoa 느낌을 낼 수 있다는 것을 의미했습니다. 여기까지 생각이 미치자마자 저는 자리에 앉아 이런 작은 테스트 프로그램을 작성했습니다.


휙휙 움직이는 효과(flick effect)를 위해 Matthew씨는 아래와 같은 CSS를 작성했습니다:
[code:css]
.divSlide {
        -webkit-animation-name: "slide-me-to-the-right";
        -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
        from { left: 0px; }
        to { left: 100px; }
}

from iPhone Safari Flick Navigatrion By Example
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요