自分用メモ。CSS3の各ブラウザ対応状況と、ベンダープレフィックスが必要なケース。
CATEGORY CSS
ノーマライズCSSという名の、各要素のマージン・パディング・フォントサイズを復活させる指定
サイト構築の際、各要素のマージンやパディングを打ち消す、いわゆる『リセットCSS』を準備するケースが多いです。 しかしながら、ブラウザが本来持っている良いスタイルまで消すのはどうだろうか、と言うことで、近年『ノーマライズ…
CSS3だけで描かれたApple純正キーボード
おもしろいものを見つけたのでメモ。CSS3だけで描かれたApple純正キーボードです。
CSS3で描かれたiPhoneとかドラえもんとか13個
ブラウザ(特にSafariとChrome)のCSS3サポートがかなり良いです。 CSS3だけで描かれたドラえもんが話題になりましたが、その他にCSS3で描かれたものをご紹介。
dl要素でテーブルのような見た目を表現する
dl要素(定義リスト)は語句・内容と対応するため、色々な場面で応用できます。新着情報とか、フォームとか。 このdl要素をテーブルの見た目のように扱うCSSです。サンプルファイルも用意しています。
CSSのopacityプロパティで簡単に画像をロールオーバー
ロールオーバーの手法は様々ありますが、画像1つで実現できるロールオーバー。細かい挙動は出来ませんが、軽く視覚変化を起こしたいときに有効です。
複数行で、文字の空白と先頭を揃える
どういう事かというと、下記のようなレイアウトの場合。
メニューリストを横並びさせてボーダーで区切る
リスト要素をfloatで横並びにした際、「|」などで区切るケースも多いと思います。ただし、テキストで|を入れてしまうと、装飾のための文字としての扱いのため、なんとなく気持ち悪い感じ。こんな時はborderプロパティを使用…
CSSプロパティの役割一覧
CSSのプロパティ、役割一覧。
センタリグデザインの際、ブラウザの幅を変えると1pxずれる
センタリングするデザインで、bodyに敷いた背景とcontainerなどの幅が、IEだと1pxずれて見えるケースがあります。いつも症状が出るわけではなく、ブラウザの幅を変えたときとかによく出ます。