CSS3

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

 

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。

CSS3から扱えるエフェクト機能。

2010.01.09 / Labs

CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。

ボックスのコーナーを丸くする

ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。

 

Box Round

ボックスにシャドウを付ける

ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。

 

Box Shadow

テキストにシャドウを付ける

X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。

 

Text Shadow

テキストを光らせる

テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。

 

Text Glow

ボックスを透過させる

要素に対して透明度を0〜1の間で指定できます。

 

Opacity