サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
おみそ汁
cssoboegaki.netkatuyou.com
IE6~8ではCSS3セレクタにほとんど対応していません。 そこでIE6~8でCSS3に対応させるjsライブラリをご紹介。 Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8 jQueryやPrototype.jsなどのライブラリと一緒に使用します。 jQueryを使用する場合 <script type="text/javascript" src="jquery.js"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <![endif]--> 使用するライブラリによって使えるセレクタの種類が変わってくるので、その点は注意が必要です。 試しにサンプルデー
画像で表現することが多い影付きボックスを、 CSSで手軽に再現することができます。 .kage_box { background-color:#EFEFEF; -moz-box-shadow: 5px 5px 5px #DDD; /* firefox */ -webkit-box-shadow: 5px 5px 5px #DDD; /* safari、chorme */ width:400px; padding:5px; } ボックスに影が付きます。ボックスに影が付きます。 ボックスに影が付きます。ボックスに影が付きます。 ボックスに影が付きます。ボックスに影が付きます。 ボックスに影が付きます。ボックスに影が付きます。 -moz-box-shadowでFIrefox、 -webkit-box-shadowでSafari、Google Chorme用の記述となり、 横方向のずれ、下方向のず
CSS3のtransformプロパティを使用することで、文字や画像を傾けることができます。 傾きます。傾きます。 .slope1 { -webkit-transform: rotate(-10deg); /* chrome、safari */ -moz-transform: rotate(-10deg); /* firefox */ margin:0px 0px 100px 0px; } 通常の場合 傾きを適用した場合 .slope2 { -webkit-transform: rotate(10deg); /* chrome、safari */ -moz-transform: rotate(10deg); /* firefox */ margin:30px 0px 30px 0px; } -webkit-transformでchrome・safari、-moz-transformでfi
CSSOBOEGAKIはCSSに関する覚書サイトです。 CSSで「これどうやるんだっけ?」といった時にお役に立てれば幸いです。 CSS3で簡単なアニメーションを作成(1) テキストを両揃えにする 拡張子に応じてアイコンを表示する ボックスのサイズ変更を可能にする rgba()でボックスを透過させる 背景画像のサイズを指定する IE6~8でCSS3セレクタに対応 IEでテキスト・ボックスシャドーに対応 IE6~8でCSS3の一部に対応「CSS3PIE」 背景画像を複数指定する。 はみ出したテキストを「…」で省略する 文字・画像にマスクをかける(2) 文字・画像にマスクをかける(1) floatを使わないボックスレイアウト ぶらさげインデントを表現する 紙面のような段組みレイアウトにする ツールチップを表示する 画像を縦に並べた時の隙間を無くする
このページを最初にブックマークしてみませんか?
『CSS OBOEGAKI | CSSに関する覚書サイト』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く