擬似要素とCSS3を使ってリストメニューを楽しくデザイン

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い

[Hi32]

メニューによく使うアイコンをｃｓｓで、そして、css3でhoverアニメーション

[yamadar]

CSS3とCSS3アニメーションの勉強に。ひと通り読んで理解した。引き出しを増やしておきたい。

[poppun1940]

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから via はてなブックマーク - 人気エントリー - テクノロジー http://b.hatena.

[delaymania]

サンプル6を画像使ってやろうと思ってたところだったのでちょうどよかったです。助かりました。