CSS3のボックスシャドウ(box-shadow)をコピペでどーぞ。

公開日: : 最終更新日:2013/01/30 css ,

css3 box shadow

ボックスシャドウってどんなの??
ボックスシャドウ
は名前のままです。。ボックスに影付けをします。

今までは画像を使って影付けなどをしてたと思いますが、CSS3を使えば、かんたんにちょっとリッチな効果が出せますよー。

対応しているブラウザ:Safari、Firefox、Google Chrome

Firefox:-moz-box-shadow
Safari、Chrome:-webkit-box-shadow

例:-moz-box-shadow:横方向のずれ 下方向のずれ ぼかし具合 陰の色;
例:text-shadow: 1px 1px 1px #000;
(サンプルのボックスシャドウ2を参照)

基本はテキストシャドウと同じ
同じように,(カンマ)で区切れば追加できる
ボックスシャドウ6を参照
追加シャドウは一番下の階層となる。

ボックスシャドウ1

ボックスシャドウ1(class=”shbox1″)
これはボックスシャドウを施していません。
通常テキストを表示しています。
.shbox1 {}

ボックスシャドウ2

ボックスシャドウ2(class=”shbox2″)
.shbox2 {
-moz-box-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 1px 1px 1px #000;}

ボックスシャドウ3

ボックスシャドウ3(class=”shbox3″)
.shbox3 {
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;}

ボックスシャドウ4

ボックスシャドウ4(class=”shbox4″)
.shbox4 {
-moz-box-shadow: 10px 10px 1px #F00;
-webkit-box-shadow: 10px 10px 1px #F00;}

ボックスシャドウ5

ボックスシャドウ5(class=”shbox5″)
.shbox5 {
-moz-box-shadow: 10px 10px 0px #F00,-10px -10px 0px #393;
-webkit-box-shadow: 10px 10px 0px #F00,-10px -10px 0px #393;}

ボックスシャドウ6

ボックスシャドウ6(class=”shbox6″)
.shbox6 {
-moz-box-shadow: 1px 1px 0px #ff0,2px 2px 0px #00f,3px 3px 0px #ff0,4px 4px 0px #00f;
-webkit-box-shadow: 1px 1px 0px #ff0,2px 2px 0px #00f,3px 3px 0px #ff0,4px 4px 0px #00f;}

ボックスシャドウ7

ボックスシャドウ7(class=”shbox7″)
.shbox7 {
-moz-box-shadow: 5px 5px 100px #F00;
-webkit-box-shadow: 5px 5px 100px #F00;}

ボックスシャドウ8

ボックスシャドウ8(class=”shbox8″)
.shbox8 {
-moz-box-shadow: 0 -1px 1px #FFF,-1px 0 1px #FFF,1px 0 1px #FFF,0 1px 1px #FFF,1px 1px 1px #000,2px 2px 2px #000,3px 3px 3px #000;
-webkit-box-shadow: 0 -1px 1px #FFF,-1px 0 1px #FFF,1px 0 1px #FFF,0 1px 1px #FFF,1px 1px 1px #000,2px 2px 2px #000,3px 3px 3px #000;
font-weight: bold;
color: #000;}

ボックスシャドウ9

ボックスシャドウ9(class=”shbox9″)
.shbox9 {
-moz-box-shadow: 1px 1px 0px #000;color: #FFF;
-webkit-box-shadow: 1px 1px 0px #000;color: #FFF;
background: -moz-linear-gradient(top, #036, #65AACE);
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#65AACE));}

ボックスシャドウ10

ボックスシャドウ10(class=”shbox10″)
.shbox10 {
-moz-box-shadow: 0px 0px 5px #ff0;color: #FFF;
-webkit-box-shadow: 0px 0px 5px #ff0;color: #FFF;
background: -moz-linear-gradient(top, #036, #65AACE);
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#65AACE));}

AD

関連記事

css3

CSSでグラデーションをコピペでどーぞ。

背景に画像を使ってる人必見! もう、画像を使わなくてもCSS3でグラデーションが表現できちゃいます

記事を読む

css3

CSS3のトランジション(transition)をコピペでどーぞ。

transition効果で時間差表現 使えるブラウザがまだ少ないけど、transitionプロパテ

記事を読む

css3

CSS3のテキストシャドウ(text-shadow)をコピペでどーぞ。

css3 テキストシャドウ(text-shadow)? CSS3のテキストシャドウ(text-sh

記事を読む

css3

CSS3の角丸(border-radius)をコピペでどーぞ。

角丸 ちょっとCSS3でborder-radius書くだけで、かんたんに角丸が出来る。 対応して

記事を読む

no image

ul、ol要素の左余白を調整する

リスト作成の際によく使われる<ul>、<ol>をブラウザが違っても同じように表示するCSSの設定。

記事を読む

no image

基本のCSS 〜背景関連〜

先ほどのメモに引き続きcss背景関連のメモです。 背景を固定する <style typ

記事を読む

no image

背景画像を画面中央に表示する方法

背景全体へ画像の中心を表示する方法は以下のようにスタイルシートで記述する。 基本的な技術だけど、忘

記事を読む

no image

htmlとcssでこれは凄い!

こいつは凄いです。 絵の上にマウスを乗せると立体的に見える! しかも、flash、javas

記事を読む

no image

最近の日常。。

11月14日より、更新がぴたっと止まってしまった。 とりあえず、今日からまた再スタート! 1

記事を読む

AD

Comment

  1. [...] http://blog.enjoylink.com/css/css3-boxshadow.html カテゴリー: 未分類   パーマリンク ← CSS3 マルチカラム [...]

  2. [...] http://blog.enjoylink.com/css/css3-boxshadow.html CSS3:ボックスシャドウ:ZAWABLOG様 カテゴリー: 制作メモ   タグ: css   作成者: yuz40hachimitsu18   この投稿のパーマリンク [...]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

AD

Coat & Ciel Isar Rucksack
coat & ciel(コートエシエル)のリュック買ったった!

いろいろ便利なEvernote。 Evernoteのステッカー欲

3_bmizer_lite_results_hand_2x
BMI系のアプリのデザインを集めてみた。

最近、職場の仲間でダイエット部というグループを作り33歳にして真面目に

a1130_000536
4月なのでいろいろやるぞー!

少し前に、twitter経由で「titleタグが入ってないですよ」とあ

wimax001
WiMAXがお家にやってきた。イェイイェイ!

家のネット環境を光からWiMAXにかえましたー。 上記の通り、家のネ

brafleicon
楽しむ脳トレアプリ!シンプルで大人から子供まで気軽にみんなで楽しく脳内活性化-ブレインフラット-

楽しむ脳トレアプリ! シンプルで気軽に、手軽に楽しんで脳トレ

→もっと見る

PAGE TOP ↑