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

  • 國立臺灣大學日式宿舍-溫州街22 ... 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

PHP網路爬蟲之抓取meta value

PHP網路爬蟲之抓取meta value

最近在研究著如何抓取網頁中的meta值... php中的getmetatags函式可以...

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

瀏覽器升級ie9後FCKEditor無法使用對話框解決方法

原文網址:http://ecshop.tw/bbs/archiver/tid.html...

Google map 語言本地化

Google map 語言本地化

網路世界的強大...真的是解決問題的好幫手.....雖說有些答案並不可靠.... 但原...

Recommended reading

Other stories happened at this address

紅燒豆腐佐海尼根

紅燒豆腐佐海尼根

e 其實我並不愛把豆腐弄熱來吃~ 小時後的記憶~豆腐就是該從冰箱拿出來淋上點醬油......

天!39快要失守了~

天!39快要失守了~

今早,FB傳來一個訊息...因為一位同學生日到了..... 我看著FB畫面中顯示著同學...

爸爸媽媽你看~rainbow

爸爸媽媽你看~rainbow

看著U排著字母色筆,當然這已經不是他第一次排列。 我跟Mandy只是在旁回應著他的呼喚...

第一次被5U的大便嗆到咳嗽,天啊我到底餵你吃了些什麼@@

第一次被5U的大便嗆到咳嗽,天啊我到底餵你吃了些什麼@@

第一次被U的大便嗆到咳嗽,天啊我到底餵你吃了些什麼@@...

5U的第1張生日卡片

5U的第1張生日卡片

s U的第張生日卡片,謝謝威廷跟瓊慧的用心。 U也謝謝威廷姊夫跟瓊慧姊姊\(^o^)/...

Android Studio 2.3 陽春型計算機

Android Studio 2.3 陽春型計算機

andrio 原本這次的學習課題是,與使用者互動之「按一下」事件處理。 我按照工具書上...

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