cssのちょっと小粋なテクニック13個

Webデザイン関連(RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。

cssのちょっと小粋なテクニック13個

nice-css
小粋の定義は分かりませんが、
ちょっと「おっ」と思えるcssの
テクニックをいろいろと。以前、
記事にさせていただいた、ｃｓｓ
とHTMLのみで3D効果を実現
したテクニックで他にも無いかな
と思って同様に驚いたテクニックです。

3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのｃｓｓを使った良アイデアや高度なテクニックなど。

ざっとしか見ていませんが、多分jsは使ってないと思います。

Film strip gallery with information text

nice-css01

ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。

Film strip gallery with information text

Super animation – just for the fun of it

nice-css02
凄いですねー、これ。画像の上でマウスを動かすと写真の馬が走り出します。

Super animation – just for the fun of it

Flick animation

nice-css03
同様にマウスを乗せて動かすと気持ちよくアニメーションします。

Flick animation

The streaker – just for fun

nice-css04
同様アニメーション。マウスを左から右へ持っていくと合わせてドアからドアへ人が走り出します。

The streaker – just for fun

A definition list bar char

nice-css05
ｃｓｓで作った棒グラフ。綺麗ですね。。

A definition list bar chart

@font-face – true-type fonts

nice-css06
通常表示できないフォントでテキストを表示させるテクニック。以下のようなスタイルで実現していました。

@font-face {
	font-family: 'ArtBrush Medium';
	src: url('Artbrush.eot');
	src: local('ArtBrush Medium'), local('ArtBrush-Medium'), url('Artbrush.ttf') format('truetype');
}

@font-face – true-type fonts

It’s amazing wot CSS can do

nice-css07
ｃｓｓで作成された迷路ゲーム。凄い・・・隠し扉も作るなど凝っています。

It’s amazing wot CSS can do

Calculating CSS for kids

nice-css08
子供向けに作ったｃｓｓの計算ゲーム。左からマウスオーバーしていきます。動かせば「なるほど」と思って頂けるはず。

Calculating CSS for kids

CSS tic tac toe game

nice-css09
これをｃｓｓで作成しているのは驚きです。懐かしの○×ゲーム。クリックで場所を選択すると同時に×で防がれます。勝てる？

CSS tic tac toe game

3D – CSS puzzle

nice-css10
以前もご紹介させて頂きましたが、cssの3Dのパズルゲーム。右下の桟橋からスタート。落ちたらアウト。

3D – CSS puzzle

Horizontal sliding menu

nice-css11
スライドメニューっぽくしています。アイデアが面白いなぁと思いました。

Horizontal sliding menu

An unordered list with link images

nice-css12
マウスオーバーで線引きされたコンテンツが出現。実践に応用できそう。

An unordered list with link images

Multi level dropdown/flyout menu – just (X)HTML & CSS

nice-css13
3階層のドロップダウンメニューです。これも使えますね。

Multi level dropdown/flyout menu – just (X)HTML & CSS

以上厳選13テクニックでした。スタイルはリンク先でソースをご覧下さい。使える使えないは人によるでしょうが、こういうのを見るとｃｓｓの奥の深さを改めて思い知らされます。

頂いたコメント
トラックバック
お読み下さい

【cssのちょっと小粋なテクニック13個】へのコメント 3

トラックバック

かちびと.netにリンクの無いトラックバックは受付けてないです。
コメントされる前にガイドラインをご覧下さい

この記事のトラックバックとURL

URL:
TRB:

お気軽にコメントして下さい

*は必須です

» cssのちょっと小粋なテクニック13個