iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 14
0
Modern Web

喪屍黑白切系列 第 14

Day 14 | 錯綜複雜的交錯漂浮版

今天要來講的就是 金魚都能懂的網頁切版 : 交錯漂浮版 NO004
滿適合用在介紹公司的服務,
或是關於我們這類的區塊使用。

本篇關鍵字

  • flex-shrink
  • margin 負值
  • flex 中的 order
  • backdrop-filter

範例檔


HTML

<div class="container">
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=1">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>前端新手,原本在哭自己沒工作,在鐵人賽參賽期間意外找到了工作</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=2">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>進公司需要學習新的框架,老實說有點戰戰兢兢的</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=3">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>晚上還得發鐵人賽,鐵人賽還有兩邊 OTZ(我幹嘛呢我)</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/600/350/?random=4">
    </div>
    <div class="text">
      <h2>Zombie@Dump</h2>
      <p>這絕對是最甜蜜的負荷了,希望我能夠堅持下去</p>
    </div>
  </div>
</div>

CSS

body {
  padding: 100px 0;
  background-color: #ddd;
}

.container {
  width: 1200px;
  margin: auto;
}

.item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 40px;
}

.item .pic {
  width: 55%;
  flex-shrink: 0;
}

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

.item .text {
  width: 55%;
  flex-shrink: 0;
  position: relative;
  padding: 40px;
  backdrop-filter: blur(5px);
}

.item:nth-of-type(odd) .text {
  margin-left: -10%;
  background-color: rgba(254, 201, 121, .8);
}

.item:nth-of-type(even) .text {
  order: -1;
  margin-right: -10%;
  background-color: rgba(149, 219, 214, .8);
  text-align: right;
}

.item .text h2 {
  margin-bottom: 10px;
}

喪屍分解

  • 圖片文字寬度皆設定 width: 55%,但在 flex 預設下,子層物件有 flex-shrink,所以要將 flex-shrink 設為 0
  • 設定 margin 負值,使物件能夠交錯排列
  • 設定 align-items 決定物件要靠上、靠下還是置中對齊
  • flex 物件設定 order 可以調整物件排列順序
  • 使用 backdrop-filter 製作出毛玻璃效果(IE 不支援,safari 需要加上 prefix)

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是時間軸。


上一篇
Day 13 | 這個漢堡跟我想的不一樣
下一篇
Day 15 | 我的歷史成就你的現在 - 時間軸
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言