Webデザイン関連(
RSS)のトピックです。SEOとWebデザインを共有する、という観点で情報を配信します。
cssのちょっと小粋なテクニック13個
カテゴリ » WEBデザイン, cssやプログラミング, インスピレーション

小粋の定義は分かりませんが、
ちょっと「おっ」と思えるcssの
テクニックをいろいろと。以前、
記事にさせていただいた、css
とHTMLのみで3D効果を実現
したテクニックで他にも無いかな
と思って同様に驚いたテクニックです。
3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのcssを使った良アイデアや高度なテクニックなど。
ざっとしか見ていませんが、多分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

cssで作った棒グラフ。綺麗ですね。。
@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

cssで作成された迷路ゲーム。凄い・・・隠し扉も作るなど凝っています。
Calculating CSS for kids

子供向けに作ったcssの計算ゲーム。左からマウスオーバーしていきます。動かせば「なるほど」と思って頂けるはず。
CSS tic tac toe game

これをcssで作成しているのは驚きです。懐かしの○×ゲーム。クリックで場所を選択すると同時に×で防がれます。勝てる?
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テクニックでした。スタイルはリンク先でソースをご覧下さい。使える使えないは人によるでしょうが、こういうのを見るとcssの奥の深さを改めて思い知らされます。
サイト内検索
- Webでよく見るアレの落書き・・・
- (3月14日)今日の「簡単海外記事」
- 高いところから地面を見下ろすとこんな感じ
- AmazonアソシエイトのツールはAZlinkが一番シンプルで使いやすい
- 日本語を完璧に使いこなすタイ人デベロッパー・タムタム氏のTwitterサービス3つ
- シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ
- WordPressユーザーにお勧め。管理メニューを表示するブックマークレット・WP Toolbar
- 無料でユーザー登録も不要。Webサイトのモックアップを直感で作成、PDFやjpgで保存できるLumzy
- アメリカで宗教団体に属している人の所得の差が分かる(かもしれない)1枚の図
- 4分間の歌と共にひたすらピタゴラ装置が動き続ける「OK Go」のPVが楽しい
Follow me
Bookmark
RSS講読
RSSフィード
ブックマーク
Twitter
Web Tips on Twitter
まとめ記事 on Twitter




【cssのちょっと小粋なテクニック13個】へのコメント 3
トラックバック
この記事のトラックバックとURL
URL:TRB:
お気軽にコメントして下さい
*は必須です