Blog
Webデザイン

バレンタインデーにまだ間に合う!ブログやサイトをチョコレート色に彩るCcSSの実装

2013-02-08 16:43
この記事は約 2 分で読めます。

巷ではバレンタインデー間近という雰囲気ですが、特に予定のない私からみなさまへのちょっと早いチョコレートの贈り物です。

「CcSS」聞き慣れない見慣れないワードだと思いますが
ブログやサイトをチョコレート色に彩るには大事な技術となります。

そうそれは
Chocolatecoating Style Sheet』

・・・・・・
・・・・
・・・

・・・はい、それでは以下にご紹介します。

IE8くんのこと前から・・・(*^.^*)

chocolate-coating-style-sheet-img01chocolate-coating-style-sheet-img02
サンプルとソースを見る »
「border」の上3px、左右5px、下12pxの幅と色を調整することで立体的な表現をしています。また、擬似要素の「:before」「:after」に「border」で作成した台形を配置して切り込みを再現。台形の作り方はこちらをご覧ください。
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン

でもIE8くんの分だけちょっと角丸と影、失敗しちゃった(/ω\)
chocolate-coating-style-sheet-img01ie

IE8くん、義理だけど・・・(;^_^A

chocolate-coating-style-sheet-img03 chocolate-coating-style-sheet-img04
サンプルとソースを見る »
「border」で上面の窪んだ部分を、側面の立体感を「box-shadow:」で表現しています。

崩れてはないけど、おもいっきり失敗しちゃった・・・
ぺちゃんこだし(/ω\) IE8くんごめんね・・・

chocolate-coating-style-sheet-img03ie

ちょっと、私のキャラクターが変わってしまったようですが、バレンタインと言うことでお許しくださいm(_ _)m

そのままコピペ使っていただいても、アレンジして使っていただいても、ご活用いただけたら幸いです。
以下のfacebookコメントやシェアから感想やご意見、ご指摘などいただけると嬉しいです。よろしくお願いします。

> > >
あわせて読みたい