IDEA * IDEAドットインストール代表のライフハックブログ
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
)
CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌
CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。 関連エントリ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル CSS3で実装され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
