Loading...

CSS3 box-shadow

Temperature: 0 °C

ChungChung
便利貼~俗稱小黃(對來說),依據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

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

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性

使用dp.SyntaxHighlighter 程式碼色彩顯示工具,讓紀錄程式心得更有可看性

說好了要在innstory裡寫下故事紀錄... 所以是不是有方便紀錄的工具或方式,就變...

PHP 利用phpmailer 寄信...

PHP 利用phpmailer 寄信...

一般來說其實PHP本身已經提供了Mail()函數可以使用,但由於一些令人不愉快的原因....

Mysql查詢特定欄位相乘總合

Mysql查詢特定欄位相乘總合

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

Recommended reading

Other stories happened at this address

今早我從睡夢中驚醒!!

今早我從睡夢中驚醒!!

s 說真~從睡夢中驚醒的例子太多了,但我從沒遇過今天早上的情形⊙⊙ U最近喜歡吃玉米,...

清炒長年菜佐5U的咿咿呀呀

清炒長年菜佐5U的咿咿呀呀

在台灣,我們客家人一直對長年菜有種特殊的情感。 逢年過節的時候家裡常會煮上鹹菜湯、梅干...

一兩黑殼蝦的功力

一兩黑殼蝦的功力

養魚養了快年~從台東養到台北。 當然,我一直都不是專業的養魚養草達人,對於水族裡的生態...

夜深了,該是吃宵夜的時候了。

夜深了,該是吃宵夜的時候了。

其實自從結婚後,我已經很久沒有吃宵夜的習慣了~ 照顧我同事照顧了一天,好不容易剛剛我同...

剪髮初體驗~

剪髮初體驗~

第天,剪髮初體驗~由阿婆親自操刀。 這傢伙很淡定啊,看來他根本不知道即將要發生什麼事。...

假日就是該吃咖哩麵

假日就是該吃咖哩麵

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