要素に影をつけたいときに使う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;}