[B! CSS3] fumikopeのブックマーク

[CSS]画像に美しい角丸とボックスシャドウを適用する方法

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。それを下記のように美しく適用されるようにします。角丸とボックスシャドウをこういう風にしたい左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

fumikope 2010/09/26

リンク

https://quarter4.info/create/design-spice-with-css-trick.html

fumikope 2010/08/20

リンク

[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック

CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。リスト要素で配置した下記のデモを見てください。背景色を奇数番目はブルーに、更に5番目はレッドにしています。