iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
0
自我挑戰組

自我挑戰日記系列 第 19

CSS:shadows 陰影

大家好 /images/emoticon/emoticon37.gif

今天要作的陰影
一般都是用

.shadow{
  position: relative;
  width: 240px;
  padding: 10px;
  background: #E0E0E0;
  box-shadow:0 1px 5px rgba(0, 0, 0, 0.5);
}

https://ithelp.ithome.com.tw/upload/images/20171224/20107496vLeak6A4Dw.jpg
作出像是上圖
只有固定的方形影子
要是作成有立體的影子
可以是把影子拉長或是轉角度
像是下面這個例子
就是分左右2個影子轉角度

.shadow:before{
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 15px;
  left: 10px;
  width: 120px;
  height: 48px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg);
}
.shadow:after{
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 120px;
  height: 48px;
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(5deg);
}

https://ithelp.ithome.com.tw/upload/images/20171224/201074967UQkkd6LaJ.jpg
這是利用 transform 影子的角度作出的效果

若是要作出像是立著的影子
https://ithelp.ithome.com.tw/upload/images/20171224/201074961DI3HSmTRB.jpg

.shadow:before{
  content: "";
  position: absolute;
  z-index: -2;
  left:80px;
  bottom:5px;
  width: 120px;
  height: 40px;
  box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  transform:skew(50deg);
  transform-origin:0 100%;
}

這和上面有點不一樣的是要用 transform:skew() 轉角度
和 transform-origin 移動位置去達到想要的效果
因為只有一個影子就作 :before 一個就可以了

--- 明日待續。


上一篇
CSS:把平面緞帶加弧度
下一篇
CSS:column 多欄文字
系列文
自我挑戰日記30

尚未有邦友留言

立即登入留言