Loading...

CSS3 box-shadow

Temperature: 0 °C

ChungChung
author_tools

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

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

CSS3 box-shadow
以下使用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

https://innstory.com/story-CSS3_boxshadow-1286
寫程式筆記

Prev
 進階版章節功能

Next
5U日常我突然覺得那蛋捲盒子有點可憐 

Nearby Attractions

台北市內湖區江南街71巷75弄-Nearby Attractions

  • 急公好義坊 Go
  • 總督府農業試驗所昆蟲部 Go
  • 張?故居 Go
  • 陽明山中山樓 Go
  • 紀州庵 Go
  • 婦聯總會 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

CSS透明度

CSS透明度

CSS 透明度的實作, 各種瀏覽器和標準如下:(數字越小越透明) 標準: opacity:~ (Fi...

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

Responsive Web...

智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。 所以現在,在開發系統時客戶都會詢問是否支...

Mysql查詢特定欄位相乘總合

Mysql查詢特定欄位相乘總...

最近常常會用到的查詢方式... 問題是這樣的,我有一個資料表內容結構如下: +++++ | id |...

Recommended reading

Other stories happened at this address

好吧~原來貼紙是這樣玩的...看來還不夠他貼啊~

好吧~原來貼紙是這樣玩的.....

好吧~原來貼紙是這樣玩的...看來還不夠他貼啊~

沒有菸抽的日子

沒有菸抽的日子

老婆臨盆在即,但確不知道是何時。 兒子感冒,沒了精神沒了食慾。 手邊的專案號要交測試連結。 之前還有...

啟動休假模式

啟動休假模式

s 其實打從月日開始,就一直是呈現休假狀態~( ̄∇ ̄) 只是今天下午還是很認份的去客戶那邊做完教育訓...

一聽到要帶他出門,馬上給了我一個笑得開懷的笑容~

一聽到要帶他出門,馬上給了我...

一聽到要帶他出門,馬上整裝完畢( ̄∇ ̄) 堅持穿上自己選擇的鞋子,還要自己穿。 堅持背上背包。 堅持...

媽媽。。。。美麗

媽媽。。。。美麗

我想記住我在兒子心目中美麗的模樣,而發出的童言贊賞,所以難得的寫下這篇文章作爲記憶。 某天上班天的早...

PDO連接Mysql方式 MVC上應用

PDO連接Mysql方式 M...

pexelsphoto 將連結資料庫的方式加入model function connect() { ...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format