[B! tips][webdesign][html] ko-ya-maのブックマーク

ko-ya-ma id:ko-ya-ma

tipsとwebdesignとhtmlに関するko-ya-maのブックマーク (3)

擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。今回のサンプルは別サーバにアップしていますのでご覧ください。それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
ko-ya-ma 2013/01/28
css

html

WebDesign

tips
リンク
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
ko-ya-ma 2012/01/28
css

tips

html

webdesign
リンク
Stripes & other patterns with CSS3 — no images
Stripes & other patterns with CSS3 — no images By Lea Verou • From post Checkerboard, striped & other background patterns with CSS3 gradients
ko-ya-ma 2012/01/20
画像を使わないで作るストライプ柄・チェッカー柄

css3

tips

html

WebDesign
リンク
1