Hatena Blog Tags
はてなブログ トップ
box-shadow
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

box-shadow

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Bean's blog•4年前

画像に影をつけると縁が白くなる現象【box-shadow】

突然ですが、あなたはこの２枚の画像の違いがわかりますか？ 画像に影をつけたら縁が白くなってしまった この記事では、こんな悩みを解説します。 記事の内容 画像にbox-shadowで影をつける時は、classをimgタグに追加する ポイント 見た目の違い HTML/CSSの違い 見た目の違い ２枚の画像を見比べると、犬の画像の下に白い縁があるのがわかると思います。 わかりやすくする為に、もう少し画像のサイズを小さくしてみます。 サイズ：80% サイズを小さくすると、より違いが浮き彫りになりましたね。 犬の画像は、白い縁の周りに影がついているのに対し 猫の画像は、綺麗に画像の周りだけに影ができてい…

#はてなブログ初心者#HTML/CSS#box-shadow

ネットで話題

もっと見る
708ブックマーク[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめCreating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なる...coliss.com
550ブックマークbox-shadowで表現する、「セミフラット」なズルいデザインテクニックatmarkit.itmedia.co.jp
409ブックマークCSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方coliss.com
331ブックマーク[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニックCSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたよう...coliss.com
271ブックマークCSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper - かちびと.netこの記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 ...kachibito.net
239ブックマークbox-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Companykuroeveryday.blogspot.com
231ブックマークbox-shadowを使って実用的で素敵なUIエレメントを実装するCSSのスニペットのまとめCSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメ...coliss.com
172ブックマーク[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニックcoliss.com
140ブックマークbox-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIAics.media

関連ブログ

Little Strange Software•4年前

【CSS】CSS小ネタ。box-shadowでこんな効果が！

どうも！LSSです！！ なんとなくCSSをいじっていたら、「かなりシンプルな記述で面白い効果」を見つけました！ シンプルなサンプル box-shadowって border-radiusとpaddingを使わないとこんな感じ 見出し装飾や、ちょっとしたポイントに良さそうですね シンプルなサンプル この枠には、border-radius、box-shadow、paddingしか使っていません。box-shadowにinsetをつけて、ぼかしを大きめにとるだけでこんな効果に！お手軽に やわらかく立体感のあるボックスが作れますね^^ コード <div style="border-radius: 15p…

#CSS#box-shadow#inser#立体感