タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

CSStipsとCSS3に関するkiyokichiのブックマーク (2)

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

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

    kiyokichi
    kiyokichi 2012/05/11
    Fxの場合、imgに直接border-radiusを設定しても角丸にならないのでimgをspanで囲み、spanにborder-radiusを設定すればおk。内側シャドウ(box-shadow)も同じ。
  • [CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス

    「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像

    kiyokichi
    kiyokichi 2008/06/12
     すごいけどCSS3から(´・ω・`)
  • 1