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
  • 福州街11號日式宿舍 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 影音手持裝置適應...

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

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

Responsive Web...

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

CSS Radio Button

CSS Radio Butt...

寫系統的時候三不五時總會用到Radio Button 和 Checkboxes 目前就在寫這個部份@...

Recommended reading

Other stories happened at this address

聽說咬是愛的表現

聽說咬是愛的表現

s 這傢伙趁我不注意,把我的腳咬成這樣(╯з╰) s 結果好像還很委屈的哭泣~⊙⊙ 聽說咬是愛的表現...

5U的第一張塗鴉作品,真是精彩啊~

5U的第一張塗鴉作品,真是精...

U的第一張塗鴉作品,看來正朝著畢卡索之路前進^^ 偏愛重口味顏色,不喜歡被框框侷限。 真的是無敵抽象...

1歲5個月

1歲5個月

s 看著他漸漸長大,其實還真有點忘記算他目前是多大了~ 歲個月,我想,以後躺在我腳上就睡著的時間慢慢...

6個月

6個月

已經個月了,從哇哇墜地到現在~看看U到底學會了什麼? 左翻右翻連續翻真的是沒有難度了 終於也是到了考...

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

5U日常,我突然覺得那蛋捲盒...

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

全民當寫手,一起來腦力激盪一下吧!!

全民當寫手,一起來腦力激盪一...

index 世大運是完美落幕了,但國人的運動魂仍努力地攀爬著。 繼上次的體育運動知識王之後,這次再來...

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