[WEB DESIGN] “Add to Cart” Button Showcase – “カートに追加する”ボタンのショーケース
ECサイトでは必須の“カートに追加する”ボタンばかりを集めた記事。こうして見ると様々な形＆色のボタンがあります。多くのデザイン例に共通して言えるのは、やはりボタンを目立たせる工夫。商品買ってもらうために、このボタンにはサイト内においてアクセントとなる色を割り当てているのが分かります。人の目を引く黄色や黄緑などが多い印象。ECサイト制作時の参考に。
Tag Archives: CSS
[CSS] TEXT ROTATION WITH CSS – CSSを使ったテキスト回転
なんだか今日は地味だけど実用的なエントリが多いなぁ。CSSを使ったテキストロテーション（回転）の方法についての記事。“2009”の部分が反時計回りに90度回転してます。“-webkit-transform: rotate(-90deg);”という記述でこれができるそうです（対Safariの部分を引用）。こんなの初めて見た。IEでも表示できるようなので、汎用性も高そうです。日付表示以外にも色々と応用ができそう。
[JAVASCRIPT] Reinventing a Drop Down with CSS and jQuery – CSSとjQueryを使ったドロップダウンメニュー
CSSとjQueryを使って装飾するドロップダウンメニュー。フェードやスライドなどの動きは特にありませんが、通常装飾しづらいパーツであるドロップダウンメニューをデザインしています。画像は使われてないようなので、CSSのプロパティーさえイジくれば配色は好きに変更できそう。地味になりがちなフォームページに一工夫したい時に是非ひとつ。
[CSS] Date Display Technique with Sprites – CSSスプライトを使っての日付表示
CSSスプライトを使った日付表示のテクニックが紹介されています。といっても特殊な事は特にしていません。日付に画像を使うんであれば、まとめて1枚の画像にしちゃった方が作るのラクチンだしロードも早いYO！という内容。ナビゲーションボタンの類だけじゃなく、色々と応用ができそうです。ブログやホワッツニューの日付表示などに向いてますね。
[CSS] 5 Ways to Spice up Your Images with CSS – イメージをかっこよく見せるCSS Tips
サイト内でイメージをかっこよく見せるCSS Tipsが5例紹介されてます。基本的に「CSS記述をした上で、後はイメージにclass指定すればこうなるから便利だYO！」というものなので、1度作ってしまえば生産性は高いです。ブログ内のサムネール表示なんかに最適かも。ドロップシャドウや2重のボーダー、フレーム、ウォータマーク（透かし）の付与、インフォメーション表示の方法が紹介されてます。画像やCSSでの色指定さえ変えれば色々と応用が利くので、生産性も汎用性も高いナイスなTips。
[IPHONE] CSSiPhone – iPhone向けにデザインされたサイトのギャラリー
iPhone用にデザインされたウェブサイトのギャラリー。いわゆるCSSギャラリーのiPhone版といった感じ。iPhoneの解像度で表現できる事って、PC向けサイトと比べると当然幅が狭くはなるんだけど、それでもどのサイトもよくデザインされていますね。iPhone用サイトを作る際の参考になりそうです。このブログはiPhoneで見ると専用CSSに切り替わるようになってるんだけど、WPtouchっていうWP用プラグインで一発対応してるだけなので、その内専用CSS自作したいなぁとか思ってます。
[WEB DESIGN] 36 Clean Comment Form designs – クールなコメントフォーム
クールにデザインされたブログのコメントフォームが36例紹介されてます。恥ずかしながら、わたくしフォームをちゃんとデザインするってのを覚えたのがつい最近でして、1度やっちゃうと「あーこうやってんのね」みたいな感じで色々と気づく点が多いですな。ブログのコメント欄だけでなく、あらゆるテキストエリアに応用が利くので、フォームをデザインする時のネタ帳に是非。
[CSS] 50 New CSS Techniques For Your Next Web Design – 次のウェブデザインのための新しいCSS Tips
ウェブデザインを次の段階に押し上げる、新しいCSSテクニックが50例まとめられた記事。これなかなか読み応えあります。量もさることながら、新しいCSS 3関連のテクニックも多く紹介されているので、「CSS 3に関してはこれから」という人にちょうどイイ感じ。アルファを使った汎用的なボタンデザイン（こちら）とかアツい。汎用的って点がイイなぁ。とは言っても、まだCSS 3を使えるブラウザ利用率が低いので、実用的となる時期はもうちょい先のような気がします。