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

Browse By

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

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

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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください