[HTML5] 10 Cool and Useful HTML 5 Tutorials – 使えるHTML5のチュートリアル
HTML5のテンプレートやクールな作例、Javascriptなどが紹介された記事。HTML5とわりとセットで扱われる事の多い、CSS3ガラみの紹介もあります。PC向けサイトのコーディングではまだそれほど実例は多くありませんが、スマートフォンやiPad対応においてはすでにバリバリ業務レベルとも言えるので、HTML5の記述例参考やコード素体を探す際に使えるまとめ記事。
Tag Archives: CSS3
[CSS3] CSS Box Shadow & Text Shadow Experiments – CSS3のシャドウ表現を活かした作例サイト
CSS3のテキストシャドウやボックスシャドウを使った表現に関しての作例サイト。ページトップの画像が、古いプログレ好きには色々タマりませんな。このサイトで表現されているのは、シャドウを使ったちょっと凝った表現です。ソース見ると分かるんだけど、タイポのレトロな立体表現はブラーのないtext-shadowを複数重ねる事で描画されてます。ページ中部の元素表なんかもなかなかアツいです。動きに関してもCSSを使って行っているようで、なかなか気合いの入ったクールな作例と言えます。ちなみに俺は「Another side of the Moon」の次の「Wish you were here」がフェイバリットアルバムです。Pink Floydオタ的にデザインでグっときました。
[CSS3] CSS3 Button Generator – CSS3でボタンをデザインできるジェネレーター
CSS3でデザインされたボタンのジェネレーター。サイト内で各種数値を入力することで、リアルタイムにボタンデザインとCSSコードが反映されるという仕組み。指定できるのはバックグラウンドカラー（グラデーション）、角丸のボーダー指定、ボタンのドロップシャドウとインナーシャドウ、フォントカラーとテキストシャドウという内容。テキストシャドウは2つを重ねがけできます。ちなみに制作したボタンデザインはシェアする事もでき、他のユーザーの作ったデザインを閲覧する事もできます。CSS3ジェネレーターって色々あるけど、ボタン系のジェネレーターとしてはなかなか多機能で使い勝手もイイです。ちなみに俺の作ったボタンはこれ。こんな感じで決め撃ちで共有することもできます。
[CSS3] CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste – コピペするだけで使える、CSS3を使ったテキストエフェクトまとめ
CSS3を使ったテキストエフェクトの作例多数と、そのソースコードの紹介。どの作例も画像を使ってないので、ソースコードをコピペするだけで使えます。テキストシャドウやグラデーション、ボーダーの角丸、フォントフェイスなどの各種新機能を使った装飾例です。うーんCSS3って便利！ そして汎用的！ かつ美しい！ というわけで、レガシーブラウザ切り捨て上等な案件にはどんどん使っていきたいところですね。
[CSS] 50 New Useful CSS Techniques, Tutorials and Tools – 新しいCSSテクニック50
CSSを使って表現する、新しいテクニック50というまとめ記事。新しいというだけあって、ものによってはCSS3を使った描画も含まれます。記事下部ではCSSジェネレーターなどのオンラインツールも紹介されていて、プロ・アマ問わず役に立ちそうなまとめ記事です。仕事でコーディングしてる人が見ても、「あーこんな事できるのね」的な発見があります。紹介されてる量も多く、なかなかナイスです。
[CSS3] Loading spinner animation using CSS and WebKit – CSS3だけで描画されたローディングスピナー
CSS3だけで描画されたローディングスピナー。ローディングスピナーとはアレです、ロード中のイライラ促進のクルクルマークです。興味深いのは画像を1点も使用していないという点。角丸やドロップシャドウ、フェードなどを全てCSS3で描画しています。つまりコードさえペーストすれば動くという事。素晴らしいですねこれ。Webkit環境で動作するそうなので、iOS向けのコンテンツに使えそうです。ちなみにGecko環境では動きませんでした。
[CSS3] umbrUI CSS3 checkbox – CSS3を使って画像もJSもなしに表現したチェックボックス
画像もJSも使わずに描画された、凝ったデザインのチェックボックス。クリックするごとにオンとオフが切り替わる仕組み。パっと見どう見ても画像なのに使ってないって事は、Canvasで描いてるんでしょうか。ただし現状SafariやChromeなどのWebkit環境では正確にレンダーされるものの、FirefoxやOpera、IEなどでは表示できないそうです。アイコンデータがないためでしょうか。デザイン的にも汎用性という意味でもなかなかアツい手法なので、今後に期待。スイッチというメタファーも秀逸です
[CSS3] Top 10 CSS3 buttons tutorials – CSS3でコーディングされたクールなボタンチュートリアル
RGBAでのアルファを使った指定、テキストシャドウ、グラデーション、角丸といったCSS3固有の機能を使ったボタンデザイン。「画像1枚も使ってない」のを売りにしたものもあり、CSS3を使った表現の幅の広さが分かります。CSS記述もそれほど大変ではなく、1度作ったら簡単なマークアップでサクっと適用できるので、生産性や汎用性も高そうです。