+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< November 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< ホームページ制作に役立ちそうなシルエット素材サイト まとめ | main | 2010年のカラートレンドインフォグラフィック >>
CSS3のおさらいスライドサイト


CSS3の実装させる機能説明がコレまでの方法と比較して解説されているサイトです。
このサイト自体もフルにCSS3の機能を使って制作されていて、スライドを見ているように閲覧することができるようになっています。
こちらがそのサイト。

■CSS3 presentation
http://leaverou.me/ft2010/




操作は十字キーで行います。


前回エントリーしたCSS3のColorについてもふれられているので、見ておいて損は無いと思います。

前回のエントリーはこちら
http://blog.tug.lomo.jp/?eid=990234



これがColorの項目。


解説は英語ですが、核となるCSSのソース部分を見るだけでも勉強になるのでお勧めです。

また、それぞれの機能がどのブラウザーに実装されているのも一緒に見ることができるので、現時点で実用可能なもの、将来的に問題なくしよう出るであろう機能などを精査することもできるので、実際にCSS3を活用する際に参考になります。


このサイトの閲覧はFireFox4 ベータ版で閲覧をもとに作られているようですが、Chromeやsafari、Opera(若干もたつきます)でも問題なく閲覧できました。IEはちょっとあれですが。



たとえば「TEXT Shadow」の項目。


The Old Wayで以前はどういったソースで表現していたかを見ることができます。
この例だと、背景にシャドウ処理した画像を使用し、テキストをインデントで飛ばすという方法。


それがCSS3ではこのように、専用パラメーターにより簡単に実現できるようになります。


ほかにも、グロー表現やアウトライン表現、ぼかし表現なども応用することで簡単に対応できます。


アウトライン表現のサンプル


グロー表現のサンプル


ぼかし表現のサンプル


項目の最後は対応ブラウザの一覧

タダ残念ながらIEはサポートとしてません!!

という具合に見ていけるのでわかりやすいです。実際にCSS3で書かれているので、サンプルとして表示されているものも画像ではなく実際のCSS3表現ですので、より効果を実感できます。
| CSS | 00:28 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - CSS3のおさらいスライドサイト | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990237