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

DIV區塊內文字左右對齊?

DIV區塊內文字左右對齊?

最近常接到一些英文網站建置的專案....為了讓內容文字能夠左右對齊... 所以我用了以下方式 div...

javascript 底下使用 htmlspecialchars

javascript 底下使...

pexelsphoto Javascript中使用一個函數達到PHP的htmlspecialchar...

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPEMYISAM錯誤

新舊交替,使用phpmyad...

sql55 系統移機的過程中,最重要的環節....我想...莫過於是系統的環境了....。 這次在協...

Recommended reading

Other stories happened at this address

5G抬頭練習

5G抬頭練習

G在練習著抬頭,U隨侍一旁( ̄∇ ̄) 還有U說他也要練習抬頭。 我說親愛的,你好不好先練習一下如何保...

我需要多一點正面能量

我需要多一點正面能量

最近有太多的負面情緒~ 所以收集了一些正面名言來激勵一下自己。 每次進入系統隨機挑一個名言顯示,顯示...

千萬別低估了小孩的破壞力了......所以我該在旁邊作畫美化一下嗎?

千萬別低估了小孩的破壞力了....

千萬別低估了小孩的破壞力了......所以我該在旁邊作畫美化一下嗎?

一兩黑殼蝦的功力

一兩黑殼蝦的功力

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

這麼冷的天就是要來碗麻油雞麵線

這麼冷的天就是要來碗麻油雞麵...

s 這麼冷的天,根本就不想出門( ̄∇ ̄) 搞定U的午餐後,自己煮了些麵線加上母親大人寄上來的麻油雞~...

When caterpillar grow up become butterfly

When caterpill...

When caterpillar grow up become butterfly

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