CSS3コーディングのテクニック

もはや欠かすことのできないhtml5+css3。

今回はすぐに使える実践的なテクニックをご紹介します。

※webkitを基本として動作検証しています。

 

CSS3コーディングのテクニック

 

 

box-shadow

付箋 STICKY

付箋 STICKY

(ポイント)
擬似要素beforeとafterを使って、めくれ上がった部分の影を用意し、transformプロパティで回転させることで角のズレた影を表示させています。

 

 

pseudo

犬の耳 DOG EAR

犬の耳 DOG EAR

(ポイント)
擬似要素beforeを利用して角を準備。さらにborderプロパティで縦方向と横方向からそれぞれ1箇所ずつを背景色を合わせる、または透明にすることで、三角形を作り表示させています。

 

 

写真の束 PHOTOS

写真の束 PHOTOS

(ポイント)
擬似要素beforeとafterで重なりあった写真束の後ろ側を準備。transformプロパティで角度をつけて表示させています。それぞれの画像はbackground-imageで用意しています。

 

 

background

背景イメージのぼかしパネル BLUR PANNEL

背景イメージのぼかしパネル BLUR PANNEL

(ポイント)
疑似要素で生成した背景イメージをfilterプロパティblur関数でぼかしています。背景画像の明示的な継承inheritが重要です。

 

 

ストライプ STRIPES

ストライプ STRIPES

(ポイント)
backgroundプロパティにてgradient値を利用しています。さらに25%刻みで透明と半透明のグラデーション切り替えポイントを用意してストライプ化します。

 

 

チェック柄 PICNIC

チェック柄 PICNIC

(ポイント)
backgroundプロパティにてgradent値を利用しています。background-sizeプロパティで模様サイズを決めたら、縦方向のグラデーションと横方向のグラデーションを50%の不透明、透明で繰り返しにします。

 

 

チェック柄2 CHECKER

チェック柄2 CHECKER

(ポイント)
backgroundプロパティにてgradent値を利用しています。background-sizeプロパティで模様サイズを決めたら、25%刻みで斜めグラデーションの切り替えポイントを用意します。

 

 

transform

スウィング額縁 SWING

スウィング額縁 SWING

(ポイント)
擬似要素beforeとafterでフック部分を用意し、animationプロパティで揺れを用意します。transform-originプロパティを利用することで、スウィングの基準点をフック部分へ移動しています。

 

 

UI

シンプルなボタン BUTTON

シンプルなボタン BUTTON

(ポイント)
上部にハイライトとしてのbox-shadowプロパティをinset値で挿入します。擬似クラスhoverはスマートフォンでは意味がないので、activeを用意して押下時の対応を考慮しています。