タグ

Chromeとcss3に関するsometkのブックマーク (3)

  • CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法

    現在、CSSを使って、丸い要素を用意しその中に正方形の画像を配置し、その画像をhoverで拡大させるというWEBデザインを実装しようとしています。 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 上記のサイトの1つ目のZoom-Inを使って実装しようとしたのですが、 FireFoxとInternetExplorerで表示した場合 うまくズームできています。 Chromeで表示した場合 hoverの動作中にimgの画像が前面に出てきてしまっています。一時的にoverflowを無視するような形になっているのでしょうか。 z-indexを指定するなどしてみたのですが、うまくいきませんでした。 どのようにすれば、chromeでも正常に動くのでしょうか? アドバイスなど頂けると嬉しいです。 よろしくお願いします。 以下、コードです。 html

    CSSによって丸くした要素の中に置いた画像をhoverで拡大させる方法
  • [JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free

    ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3

  • クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント

    IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま

    クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント
  • 1