原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

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アニメで文字やボックス、画像等をアニメーションさせて広告アニメやサイトバナー(大)っぽいものを実験してみたものです。

横メニュー横メニューをホバー演出してみたものです。

広告スペース

top > css3実験

border-radius

ボックスの角を丸くするCSS。最新版FF以外はベンダープレフィックスが必要。(2014.11.23 現在)

transform:rotateZ(Rdeg)

Z軸方向に(R)deg回転させる。

transform:skewX(Rdeg)

X軸方向に角度(R)degで傾斜変形

transform:skewY(Rdeg)

Y軸方向に角度(R)degで傾斜変形

transform:skew(Rdeg,rdeg)

X軸方向に角度(R)deg、Y軸方向に角度(r)degで傾斜変形

rgba(0,0,0,0)

色指定でα値を0にしているので、透明になる。※transparent も透明指定だが、色指定する方が確実かと思われる。

:hover

マウスホバーの擬似クラス

transition

時間的変化を指定するcssプロパティ

animation

アニメを指定するcssプロパティ

@keyframes

アニメのキーフレーム指定

transform

要素の変形を指定するcssプロパティ

dataset

独自データ属性(又は、カスタムデータ属性)。すべての HTML 要素に自分で設定した属性名と値を指定することができる仕様。

content:attr(属性名)

属性名の値を表示

エンボス

Emboss。板金や紙などに文字や絵柄などを浮き彫りにする加工

レタープレス

印刷業界では凸版印刷方式、凸の版で垂直圧力をかけ印刷する古い印刷方式のこと。平面の紙が圧力で凹む仕様をイメージして、webデザイン業界では紙に型押ししたような雰囲気のものを指し、エンボスの逆でへこんでる雰囲気のものをそう言ってる場合が多い気がする。ちなみに、「人間の目は上が明るく下が暗いの基本設定が脳内にあり、逆だとへこんで見える」という錯覚を利用したもの。

update 2015.04.05
カテゴリMENU
お問い合せ