ふくろく　-FUKUROKU writing service-

box-shadowで影をつけるCSSサンプル

CSS NO IMAGE

要素に影をつけたいときに使うbox-shadowの基本的なCSSサンプルメモ。これを使えば立体感が出せるので、ボタンに立体感が出せる。カンマで区切ると重ねることもできるところが素敵。

box-shadow CSSサンプル1

cssコード

#bgc-sample20 { background: repeating-linear-gradient(to right, yellow, yellow 10px, white 10px, white 20px, yellowgreen
        20px, yellowgreen 30px,white 30px,white 40px,orange 40px, orange 50px,white 50px,white 60px);}

box-shadow CSSサンプル2

cssコード

#sadow-sample01{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 0px 5px #253e80; height: 50px;}

box-shadow CSSサンプル3

cssコード

#sadow-sample02{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 0px #253e80; height: 50px;}

box-shadow CSSサンプル4

cssコード

#sadow-sample03{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px 0px #253e80; height: 50px;}

box-shadow CSSサンプル5

cssコード

#sadow-sample05{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px #253e80; height: 50px;}

box-shadow CSSサンプル6

cssコード

#sadow-sample06{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px -5px #253e80; height: 50px;}

box-shadow CSSサンプル7

cssコード

#sadow-sample07{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px 5px #253e80; height: 50px; }

box-shadow CSSサンプル8

cssコード

#sadow-sample08{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px -5px #253e80; height: 50px;}

box-shadow CSSサンプル9

border-radiusを使うと、影も丸くなる。

cssコード

#sadow-sample09{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 0px 5px #253e80; height: 50px; border-radius:
        5px; }

box-shadow CSSサンプル10

cssコード

#sadow-sample10{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 0px -5px #253e80; height: 50px; border-radius:
        5px;}

box-shadow CSSサンプル11

cssコード

 #sadow-sample11{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 0px #253e80; height: 50px; border-radius:
        5px;}

box-shadow CSSサンプル12

cssコード

 #sadow-sample12{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px 0px #253e80; height: 50px; border-radius:
        5px; border-radius: 5px;}

box-shadow CSSサンプル13

cssコード

 #sadow-sample13{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px #253e80; height: 50px; border-radius:
        5px;}

box-shadow CSSサンプル14

cssコード

#sadow-sample14{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px -5px #253e80; height: 50px; border-radius:
        5px;}

box-shadow CSSサンプル15

cssコード

#sadow-sample15{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px 5px #253e80; height: 50px; border-radius:
        5px; }

box-shadow CSSサンプル16

cssコード

#sadow-sample16{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: -5px -5px #253e80; height: 50px; border-radius:
        5px;}

box-shadow CSSサンプル17

重ねてキレイ。

cssコード

 #sadow-sample17{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px #253e8094,10px 10px #253e8094,15px
        15px #253e8094; height: 50px; border-radius: 5px;}

box-shadow CSSサンプル18

cssコード

#sadow-sample18{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px #253e8094,10px 10px #253e8094,15px
        15px #253e8094; height: 50px; }

box-shadow CSSサンプル19

cssコード

#sadow-sample19{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px rgba(188, 143, 143, 0.397);
        width: 50px;height: 50px; border-radius: 25px;}

box-shadow CSSサンプル20

cssコード

#sadow-sample20{ border: 1px #253e80 solid; background-color:#9ed7ef; box-shadow: 5px 5px rgba(188, 143, 143, 0.397);
        width: 120px;height: 50px; border-radius: 25px;}