リボン風見出しのCSS3デザインサンプル | 日刊ウェブログ式

リボン風見出しのCSS3デザインサンプル

リボン風見出しのCSS3デザインサンプル

見出しに使えるリボン風のCSS3サンプルのコードをメモ代わりにアップしておきます。ボックスシャドー、テキストシャドー、グラデーションも使っています。

サンプルタイトル

after擬似要素でリボンの左下に影を付けています。

.sample_title{
background: #444;
background: -moz-linear-gradient(left, #222 0%, #444 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222), color-stop(100%,#444));
background:-webkit-linear-gradient(left, #222 0%,#444 100%);
background:-o-linear-gradient(left, #222 0%,#444 100%);
background:-ms-linear-gradient(left, #222 0%,#444 100%);
background:linear-gradient(left, #222 0%,#444 100%);
margin:60px 0 30px -40px;
padding:12px 10px 12px 30px;
color:#fff;
font-size:16px;
font-weight:700;
box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
position:relative;
}
.sample_title:after{
content:' ';
position:absolute;
left:0px;
bottom:-18px;
border-top:9px solid #666;
border-right:9px solid #666;
border-bottom:9px solid transparent;
border-left:9px solid transparent;
}

リボン風見出しの参考にした記事

コピペで出来るCSS3で見出しスタイリング

CSSで巻き込みリボン風見出しの作り方

Ribbons in clean HTML and progressive CSS

How To Create Depth And Nice 3D Ribbons Only Using CSS3

見出しデザインの参考にしたい CSSで作るhタグのサンプル集

関連記事

はてなブックマーク

コメント一覧

承認待ちコメント

このコメントは管理者の承認待ちです

2011/12/18 Sun 10:16 | URL

コメントを残す

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

| BLOG TOP |

広告

WordPressテーマ「Gorgeous (TCD013)」

カテゴリ

検索フォーム

月別アーカイブ

あわせて読む

あわせて読みたいブログパーツ

人気記事

無料の写真素材特集
商用で使える写真を集めてみました..

WordPressプラグインいろいろ
まず導入すべきプラグインを集めて..

ベクター画像を大量に無料配布
Vecter素材を無料配布するサイトまとめ..

ココを押えればCSS3が分かる
CSS3対応のツールやお役立ちサイトをご紹介..

女性向けPhotoshopブラシ
かわいらしい感じのフォトショップブラシを..

この質感がたまらない紙テクスチャ
背景に使える紙テクスチャ + チュートリアル..

見出しデザインCSS
CSSだけで作る見出しサンプル集..

Photoshopグラデーションまとめ
WEBデザインをPhotoshopでプロっぽく..

AdobeAIRアプリ厳選まとめ
最近のAirアプリを16ツール..

和風デスクトップ壁紙特集
日本の美しい風景を壁紙にしたものを集め..

ロゴ画像作成ツール集
初心者からプロまで幅広く利用できる...

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

タグクラウド