タグ: css

CSS3 アニメーション時のチラツキ問題

Safari(5.1.10) で jQuery plugin bxSlider(v4.1.1) のサムネイルページャーのマウスオーバー時に CSS で透過アニメーションを適用すると、アニメーション完了時にチラツキが発生した。 bxSlider がサムネイルのリストタグに追加する -webkit-transform の translate3d が原因らしく、マウスオーバーの透過アニメーション処理のス…続きを読む

CSS3 を使った鏡面反射効果

CSS3 を使って鏡面反射の効果を付ける方法のメモ。 webkit 系のブラウザでは -webkit-box-reflect を使って簡単に効果を付けることができるが、Firefox4 や 5 などでは疑似要素とマスク用svgを使って少し手間をかけないとできない。 CSS3 を使った鏡面反射効果 サンプル css コード Firefox では、疑似要素 after を使って鏡面反射用要素を作り、m…続きを読む

CSS の box-shadow を使った画像輪郭のぼかし

『[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル | コリス』の記事を読んで、画像のボーダーの代りにボックスのドロップシャドウを内側に向けて適用すれば画像の輪郭をぼかすことができるのではと思い試してみた。 上記記事での CSS で outline の部分を box-shadow に変更し、影を内側に向けるために inset を指定する。 また、影の色を背景色と同じものにして…続きを読む

CSS3 グラデーション (gradient)

CSS3 を使ったグラデーション指定方法のメモ。 background-image: -moz-linear-gradient( top, rgb(200, 250, 150) 0%, rgb(180, 230, 130) 30%, rgb(160, 210, 110) 70%, rgb(140, 190, 90) 100% ); background-image: -webkit-gradien…続きを読む

float:left; で作ったカラム内で float を使う

CSS のプロパティ float を使って2カラムレイアウトのページを作り、そのカラム内でさらに float を使って回り込みを行い clear で float の解除を行うと2カラムレイアウトの float も解除されてしまう。 そこで、display:table; を使い clear を使わずにカラム内の float の効く範囲を限定させて clear を使わずに float の解除と同様の効…続きを読む

CSS の inline-block を使って、リストの要素を1列に表示させる

CSS の display プロパティの値の inline-block を使って、リストの要素を1列に表示させてみる。 float を使う場合と違って親要素のブロック内に収まるので、親要素の高さが子要素の高さに対応したり、センタリングも容易にできる。 IE6 と IE7 に対応させるために CSS ハックを使って、子要素の display プロパティを inline にして !important …続きを読む

CSS media query によるスタイル切り替え

CSS3 では media query に画面の幅などのプロパティを指定することにより、適用するスタイルシートを切り替えることができるらしい。 画面の幅のプロパティの場合、Firefox 3.5、Opera 9.64、Safari 4.0.1、Google Chrome 2.0.172.33 で動作することが確認できた。IE6,7,8 はダメ。 デモ:CSS media query によるスタイル…続きを読む

Firefox3.5 で CSS text-shadow を利用する

Firefox3.5 で取り込まれた text-shadow を使ってみる。 text-shadow は "テキストそのもの" と "text-decoration" に対して効果が適用される。 書き方 "影の色"、"水平方向の移動距離"、"垂直方向の移動距離"、"ぼかしの強さ"…続きを読む

CSS で z-index と背景画像を使った Rollover(ロールオーバー)画像置換

JavaScript を使わずに CSS のみで z-index と 背景画像を使って Rollover(ロールオーバー)画像置換を行うメモ。 text-indent を使ってテキストを不可視領域に移動させて画像置換(Image Replacement)を行うと、画像非表示で CSS 有効の場合に何も表示されない問題があるので、z-index を使って画像置換を行ってみた。 次のスクリーンショット…続きを読む