CSS3を使って、画像を使わずに凝ったドロップシャドウを描画するTips。動作デモはこちらから見る事ができます。当然レガシーブラウザはサポート外です。ボックス要素の下端に外側ほど面積の広いシャドウを付ける事で、紙の両端が少し浮いているような印象のシャドウ表現。画像ではよく使われる手法ではあるけど、CSS3でもちょっと手間かければ作れるそうです。興味深いのはボックスの置き方で、z-indexで裏側に回したボックスをロテイトさせ、それにシャドウを付けて表現しています。「なるほどね！」って感じで感心しちゃいました。サムネールなど、量産品の枠表現とかにイイですねこれ。
オンラインCSSジェネレーターのまとめ記事。CSS生成と言っても実際には色々あり、フォント関係、CSSスプライト、サイトマップ生成、グラデーション生成、バリデーション、レイアウト、グリッド生成、CSS圧縮、メニュー生成、角丸ボックス生成など様々な専門分野に、サイトごとに特化した内容になってます。またブラウザごとの対応表なんかもあります。通常こうしたコードは手打ちしますが、面倒なコーディングだけをこうしたオンラインサービスに頼るのもアリっすね。
CSS3で描画する、様々なシェイプのボックスシャドウ。39の作例が作られていて、こちらで一通り確認できます。Chrome Onlyとありますが、見たところSafariでも一通りイケました。モノによってはウマく描画できていなかったりするのかも。ただボックスシャドウを色々描画しているだけでなく、動きやグラデーションなど色々と組み合わせて作例が紹介されているので見応えあります。つーかコードだけで色々できるんスね。
たまに見かける、サイト横からニュっと出てくるボックス要素を、CSSだけで作ったという記事。ただし動きを表現する際にCSS3が使われています。JSなどを別途導入する必要もなく、CSS記述だけで作れるのがナイス。まぁCSS3で表現する以上ブラウザは多少選びますが。コンタクトフォームなんかにイイですねこれ。
CSSを使った新しい表現や、オンラインジェネレーターなどをまとめた記事。CSSがらみで新しいと言うだけあって、CSS3関連の情報やTipsが多いです。記事はCSSテクニック、とCSSツールの2つに分けて紹介されていて、トータルで結構な量の情報が掲載されてます。CSS3で描画されたMac用キーボードとかなかなかアツいです。よく作ったなーこれ。
CSS3を使ったフォーム作例のまとめ記事。作例によってはHTML5も併用されてます。グラデーションや角丸、テキストシャドウやボックスシャドウなどの、CSS3特有の機能を使ってデザインされてます。味気ないデザインになりがちなフォームを、ちょっと手間かけてデザインしたい時にナイスな記事。リンク先ではチュートリアルも掲載されてるようです。
CSS3を使ってデザイン＆コーディングされたボタン作例のまとめ記事。テキストシャドウや角丸、グラデーションなどをコーディングベースで描画されてたりして、リッチというかエクセレントというかそんな感じのWeb用ボタン作例です。画像を使ってるかどうかに関しては作例次第という事でひとつ。作り方のチュートリアルも紹介されてるので、自分でデザインする時の参考にしてもイイっすね。
CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)
HTMLとCSSのコードをコピペするだけで使えるCSS3ボタン。6つのデザインが紹介されてます。どれも画像ファイルを使ってないので、ソースコード貼っ付けるだけで実装できるのが利点。グラデーションとか角丸とかドロップシャドウとか、CSS3の機能を使っているので、IEなどのレガシーブラウザは非対象となります。そういやIE9なんてのも出てましたね。こうしてまた業務が複雑になっていくのね・・・。
