最近HTML5の記事を書いていたので、今回はCSS3について。CSSってなに?というかたはコチラの記事を読んでみてください。
Webデザイナーの方はCSSの新しい仕様のCSS3について勉強されている人も多いのではないでしょうか。今回は、CSS3のチュートリアルサイトをご紹介します。海外のサイトですが、どれも丁寧に説明されていて、さらにソースもあるので一読の価値あり!だと思います。
CSS3を使ってボタン装飾をする
ソーシャルボタン
![グラフィック・Webデザイナーのネタ | SOHO-College-css3](https://stat.ameba.jp/user_images/20111013/13/soho-college/60/97/j/o0450033611544271232.jpg?caw=800)
ソースファイルもダウンロード可能。勉強になります。
デモサイトはコチラ
カラフルな丸みのあるボタンをCSS3で
![グラフィック・Webデザイナーのネタ | SOHO-College-css3](https://stat.ameba.jp/user_images/20111013/13/soho-college/c7/63/j/o0450017111544278921.jpg?caw=800)
SS3のボタンソース。いろいろなカラーが選べるのが便利。
アップル風のCSS3ボタン
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_3](https://stat.ameba.jp/user_images/20111013/14/soho-college/5c/8b/j/o0450026911544285643.jpg?caw=800)
デモサイトはコチラ
CSS3を使ってシャドウを作る方法
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_4](https://stat.ameba.jp/user_images/20111013/14/soho-college/3b/0b/j/o0450020911544285642.jpg?caw=800)
デモサイトはコチラ
CSS3を使ったドロップダウンナビゲーションメニュー
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_5](https://stat.ameba.jp/user_images/20111013/14/soho-college/76/5a/j/o0450023211544285641.jpg?caw=800)
デモサイトはコチラ
シンプルでキレイなボタン
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_8](https://stat.ameba.jp/user_images/20111013/14/soho-college/88/c2/j/o0450027811544285116.jpg?caw=800)
デモサイトはコチラ
CSS3ポートフォリオにも使えそう
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_7](https://stat.ameba.jp/user_images/20111013/14/soho-college/4c/53/j/o0450032811544285115.jpg?caw=800)
デモサイトはコチラ
CSS3とjQueryでプルダウンメニュー
![グラフィック・Webデザイナーのネタ | SOHO-College-css3_6](https://stat.ameba.jp/user_images/20111013/14/soho-college/71/83/j/o0450029511544285114.jpg?caw=800)
デモサイトはコチラ
まとめ
いままでは全て画像として切り出したり、フラッシュをつかったり、Javascriptを使っていた部分が、HTML5&CSS3で可能性がひろがりました。あとは自分次第…ですね。私も勉強中です…。同じ勉強中の方のお役にたつとうれしいです!