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

目次

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

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

Opera

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

Internet Explorer

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

HTML5

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

twitter

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

Social media

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

iPhone

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

ドラえもん

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

マリオ

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

アンパンマン

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