フォトショいらず:CSSで画像の上に斜めの帯と文字を表示してみる

エ・ビスコム・テック・ラボ
2009-02-20 19:38:02
  • このエントリーをはてなブックマークに追加

 「FirefoxとSafariのCSS徹底検証」では、直近の2回に渡ってCSSのプロパティ「transform」を紹介している。

 今回は番外編として、transformプロパティを使って、画像に対し斜めの帯を付けて表示するテクニックを紹介しよう。

画像にななめの帯を付けて表示する

 transformプロパティを利用すれば、ヘッダー画像にななめの帯を付けるようなデザインをCSSで実現することができる。

 たとえば、次のサンプルでは「Welcome to my Homepage」という文字を表示した黄色い帯を画像の右上に重ね、45度回転して表示している。このとき、黄色い帯の両端を画像に合わせてカットするため、全体を囲んだ

に対してoverflow:hiddenと指定しているのがポイントだ。

画像に対して、黄色い帯+文字をななめに重ねている(画像をクリックすると拡大します) 画像に対して、黄色い帯+文字をななめに重ねている(画像をクリックすると拡大します)
#container{
width: 750px;
overflow: hidden;
}

div#message{
font-size: 16px;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
width: 250px;
padding: 5px;
text-align: center;
background-color: yellow;

-webkit-transform: translate(570px,-250px) rotate(45deg);
-moz-transform: translate(570px,-250px) rotate(45deg);

-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
}
  <div id="container">
  <div id="photo"><img src="photo.jpg" alt="PHOTO" /></div>
  <div id="message">Welcome <br />to my Homepage</div>
  </div>
ブラウザで表示を確認する

 なお、transformプロパティを適用しない状態では次のような表示になる。

transformプロパティを適用しなかった場合(画像をクリックすると拡大します) transformプロパティを適用しなかった場合(画像をクリックすると拡大します)

 transformプロパティは、Safari 3.1以上とGoogle Chromeでは-webkit-transform、Firefox 3.1(ベータ版)では-moz-transformと記述する。現在のところ、それ以外のブラウザではサポートされていない。