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

HTML5 影音手持裝置適應不良篇

HTML5 影音手持裝置適應...

這天下午跟客戶開完會... 客戶針對專案中手持裝置網站適應性做了需調整的說明..另外還包括影音檔播放...

PHP如何將陣列組合接成字串

PHP如何將陣列組合接成字串...

$arr = array(&#;hello&#;,&#;word&#;); echo implode...

分享 (励志短片) 王德顺 《最炫东北人》 完整版 Wang Deshun - Coolest Northeasterner (Inspirational Short Film)

分享 (励志短片) 王德顺 ...

我們都還年輕啊~ 還是可以一直做夢下去的。 只要有夢,我將可以走的更遠。 我是chung 主業做夢,...

Recommended reading

Other stories happened at this address

如何用javascript接收radio button被選取後的值

如何用javascript接...

剛剛竟然犯了最簡單的錯誤~ 而且還是在趕著時間的時候⊙⊙ 我竟然蠢到用接收input 的方式去接收 ...

獨自一個人的2個星期,第2晚,手機上傳來兒子的新把戲。

獨自一個人的2個星期,第2晚...

一早醒來,發現床原來是這麼的大,而且我還睡在Mandy的位子上。 想想以往我都是睡在床邊上,現在床變...

九宮格介紹

九宮格介紹

相簿 紀錄故事所上傳的所有影像,以故事名稱作為相冊,依據年月在相簿裡呈現。 行事曆 紀錄已發佈故事,...

獨自一個人的2個星期,最後幾個小時。

獨自一個人的2個星期,最後幾...

s 終於,獨自一個人的時間~只剩下最後幾個小時.....。 而本該要趕工的案子也差不多完成收尾~在號...

人生第一次拿到會飛的氣球,這傢伙開心到不行啊~

人生第一次拿到會飛的氣球,這...

人生第一次拿到會飛的氣球,這傢伙開心到不行啊~

惱人的厭奶期

惱人的厭奶期

第天,以前安份努力的喝奶,每次餵他都超有成就感的,不誇張,每每我都期待著他打破奧運紀錄。 到現在每次...

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