金魚都能懂的這個網頁畫面怎麼切 — 學習筆記01

以下皆使用sass寫：

圖文滿版區塊 NO001

一、 讓border的線不要滿版

因為align-items預設值為stretch，會造成滿版的線的情況，這時改成flex-star可以解決這個問題。

.text
    height: 100%
    display: flex
    flex-direction: column
    justify-content: center
    align-items: flex-start //讓border-bottom的線不要滿版

二、 畫面分割的效果

這種效果可以用1.先把圖片處理好再加上圖片，或是2.運用background的linear-gradient達成。

渲染程度都一樣，會造成從中間切一半的斷層效果，如下圖是將兩者調整為30%的效果

.banner
    height: 400px
    width: 100%
    background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%, url('https://picsum.photos/1200/600?random-11') right center / auto 100%

//background: linear-gradient(漸層方向, 顏色1 渲然程度, 顏色2 渲然程度) 水平方向的背景位置 垂直方向的背景位置（object-position） / 背景寬度 背景高度, url('圖片網址') 水平方向的背景位置 垂直方向的背景位置（object-position） / 背景寬度 背景高度

互動圖文卡片 NO002

文字區塊覆蓋在圖片上面

這裡的效果可使用position: abolute與relative。將.item設定為position: relative，而.item .text文字區塊設定為position: absolute，這樣就可以固定文字區塊的位置了。

移動卡片時變色/浮現文字效果

首先，先將變化好的樣子做出來：
文字區域.text的background設定為rgba(0,0,0,0.6)。
再加上opacity: 0讓整塊區域隱藏起來。
接下來，設定hover後的效果，碰到父元素.item => 子元素.text做變化

.item
    &:hover 
        .text
            opacity: 1
    .text
        opacity: 0

線條出現效果

移動到卡片上後h2的底下會呈現一條底下由左而右出現的效果。
這邊要應用的是after（偽類）。給h2增加一個after：

.item
    h2
        color: #fff
        &:after
            content: ''
            background: #888
            width: 0%
            //讓線的寬度等於0%
            height: 2px
            display: block
            margin: 1em 0
            transition: width 0.3s 0.3s

之後再在hover後的效果裡加上，h2與after：

.item
        .text
            h2
                &:after
                    width: 100%
                    //讓線的寬度為100%

img的處理

必須要設置vertical-align: middle，否則格式會跑掉：

img
        object-fit: cover
        vertical-align: middle //圖片垂直對齊該行文字的置中位置。

超通用橫式版面 NO005

box-sizing

將box-sizing設置為border-box可以讓實際寬高等於所設定的數值，也就是說padding和border的寬度也直接被算在裡面了。

.text
    width: 50%
    padding: 20px
    box-sizing: border-box
    display: flex
    flex-direction: column
    justify-content: flex-start

object-fit

object-fit的設定讓圖片可以契合到固定好長寬的div裡。

• object-fit: fill;
• object-fit: contain;
• object-fit: cover;
• object-fit: none;
• object-fit: scale-down;

讓btn對齊右邊與下面

    .btn
        line-height: 1.5em
        padding: 0 1em
        align-self: flex-end //跟「讓border的線不要滿版」相同道理
        text-decoration: none 
        border: 1px solid #ccc
        border-radius: 200px
        margin-top: auto //flex的特性，可以讓more按鈕自動對齊
        color: #aaa

box-shadow

選擇跟背景相似顏色的shadow比較有融合感。

/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 10px 30px #9065b9