[CSS] とっても使えるoverflowプロパティ。その使い方色々
この記事なかなかナイスです。CSSのoverflowプロパティの、あまり知られていない便利な使い方について紹介されてます。clearfix代わりに使ったり、リストの最初だけborderを消したり、画像float時のテキストの回り込みや、見出しの食い込みをなくしたりするTipsが紹介されてます。自分の場合最後の見出しの食い込み防止がなかなかホット。コーディングする人なら知っておいて損はない小技が満載です。
Tag Archives: CSS
[CSS] Styling Post Headings That Stick Out – 日付の突き出るブログポストのスタイリング
たまに見る、ブログなどで日付が左側にピョコンと突き出るタイプのブログポストヘッダー。あれをCSSでスタイリングするためのチュートリアルと、いくつかの作例が紹介された記事。ボックスの位置関係やCSS記述など、かなり細かく解説されています。飛び出る日付は、それ単体だけでなく全体のデザイン的にもコツが必要だったり、あと1日に何件も投稿するようなブログには向かなかったりしますが、それらも含めて勉強になりそうな記事。
[TYPOGRAPHY] 14 Best Online Typography Tools for Web Designers – ウェブデザイナーのためのタイポグラフィーツール
ウェブデザイナーのためのタイポグラフィーツールとして機能する、各種ウェブアプリが紹介された記事。その内容はCSSによるフォント指定補助ツール、フォント検索、フォント作成、pxやemの単位変換、フォントテスター、フォントブラウザ、sifr変換ツールといった感じ。リアルタイムにCSS指定後の字面を見る事ができる補助ツールや、単位変換、あとテキストをsifr化してくれるサービスあたり便利そうです。Typetesterは自分も愛用しております。
[WEB DESIGN] 10 Absolute Best Web Design Galleries – ウェブデザインギャラリーまとめ
世の中に山ほどあるデザインギャラリーの中から、ベストな10点を選んだ記事。一時期すごく増えた“CSSなんちゃら”みたいなギャラリーサイトも、最近では減ったのでしょうか。ここで紹介されているギャラリーサイトは、どれもネタ帳としてなかなかホットに機能してくれそうです。ウェブデザインのネタ探しの時に重宝しそうです。
[CSS 3] 11 Classic CSS Techniques Made Simple with CSS3 – CSS3で今までのテクニックをよりシンプルに
今までちょっとしたテクニックを使って記述していたCSSソースが、CSS3を使う事でよりシンプルになるYOというお話。例えば角丸ボックスや、ボックスやテキストへのドロップシャドウ、透明度、バックグラウンドのサイズや複数背景の適用、カラム表現、ボーダー部へのイメージ適用、アニメーションなどの新しい手法が紹介されてます。基本的には「これからは新しい方法の方が楽だYO！」という話なんですが、これって裏を返せばCSS3でできる新しい表現を、古い方法で行うにはどうすればイイかと読む事もできます。古い方法で記述しなきゃならない理由とはつまりIE対策の事なんですが、しょうもないブラウザではあっても実際無視できないですからね。そんな感じでなかなか貴重なTips記事だと思います。
[CSS] 25 Incredibly Useful CSS Tricks You Should Know – 知っておくべき25のCSSトリック
この記事なかなか素晴らしい。知っておくべき25のCSSトリックという内容なんだけど、結構細かいテクニックが満載です。一部を紹介すると、テキストの画像置換、Pタグ内の最初の1文字を大きく表示、縦方向にセンタリング、リンククリック時のボーダーの消し方、ラベルを使ったテーブルレスなフォーム、ベースフォントサイズのコツ、CSS初期化などがあり、初歩的なものからちょっと凝ったTipsまで色々あります。コーディングの仕事をする人にオススメ。
[CSS] How To Create a Pure CSS Polaroid Photo Gallery – CSSだけを使って表現するポラロイド風フォトギャラリー
CSSだけで表現する、ポラロイド写真風のフォトギャラリー。ポラロイド風の枠を付けるところまでは現行のCSSだけでオッケー。その先のドロップシャドウ表現と、散らばった感じに角度を付ける点はCSS 3による新しいプロパティを使っています。傾ける表現がなかなか興味深い。ポイントは“ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);”の部分ですね。元の写真は傾いてないのに、上記指定をする事で角度を付けて見せる事ができます。またz-indexを使って、マウスオーバー時に必ず最前面に来るようにしている点も気が利いています。
[WEB DESIGN] 14 Easy to Implement Drop Down Menu Solutions – ドロップダウンメニューの色々
CSSとJavascriptを使って作るドロップダウンメニュー。14種類が紹介されてて、どれもサクっと導入できるタイプのものだそうです。デザイン的には特にこれといってスゴいものはありませんが、ソースだけ使わせてもらってデザインはこちらで手直しさえすればいいので、素材としてはまぁ悪くないんじゃないかと。ドロップダウンメニューって動きやサブメニューの出方に結構差があるんですよね。14種類あれば目的に合ったものが見つかるかもしれません。