iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
0
Modern Web

喪屍黑白切系列 第 8

Day 08 | 看我的影分身 - 不規則邊緣

今天要來講 金魚都能懂的網頁切版 : 不規則邊緣 NO021
通常這類的圖都會直接請設計師作圖出來,
只是讓大家知道有做圖之外的方式,
藉此能更靈活的運用 CSS 。
(這個設計是抓固定寬度1280px)

本篇關鍵字

  • box-shadow
  • position: absolute
  • overflow: hidden

範例檔


(背景圖片: Kate Stone Matheson from Unsplash)

HTML

<div class="banner">
  <h2>Zombie@Dump</h2>
  <img
      src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1342&q=80"
      alt="Banner pic">
</div>

CSS

.banner {
  width: 100%;
  height: 700px;
  overflow: hidden;
  position: relative;
}

.banner::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 64px;
  height: 300px;
  background-color: rgba(119, 74, 54, 0.6);
  bottom: 0;
  left: 0;
  box-shadow: 64px 30px 0 rgba(138, 90, 68, 0.6),
  	      128px 60px 0 rgba(157, 107, 83, 0.6),
  	      192px 90px 0 rgba(176, 125, 98, 0.6),
  	      256px 120px 0 rgba(195, 142, 112, 0.6),
  	      320px 150px 0 rgba(205, 150, 119, 0.6),
  	      384px 180px 0 rgba(214, 160, 126, 0.6),
  	      448px 210px 0 rgba(222, 171, 144, 0.6),
  	      512px 240px 0 rgba(230, 183, 162, 0.6),
  	      576px 270px 0 rgba(237, 196, 179, 0.6),
  	      640px 270px 0 rgba(237, 196, 179, 0.6),
  	      704px 240px 0 rgba(230, 183, 162, 0.6),
  	      768px 210px 0 rgba(222, 171, 144, 0.6),
  	      832px 180px 0 rgba(214, 160, 126, 0.6),
  	      896px 150px 0 rgba(205, 150, 119, 0.6),
  	      960px 120px 0 rgba(195, 142, 112, 0.6),
  	      1024px 90px 0 rgba(176, 125, 98, 0.6),
  	      1088px 60px 0 rgba(157, 107, 83, 0.6),
  	      1152px 30px 0 rgba(138, 90, 68, 0.6),
  	      1216px 0px 0 rgba(119, 74, 54, 0.6);
}

.banner h2 {
  color: white;
  font-size: 50px;
  position: absolute;
  z-index: 1;
  left: 40px;
  bottom: 20px;
}

.banner img {
  width: 100%;
  vertical-align: middle;
}

喪屍分解

  • 使用 ::before, ::after 搭配 position: absolute,製作蓋在圖上的裝飾
  • 使用 box-shadow 製作出多個重複的物件,好處是改本體,其他分身一起改
  • box-shadow
    box-shadow: /* offset-x | offset-y | blur-radius | spread-radius | color */;
    
    (我沒有使用到 spread-radius,所以省略不寫,金魚切版影片中有講到可以怎麼使用)
  • 最後再用 overflow: hidden 解決溢位的問題

看完以上的內容,想必懶散如我,大家都會決定要做圖!
以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是搭配動畫的 Banner。


上一篇
Day 07 | 有沒有別的辦法? - 不使用多重背景
下一篇
Day 09 | 給我動起來 - SVG animation
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言