スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

「CSS3でできること」を知るために見ておきたい42のサイト

CSS3を使って作ったメニュー、ボタン、スライドショーなど、「CSS3でこんなことができるのか」と感心したサイトを集めてみました。

jQueryと組み合わせたものもよく見かけますが、今回はCSSのみで実装しているものを集めています。

tittle-css3.png
目次
  1. メニューいろいろ (12個)
  2. テキストに関すること (5個)
  3. CSSだけで作ったボタン (8個)
  4. 画像に関すること (7個)
  5. あのロゴやあのキャラクター (10個)

メニューいろいろ

普通のメニュー、ドロップダウンメニュー、アコーディオンメニューなど色々あります。

Creative CSS3 Animation Menus | Codrops

マウスを乗せたときの動きがダイナミックなメニューです。

Animated Navigation Menu with CSS3 | Web Designers Desk

マウスを乗せると文字が一周まわります。jQuery版も用意されています。

CSS3 Minimalistic Navigation Menu | Tutorialzine

シンプルですが使い勝手の良さそうなメニューです。

Display social media icons in a beautiful way using CSS3

使い勝手が良さそうなアイコンメニューです。jQuery版もあります。

CSS3 Dropdown Menu

CSSだけで作ったドロップダウンメニューです。複数階層でも対応できます。

Create a Slick Menu using CSS3 | INSIC DESIGNS

画像を使ったようなきれいなメニューです。

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts+

マウスを乗せると大きなボックスがあらわれるダイナミックなメニューです。

Janko At Warp Speed | Create Vimeo-like top navigation

シンプルなメニューですがおしゃれで使い勝手が良さそう。

Sweet tabbed navigation bar using CSS3

タブメニューです。細部にまでこだわっている感じがします。

Create the accordion effect using CSS3 | The CSS Ninja - All things CSS, JavaScript & HTML

CSSだけで作ったアコーディオンメニューです。ie対策というのもありますがちょっと微妙。。

Accordion using only CSS – Paul Hayes

CSSだけで作ったアコーディオンメニューです。シンプルな作りになっています。

Use CSS3 to Create a Dynamic Stack of Index Cards | DesignLovr

画像は動物の絵だけで、文字はWebフォントを使っています。

テキストに関すること

text-shadowを使ったエフェクトが紹介されているサイトです。似たものもありますが、分かりやすいものを集めました。

CSS3 Animations and Masking Text

「background-clip: text;」を使って、テキストの背景に画像を適用させています。で、その背景画像が右から左へ動いてループしています。

Using CSS Text-Shadow to Create Cool Text Effects

text-shadowを使ってテキストを装飾しています。一見画像かなと思うくらいうまくできてます。

8 css3 text-shadow effects at The MegaMag

text-shadowを使ったエフェクトが8つ紹介されています。

12 Fun CSS Text Shadows You Can Copy and Paste | Design Shack

コピペで簡単に使えるtext-shadowのエフェクトが12個紹介されています。

7 Great CSS based text effects using the text-shadow property - Midwinter Duncan Grant

Webフォントを使ったものもあります。

CSSだけで作ったボタン

画像と間違えるようなボタンを紹介します。

Create an Advanced CSS3 Menu – Version 2 « Cameron Baney Design Blog

CSSだけで作ったボタンです。他にも色々ありますがこれはかなりクオリティが高いと思います。

CSS3 Animated Bubble Buttons | Tutorialzine

オンマウスで中の模様が激しく動きます。

Cross-browser CSS gradient buttons - RedTeamDesign

メッシュが入ったようになっていますが、画像は使っていません。

Increase Conversions with Call-to-Action Buttons | Pixify

アイコンは画像ですが、きれいなボタンです。

Create a Slick CSS3 Button with box-shadow and rgba – Inspect Element

シンプルなボタンです。しっかり押している感じがします

CSS3 Gradient Buttons

シンプルなボタンで色んな要素に適用させています。

Type study: An all CSS button « The Typekit Blog

押した感じがすばらしいボタンです。

How To Create Depth And Nice 3D Ribbons Only Using CSS3 | PVM Garage

boxをリボン風に装飾する方法が紹介されています。

画像に関すること

画像の加工やスライドショーなど画像に関するものを集めています。

Sexy Image effect like Flash in Pure CSS3 - nikesh.me

まるでFlashを使っているかのように画像が入れ替わります。

CSS3 Image Styles

リフレクトなど画像の加工方法がたくさん紹介されています。

Original Hover Effects with CSS3 | Codrops

画像にマウスを乗せたときの動きをCSS3で表現しています。

Fancy Image Hover Using CSS3 | Web Designers Desk

画像にマウスを乗せたときのエフェクトが4種類紹介されています。

Pure CSS Slideshow

CSSで作ったスライドショーです。動きはダイナミックですが、仕組みはシンプルです。

Infinite All-CSS Scrolling Slideshow | CSS-Tricks

画像が右から左へ流れていきます。複数の画像を使っているわけではなく、画像は1つです。

Create Animated Landscape using Pure CSS3 | AcrisDesign

CSSで簡単な動く絵を描いています。解説も親切で勉強になります。

あのロゴやあのキャラクター

Google Chrome

Google Chrome

Chromeのロゴです。シンプルですが細部にまでこだわっています。

Opera

Opera

形自体は簡単ですが、陰のつけ方などかなりクオリティは高いです。IEだとただの四角になってしまう。。

Internet Explorer

Internet Explorer

IEのロゴですが、IEはCSS3に対応しきれていないのでちゃんと表示されません。皮肉なロゴですね。

HTML5

HTML5

ぼちぼち見かけるようになってきたHTML5のロゴです。「HTML」と「5」は文字を使っています。

twitter

twitter

twitterのロゴです。曲線がきれいに表現されています。

Social media

Social media

frickrやgoogleのロゴがあります。比較的シンプルです。

iPhone

iPhone

目を疑うほどのすばらしいクオリティです。

ドラえもん

ドラえもん

このドラえもんはかなり有名ですね。

マリオ

マリオ

スーパーマリオのマリオです。見た目以上に作るの大変そうです。

アンパンマン

アンパンマン

SafariとChromeだとバタコさんにオンマウスでアンパンマンが飛んでいきます。バタコさんとチーズはさすがに画像です。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
どうもはじめまして、いつもブログ見させてもらってます。
今回http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html
Example5を使用したいのですが英語がわからなくて使い方がわかりません><

よかったら教えてもらいたいのですが・・・

使用PCはMacでsafariです
【2011/11/15 18:41】 | まさお #4B33lOYw | [edit]
まさお様

いつも見ていただいてありがとうございます。

実際使ったことはないのですが、記事を読んでみて
簡単に説明します。

まず、HTMLの構造については解説ページの上の部分の「The Markup」
となってます。

で、これは3つのanimationが使われています。
マウスを乗せたときに、右から出てくるもの
左から出てくるもの、下から出てくるもの、の3つです。

sample5の解説では@keyframes moveFromLeft(左から出てくるもの)
だけしか載ってません。

そのためmoveFromRightとmoveFromBottomも指定する必要があります。

moveFromBottomはsample2で紹介されていて、
moveFromRightはmoveFromLeftの-100%を100%に
変える必要があります。

というわけで3つのanimationをちゃんと設定してあげると
ちゃんと動くと思います。

拙い説明ですがこの記事はサイトの紹介ですので
ご容赦いただければと思います。
【2011/11/17 08:03】 | 管理人 #E2ywrYdA | [edit]
ご丁寧に説明ありがとうございます。

サンプル6を使う事にしました。

管理人様の説明を参考にさせていただきました。
正しく表示されました。
ありがとうございます。

今後もがんばってください!
【2011/11/17 21:09】 | まさお #4B33lOYw | [edit]
うまくいってよかったです。

これからもぜひお立ち寄りくださいね~
【2011/11/17 21:54】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。