[CSS]スクリムを使ってちょっとリッチなアイキャッチを作る覚書

CSS Advent Calendar 2014 24日目です。

Photoshop VIPの「ゴージャスなUIデザインを作成する7つのルール」という記事にて「スクリム」というデザイン手法が紹介されていました。

今回はこの「スクリム」とアイキャッチ・記事タイトル部分に適用させる方法を紹介します。

スクリムとは？

「スクリム」は写真撮影用機材のひとつで、反射する光を和らげる効果があります。これはビジュアルデザインにおいて、イメージ画像上のテキスト文字を読みやすくしてくれるテクニックと同じです。よりWebサイトをズームアウトすると、文字の下にだけ影が表現されているのが分かります。
ゴージャスなUIデザインを作成する7つのルール – Photoshop VIP

元記事で紹介されているサイトでは、このようにアイキャッチ画像にタイトルを重ねて使用しています。

Blog Archives – Elastica

試してみた

せっかくですので、この記事にもスクリムを使ってみています。

インラインCSSで横着したため、ブラウザサイズによってはちょっと変なところもありますが・・・

この記事のタイトルに入れているCSSは以下のようなものです、
[css]
h2.content-title.entry-title {
position: absolute;
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0px 100px 71px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 100px 71px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0px 100px 71px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0px 100px 71px rgba(0, 0, 0, 0.15);
box-shadow: 0 0px 100px 71px rgba(0, 0, 0, 0.15);
color: #fff;
text-shadow: 0px 0px 10px #000;
top: 0;
padding-right : 40px;
}
[/css]

box-shadowで影を作り、text-shadowで文字を縁取りするという考え方ですね。

position:absoluteで画像の上にテキストを重ねるように調整することで、どのサイトでも簡単に実装ができそうです。

長文タイトルは厳しいかも・・・？

position:absoluteでレイアウトを調整するときの宿命ですが、画像からタイトルがはみ出すことがあります。

ですのでwrapperクラスのdivを作ってoverflow:hiddenするか、そもそも長いタイトルを使わないかという対応が必要になりそうです。

CSS Advent Calendar 2014最終日はzakuro9715さんによる「BEMの話でも（予定）」です。