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

Tweet

239

Single Element Pure CSS3 Double Fold Ribbon

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

こんなオシャレなボタンが、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

Tweet

短縮URL:

2014年05月30日 WEB制作系 コード・プラグイン CODECodePen