「純粋なCSSを使ってクールなことをしている私を見てください」というミームが好きですか？ 配信します。 一方で、そのようなミームは、人々がどれほど素晴らしいものを作成できるかを示していますが、他方では、私たちの生活を楽にするツールが必要であることを思い出させます。 しかし、少なくともプラットフォームはすでにここにあり、ツールは後で表示される可能性があります。
Lewis Harboは、 純粋なCSSでiOSアイコンのセットを作成することで、iPhone 4の購入を祝いました。 これで彼の作品を見ることができ、著者は実装の背後にあるアイデアについて話します。
連絡先アイコンでは、シルエットアイコンに5つの異なる形状を使用しました。 頭は丸い長方形で、次に別の首の長方形と体の歪んだ半円です。 肩から首まで曲線を描くために、アイコンの上部に2つの円を配置しました。
天気アイコンには、太陽から放射される複数の光線があります。 これらの光線はそれぞれ、両端が透明になるグラデーションを備えた長い長方形です。 -webkit-transform：rotateを使用して、各長方形を異なる角度で回転させました。 iTunesアイコンにも同じ効果が使用されました。
iDiskアイコンにクラウドアイコンを表示するために、丸い長方形の上に重ねられた2つの円を使用しました。 幅の広い円には、長方形の一部を切り取るグラデーションがあります。
完全なカレンダータイプの例をご覧ください。
.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 ;
}
素晴らしい。 このアプローチの大きな利点の1つは、スケーラビリティです。 IPhone 4ユーザーは、低解像度の外観用に設計されたアプリケーションのapplicationsい点について既に説明しています。 Facebookアプリケーションでも...テキストは見栄えが良いが、アイコンはブロックで構成されているようだ。
ところで、CSSグラデーションの他の優れた例もいくつか表示されています 。