昨日書いた「画像を使わずに見出しを水平線で挟むCSS」をもうちょい工夫してみる

スポンサーリンク

昨日書いた記事は実装のみでしたので、
もう少し工夫してみました。border自体
さほど出来ることは多くはありませんが
それでもちょっと素敵な見出しが画像
を使わず作れるのは個人的には結構
嬉しいTipsだったりします。

今日のはクロスブラウザとはいかないものもありますが、画像とjsは一切使用していません。基本的な事は昨日の記事をご覧になってください。

ものすごく使用頻度が高いっていうものでもないですけど日曜日ですし、お遊び的に。

Sample

誰でも思いつくことしかしてませんけどwまぁ自分用のスニペットです。このブログもですけど、僕はとにかく画像の利用数を減らしたいと考えています。見た目もシンプルなものを好みますし、それがユーザービリティやコンバージョンにも影響を与える事があるのでこういった手法を好むのは一部の人間でしょう。少なくとも多くのデザイナーさんやコーダーさん目線では需要は無いと思います。

marginとかpaddingは面倒なので手抜きです。やってることはたいした事じゃない、シンプルなものなので上手く応用させたいですね。

もうちょい工夫できそうなんですけど・・・面白いアイデアあったら教えてください。僕もまた暇見て遊んでみます。

jsfiddleでもフォークできますのでお気が向かれましたらなんか作ってみてくださいませ。

以前、jsfiddleの使い方も記事にしましたのであわせてどうぞ。

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services