H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
CSSだけで実現した見出しデザイン | HTML5GOGO
HTML5GOGOをプチリニューアルしました！ 今回は、その一環で対応した見出しのデザイン変更を、画像を使わずに実現することに成功したので、ご紹介したいと思います！必見です！ ※IE7以前では対応が出来ません 見出しサンプルです！ 見出しは全体的に変更してありますが、一番苦労したh2の見出しについてご説明します。 <br /> .sample {<br /> position:relative;<br /> margin:2.5em 0 0.5em 0;<br /> padding:3px 0 3px 23px;<br /> <a style="text-decoration: none; color: inherit; cursor: default; outline: none;" href="http://totalcooling.pt/online-fatish-sex-video
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
