小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、ｃｓｓとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。
3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。
ざっとしか見ていませんが、多分jsは使ってないと思います。
Film strip gallery with information text
ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。
Super animation – just for the fun of it
凄いですねー、これ。画像の上でマウスを動かすと写真の馬が走り出します。
Flick animation
同様にマウスを乗せて動かすと気持ちよくアニメーションします。
The streaker – just for fun
同様アニメーション。マウスを左から右へ持っていくと合わせてドアからドアへ人が走り出します。
A definition list bar char
ｃｓｓで作った棒グラフ。綺麗ですね。。
@font-face – true-type fonts
通常表示できないフォントでテキストを表示させるテクニック。以下のようなスタイルで実現していました。
@font-face {
font-family: 'ArtBrush Medium';
src: url('Artbrush.eot');
src: local('ArtBrush Medium'), local('ArtBrush-Medium'), url('Artbrush.ttf') format('truetype');
}
It’s amazing wot CSS can do
ｃｓｓで作成された迷路ゲーム。凄い・・・隠し扉も作るなど凝っています。
Calculating CSS for kids
子供向けに作ったｃｓｓの計算ゲーム。左からマウスオーバーしていきます。動かせば「なるほど」と思って頂けるはず。
CSS tic tac toe game
これをｃｓｓで作成しているのは驚きです。懐かしの○×ゲーム。クリックで場所を選択すると同時に×で防がれます。勝てる？
3D – CSS puzzle
以前もご紹介させて頂きましたが、cssの3Dのパズルゲーム。右下の桟橋からスタート。落ちたらアウト。
Horizontal sliding menu
スライドメニューっぽくしています。アイデアが面白いなぁと思いました。
An unordered list with link images
マウスオーバーで線引きされたコンテンツが出現。実践に応用できそう。
Multi level dropdown/flyout menu – just (X)HTML & CSS
3階層のドロップダウンメニューです。これも使えますね。
以上厳選13テクニックでした。スタイルはリンク先でソースをご覧下さい。使える使えないは人によるでしょうが、こういうのを見るとｃｓｓの奥の深さを改めて思い知らされます。
