[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
「jquery roundcorners canvas」 と 「jquery curvycorners」 の 設置説明 | 頭脳外部メモリー 「独学で趣味を満喫」
・・・なぜか最近 jquery にはまっているようだ？？ まぁ～それは置いといて、 角丸を作成できる jquery プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。 早速、どちらが良いか試してみた所・・・・う～～～ん、一長一短？2種を比較した感想 jquery.curvycorners は、「角丸が綺麗」 「角丸の角度が選べる」 「ボーダーも付けれる」 「ちょっと重い」 「ブラウザによって表示が違う時がある？設定のせいかも・・・」 jquery-roundcorners-canvas は、「角丸がちょっと荒い」 「角の種類がいっぱいある」 「軽い」 と、行った所でしょうか？・・・結局、選んだのは jquery-roundcorners-canvas 理由は、こちらの方が軽かったのとIE ＆ Firefox での表示が同じだったからです・
WEBFACTORY ::: BLOG: 角の丸いボックス
2004年12月24日 角の丸いボックス よくあるネタですが、自分なりにCSSでの角丸ボックスを作ってみた。DIVタグを３つも使用しているので抵抗ある人は多いかも知れませんが、枠を作って「この中にはなんでも放り込める」という状態を作りたかったのでこういう形になってしまった。一応クリスマスイブということで丸各画像を含めたファイルセットをダウンロードできるようにしています。 大雑把に分けると「round-top」と「round-body」と「round-bottom」の３つ。「round-top」と「round-bottom」の間には空の「span」タグを挿入してます。 で....この「span」に高さを設定してブロック要素に変えてます。真中の「round-body」には背景色を指定して余白を左右丸角の高さ分（ここでは10px）取っています。 ★HTML<div class="round-t
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
角丸 背景を文字数に関わらず表示させる。｜CSS HappyLife
CSSによる角丸テクニックはイッパイみかけるけど、ドレも可変なんすよ。 個人的には、可変より固定の方が好きだったり、実業務で可変レイアウトの角丸を作る事ってのは殆ど無かったりします。 ゆえに、実践で必要なのはウィンドウサイズによって可変する角丸より、固定幅で縦だけ伸びれば十分だったりします。 無駄なdivとか減らせますしね。 まぁユーザビリティ関係の本を読んでれば、可変レイアウトの方が良いと書かれておりますが、ソコは今回は気にしない方向で行くとして、取りあえずサンプル。 サンプル：http://css-happylife.com/template/05/ ダウンロード：http://css-happylife.com/template/05/05.zip サンプルを見ていただいたトコロで実際の方法をば。 今回のサンプルは、角丸＋文字数が少ない場合でも一定の高さの背景は表示させるって方法と併
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
透過背景の角丸ブロックを作成するＣＳＳサンプル:phpspot開発日誌
jmblog.jp - 角丸にチャレンジ - 透過PNG画像＋CSS編