hover デモ .shutter-box–hover Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. .shutter-box–hover.mod–reverse Ut enim ad mi…続きを読む

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

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

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

webkit 系のブラウザで、CSS Animation を利用して、hover 時にハイライトしてからアニメーションでフェードアウトさせる。 デモ（CSS でテーブルの行をハイライトしてからアニメーションで元の色に） .odd { background-color: rgb(230, 230, 240); } .even { background-color: rgb(240, 240, 220…続きを読む

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…続きを読む

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

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

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