2012
6
06

ol要素をcss+Webフォント+背景画像でカッコ良くしてみる

先日、ol要素をcssでランキング形式っぽくスタイリングする方法という記事を書きましたが、目次に使ってるol要素ももっと可愛くできるんじゃないかなと思ってやってみました!


完成図

120606-1

こんな感じです。まるいのは背景画像で、数字はWebフォント。

120606-2

:before要素がサポートされていないIE7以下はこんな風に見えます。

マークアップ

html

css

フォントは、Googleのwebフォントを使っています。

現在のリストスタイル

というわけで、現在このサイトではol(左)、ul(右)はこのようなスタイルになっています!

120606-1 120606-3

同じような色合いにしてみました_(:3 」∠)_

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/06/06


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top