タグ要素一つだけで作れる、リボン見出しが作れる CSSコード 『Single Element Pure CSS3 Double Fold Ribbon』

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

Single Element Pure CSS3 Double Fold Ribbon

http://thecodeplayer.com/walkthrough/single-element-pure-css3-double-fold-ribbon

WS003021

こんなオシャレなボタンが、HTML要素一つ、h1一つだけで作られています。
コードは、グラデーションやbox-shadow等の色々なテクニックを使って作られています

CSSのh1のところをクラス名に置き換えてやれば、既存のウェブサイトの見出しに取り入れやすいかと思います

また、親要素の方のCSSで指定してやることで、ビジュアルエディタとかで見出しを指定するだけで使えてしまうのもまた便利である。

ブラウザの対応もIE7でも正しく表示されます

 

 

リボンのデザインはこちらを元にされています

http://www.premiumpixels.com/freebies/pretty-little-folded-ribbon-psd/

 

CODEPENでもデモとコードが見れます

http://codepen.io/Stephanie_Cunnane/pen/hnotz

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)