Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Calendar

2024年10月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
2728293031  

[CSS] CSS powered ribbons the clean way – リボン風のヘッダ制作の、キレイなコーディング手法

by in Web Design
  • Pocket
  • このエントリーをはてなブックマークに追加

海外サイトでよく見かけるリボン風のヘッドラインのコーディングの仕方について解説されてます。リボンの折り返しの部分には透過PNGを使った一般的なデザインですが、「俺のコードはキレイだYO！」的な部分が見所。通常ならボックス要素を入れ子にして記述するHTMLソースが、h2だけでコーディングされてて、装飾部分はCSSに任せているのが特徴。このコーディングならデザインが変わった時の汎用性も高く、なかなかナイスです。

CSS powered ribbons the clean way

Tagged with: ,

One thought on “[CSS] CSS powered ribbons the clean way – リボン風のヘッダ制作の、キレイなコーディング手法”

  1. Pingback: Tweets that mention [CSS] CSS powered ribbons the clean way – リボン風のヘッダ制作の、キレイなコーディング手法 - mBlog -- Topsy.com
  2. Trackback: Tweets that mention [CSS] CSS powered ribbons the clean way – リボン風のヘッダ制作の、キレイなコーディング手法 - mBlog -- Topsy.com

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。