Top

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--/--/-- --:--スポンサー広告 | Trackback(-) | コメント(-)
はてなブックマーク - スポンサーサイト

CSS3とJavaScriptを使った素晴らしいテクニック 50+

css3-new-03

Smashing Magazineに50 Brilliant CSS3/JavaScript Coding Techniquesとして
50個のCSS3/JavaScriptを使ったテクニックが紹介されています。



Visual Effects and Layout Techniques With CSS3


css-132

>>CSS3 Analogue Clock

なかなか有名なテクニックかも知れません。
Google ChromeとSafariで動きます。



css3-new-00

>>dynamic PNG shadow position & opacity

個人的に気に入ってしまったテクニック。
影が電球とロゴの配置で変わります。



Navigation Menus With CSS 3


sweet-tabs

>>Sweet AJAX Tabs With jQuery 1.4 & CSS3

text-shadowなどを使ったタブメニューです。



css3-last-05

>>Halftone Navigation Menu With jQuery & CSS3

マウスを乗せると横のドットの形が変わります。



CSS 3 Transitions and Animations


css3-last-12

>>Sliding Vinyl with CSS3

Google ChromeとSafariで動きます。



css3-last-171

>>Fun with CSS3 and mootools

CSS3を使ったアニメーションです。
スムーズでなかなか面白い動きをします。



Gradients, RGBA and HSL with CSS 3


css-164

>>No Image Aqua Button

CSS3のグラデーションを使ったAquaボタン。
こちらはSafariオンリーです。



css-100

>>Super Awesome Buttons with CSS3 and RGBA

こちらもグラデーションを使ったボタン。



Using the Shadow-Property in CSS3


css-096

>>Create a Letterpress Effect with CSS Text-Shadow

CSS3のtext-shadowを使ったレタープレス風文字です。
画像を使わなくとも表示できて便利ですね。




Learning New CSS3 Selectors


css3-new-01

>>CSS3 + Progressive Enhancement = Smart Design

CSS3の新しいセレクタの解説です。



CSS3 Galleries


css-155

>>An Awesome CSS3 Lightbox Gallery With jQuery

CSS3を使ったギャラリーです。



Replacing CSS Hacks with CSS 3


css3-last-03

>>curved-corner - Project Hosting on Google Code

IEでもCSS3の角丸を適用させるハックです。



General articles about CSS 3


css-013

>>WelcomeToTheSky

Safari、FireFox3.5で動作します。



随分と、CSS3のテクニックが広がってきましたが
「こんなことができる!」だけでなく、ブラウザ側でも正しく動かせるようにして欲しいですね。
とくにIEとか。

50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazine
2010/02/09 23:11CSS | Trackback(0) | Comment(0)
はてなブックマーク - CSS3とJavaScriptを使った素晴らしいテクニック 50+
コメントの投稿















管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL