提姆寫程式

0%

CSS 筆記 - 金魚切版系列:01-圖文滿版切法

發表於 更新於 分類於 Disqus：
傾斜背景怎麼切?

pic

這次要完成的切版如上圖，當中藏著幾個小技巧：

HTML 架構

先確認架構正確了，再來寫 CSS 會更快速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="banner">
  <div class="container">
    <div class="bannerText">
      <h1>
        金魚系列-圖文滿版練習
        <small>跟著 AMOS 來切版</small>
      </h1>
      <h2>使用到的技巧</h2>
      <p>
        使用到 CSS reset，inline & block ，flex-direction 的原理
        <br />
        漸層色彩與多重背景撰寫方式，100vh 螢幕高度!
      </p>
    </div>
  </div>
</div>

SCSS

CSS reset

Amos 用這個方式就完成了 CSS reset (尖叫)!

1
2
3
4
5
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

container

制定 container 的寬度，當中有一個 RWD 偷懶方式

1
2
3
4
5
6
.container {
  width: 100%;
  max-width: 1280px; //RWD 偷懶方式
  height: 100%;
  margin: 0 auto;
}

.bannerText 文字排版

再來處理文字排版，先不給色彩與細節，這邊僅確認排版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.bannerText {
  height: 100%;
  display: flex;
  flex-direction: column; //主軸
  justify-content: center; //次軸
  align-items: flex-start;
  h1 {
    font-size: 50px;
    border-bottom: 1px solid #000;
    small {
      display: block;
    }
  }
  h2 {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
}

再來設定 .banner 位置，

1
2
3
4
5
6
7
8
9
10
11
12
13
.banner {
  width: 100%;
  height: 100vh;
  //背景縮寫技巧  漸層：(角度，背景色，第一個漸層色空間，第二個漸層色空間) background-position / 漸層寬高;
  background: linear-gradient(115deg, #f8d848 50%, transparent 50%) center center /
      100% 100%, //多重背景寫法  url(背景連結) background-position /圖片寬高
      url("https://images.unsplash.com/photo-1594046243098-0fceea9d451e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
      right center / auto 100%;

  .bannerText {
    ...;
  }
}

完成!!

Codepen https://codepen.io/hnzxewqw/full/XWXBYEQ

參考資料