innstory

CSS3 box-shadow

Temperature: 0 °C

2017-07-30Chung

便利貼~俗稱小黃(對我來說)，依據wiki的說法~是3M公司的工程師史賓塞·席佛經過5年後出現成果。

那麼若把他實用在網頁上使用?


以下使用CSS3 box shadow 的效果設計一張便利貼~

/*開始設計便利貼實際尺寸及顏色*/

#box

{

position: relative;

width: 400px;

height: 300px;

background: #fff5b0;

border: 1px solid rgba(236, 221, 136, 0.9);

-moz-border-radius: 4px;

border-radius: 4px;

padding: 2em 1.5em;

color: rgba(36,63,84, 1);

text-shadow: 0 1px 0 #efefef;

line-height: 1.5;

margin: 60px auto;

}



/*這裡開始設計便利貼貼上的陰影效果*/

#box:before, #box:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: rgba(0, 0, 0, .6);

-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .6);

-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .6);

box-shadow: 0 15px 10px rgba(0, 0, 0, .6);

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}



#box:after

{

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}

台北市內湖區江南街71巷75弄 Go