css3実験のトップページ
cssでWEBサイトの部品を試作してみたコンテンツ
原森IT研が css のみでいろいろ作ってみた演出等を紹介しています。
CSS3で試作実験
div図形div図形は、divやspanタグの四角いボックスとbefore・afterなどを変形して組み合わせ、四角以外の形を表現・装飾したものです。
縦メニュホバー演出縦メニュホバー演出は、縦に並ぶメニューのマウスホバー時の演出等をいろいろ作ってみたものです。
フキダシツールチップフキダシツールチップは、要素にマウスホバー時にフキダシのような説明ボックスが表示される演出です。
アニメーション部品アニメーション部品は、css3のanimationでdiv図形などをgifアニメのようにアニメさせる演出です。
divbox装飾divbox装飾は、四角のdivボックスを角丸や影付きに装飾してみたものです。
css3 + html5 でキャプション表示(figure/figcaption)キャプション表示は、このリンクボタンのようなものや商品画像にテキスト情報をアニメ演出させて表示さるようなものです。
list装飾list装飾は、リストマークをdiv図形で演出してみたものです。
ホバーアニメボタンホバーアニメボタンは、ボタンやバナー(縦横メニューも同様ですが)リンクなどを演出してみたものです。
文字装飾文字装飾は、文字を光らせたりなどの装飾を実験してみたものです。
flash代替キャッチアニメflash代替キャッチアニメは、cssアニメで文字やボックス、画像等をアニメーションさせて広告アニメやサイトバナー(大)っぽいものを実験してみたものです。
横メニュー横メニューをホバー演出してみたものです。