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

PHP自動補零!!

PHP自動補零!!

其實這個是基礎中的基礎....但我卻老是不願意記起來他的函式用法..@@ 剛剛..又用到了...啊所...

用distinct在MySQL中查詢多條不重複記錄值

用distinct在MySQ...

select *, count(distinct name) from table group by...

解決手機瀏覽器上點擊輸入框放大問題

解決手機瀏覽器上點擊輸入框放...

開發RWD的網站已經是趨勢,主要也是因為手機用戶實在是太多 但在過程中一直有個問題困擾著我.... ...

Recommended reading

Other stories happened at this address

紀錄故事第一步得先加入這個系統-如何加入作者群?

紀錄故事第一步得先加入這個系...

login 首先,在首頁的上方靠右,如上圖所示,有一個文字連結叫做【登入 innstory? / 或...

很久沒畫了~2015年11月29日這是我第一張嘗試畫在手機裡~

很久沒畫了~2015年11月...

s 小時候~喜歡畫畫,但其實是模仿著家姐的腳步~ 我姐姐以前畫畫很灑脫~隨便幾筆、隨便上色~看起來都...

小黃便利貼

小黃便利貼

news 小黃便利貼~是Innstory系統技術性介紹配置。 呈現的位置為版面左上角九宮格上方。 簡...

5G滿三個月

5G滿三個月

G滿三個月了。 最近有一點咳嗽,看來還是加入了我們是一家人的行列(╯з╰) 奶量非常難抓,有時cc ...

聽說今天是父親節啊~

聽說今天是父親節啊~

給U吃餅乾~ 結果他把餅乾弄碎了給我當痱子粉抹在身上.... 現在整個身體倒是充滿了千層鬆塔的甜味....

我們家孤單的火山蝦

我們家孤單的火山蝦

幾年前到朋友公司拜訪,她給了我一瓶生態瓶...裡頭住了一隻夏威夷火山蝦Halocaridina ru...

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