[GRID LAYOUT] A Brief Look at Grid-Based Layouts in Web Design – グリッドレイアウトの作例とツール
ウェブにおけるグリッドレイアウトのためのツールと、クールな作例の紹介記事。紹介されている作例がなかなか素晴らしく、「あーこのレイアウトもグリッドレイアウトされてるんだ」とか思いながら読んでました。ちなみに記事内で紹介されている960GridSystemですが、自分もよく使います。同梱のPSDファイルがなかなか秀逸です。
Tag Archives: CSS
[CSS3] 10 Examples Of Futuristic CSS3 Techniques – CSS3を使ったクールな表現
CSS3を使ったクールなテクニックをまとめた記事。グラデーションを使ったボックス表現、RGBAを使った汎用的なボタン、ロテーションやボックス要素へのドロップシャドウを使ったフォトフレーム、CSS3で装飾するウェブフォームやドロップダウンメニュー、テキストを活かしたタイポグラフィーなどが紹介されてます。実際テキストシャドウはすでに多く使われてるし、CSS3も実用段階に入りつつあるんだな、とか思います。
[WEB SERVICE] 40 Powerful CSS Tools And Generators To Automate Your Workflow – オンラインCSSジェネレーターまとめ
CSSを生成できるオンラインツールのまとめ記事。どんなものがあるかというと、レイアウト、フォント関係、コード圧縮、バリデーション、ブラウザごとの確認、グリッドレイアウトのためのジェネレーター、メニュービルダー、フォーム装飾、丸角ジェネレーター、段組レイアウト、CSS Spriteコード生成、カラーパレット、EmやPxなどの単位変換などがその内容。面倒な部分はこうしたオンラインツールに頼るってのも、ひとつの手ですね。フォント関係とか結構重宝します。
40 Powerful CSS Tools And Generators To Automate Your Workflow
[CSS] 47 CSS Tips & Tricks To Take Your Site To The Next Level – CSSに関するトリックやTipsまとめ
CSSに関するトリックやTipsをまとめた記事。もちろん時期的にCSS3に関する内容も含まれます。縦方向のセンタリング、ショートハンド記述、角丸、IEハック、ベースフォントサイズの指定、縦方向100％、リンククリック時の点線の消去、CSSリセット、透明化、ClassとIDの優劣、テキストのイメージ置換、印刷時のページ切り替えなどがその内容の一部。CSSを使ったウェブ制作が当たり前になってきた今、ちょっと突っ込んだコーディングができると現場で重宝されそうです。
[CSS3] 15 CSS3 Navigation and Menu Tutorials and Techniques – CSS3を使ったナビゲーション表現
CSS3を使って表現する、ちょっと進んだナビゲーションメニューのまとめ記事。動きを使って表現するもの、丸角やグラデーションを使って画像なしで作ったもの、ドロップダウン、奥行きを持たせたメニュー表現などがあります。こうして見ると、CSS3を使う事で今まで表現するのが難しかった事がわりと簡単にできるようになるので、今後凝ったナビゲーションとか色々出てきそうです。
[CSS3] Opera Logo with CSS – CSS3で描くOperaロゴ
CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ
[CSS3] Create Social Media Icons in Pure CSS – CSS記述だけで作るソーシャルメディアアイコン
CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。
[CSS3] 30 Examples Of CSS Text Shadows Out In The Wild – テキストシャドウの美しいサイトまとめ
CSS3のtext-shadowプロパティを使って美しくデザインされたサイトのまとめ記事。Safariではかなり以前のバージョンからすでに実装されていたので、CSS3の新しい機能の中ではわりとおなじみの機能ですね。このプロパティを使えば、ドロップシャドウの他にもエンボスっぽい演出もできるので、画像に頼る機会が減りそうです。MetalabとかMark Jardineあたり特に好き。