Day22 切版筆記- 互動圖文卡片

2021 iThome 鐵人賽

DAY 22

自我挑戰組

文組視角的初學前端筆記系列第 22 篇

13th鐵人賽

ptsai129

2021-09-22 18:13:16

1468 瀏覽

分享至

運用到的觀念:

利用vertical-align: middle;調整圖片預設多餘的空間
使用position:absolute;絕對定位和相對定位position:relative;來排版
opacity透明度搭配:hover偽類來產生文字互動效果
::after偽元素搭配:hover偽類來產生互動效果
使用transition產生漸變的動畫效果
background-color 使用rgba的設定方式

HTML 架構

先做一個wrap區塊
wrap裡面會有四個item區塊
每個item區塊內有圖片和文字
item內的文字內容用一個txt區塊包起來

 <div class="wrap">
     <div class="item">
        <img src="https://picsum.photos/500/400?random=10" alt="">
        <div class="txt">
            <h2>金魚都能懂得這個網頁畫面怎麼切:互動圖文卡片</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=5" alt="">
        <div class="txt">
            <h2>每天都要打開VS Code刻意練習!</h2>
            <p>一旦假設某件事情是天生的，等於告訴自己對此束手無策</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=20" alt="">
        <div class="txt">
            <h2>學過的觀念沒弄清楚，切版就切不好</h2>
            <p>你不需要很厲害才能開始，但你需要開始才會很厲害</p>
        </div>
     </div>
     <div class="item">
        <img src="https://picsum.photos/500/400?random=30" alt="">
        <div class="txt">
            <h2>比過去的自己更好，就很好了</h2>
            <p>做自己，其他人都已經有人做了</p>
        </div>
     </div>
 </div>

CSS 架構

設定css reset
將各個區塊寬度設定好

*{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap{
  width:100%; 
}

.item{
  width:25%;
}

.item img{
  width:100%; 
}

圖片有預設向下2~3px的margin, 設定vertical-align: middle; 來調整
參考資料:HTML 5 strange img always adds 3px margin at bottom

調整前

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

調整後

使用絕對定位將文字內容(txt)定在父層(item)
再新增padding讓文字內縮
將背景色彩設呈半透明黑色


.item{
  width:25%;
  position:relative;
}

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); 
}

設定文字內容大小和色彩

.item h2{
  font-size: 24px;
  color:#ff0;
}
.item p{
  font-size: 18px;
  color:#fff; 
}

設定文字內容排列的方式
display: flex;
flex-direction: column;
justify-content: center;

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); 
  display: flex;
  flex-direction: column;
  justify-content: center;
}

設定字體

插入 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap" rel="stylesheet">到head內

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鐵人賽Day22</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/style.css">
</head>

CSS新增字體font-family: 'Noto Sans TC', sans-serif;
新增font-weight

*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

.item h2{
  font-size: 24px;
  color:#ff0;
  font-weight: 500;

}
.item p{
  font-size: 18px;
  color:#fff; 
  font-weight: 100;

}

在item父層設定display:flex;，將四個item區塊設成從左到右排列

.wrap{
  width:100%; 
  display: flex; 
}

設定文字互動效果
將文字設成透明 opacity: 0;
item區塊設定hover
當滑鼠滑到item區塊(圖片任一位置)時，文字會出現 opacity:1;
文字出現的過程是有漸漸出現的效果transition: opacity .5s;

.item .txt{
  position: absolute;  
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,0); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;  
  transition: opacity .5s .3s; 
}

.item:hover .txt{
  opacity:1; 
}

設定滑鼠碰到圖片就會漸漸出現文字底線的效果
當滑鼠碰到圖片時, 底線寬度width會從0%變成100%
偽元素的預設屬性是inline-block,所以必須改成block區塊元素才會產生效果
用transition設定漸漸出現的效果

.item h2::after{
  content:'';
  display: block; 
  width:0%;
  height:2px; 
  margin:10px 0; 
  background-color: #ff0;
  transition: width .5s .3s; 
}

.item:hover h2::after{
  width:100%; 
}

CSS完整結構


*{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

.wrap{
  width:100%; 
  display: flex; /*將item區塊設成並排*/
}

.item{
  width:25%;
  position:relative; /*使用絕對定位將文字內容定在圖片內*/
}

.item img{
  width:100%;
  vertical-align: middle; /*消除圖片下方預設的空白區塊*/
}

.item h2{
  font-size: 24px;
  color:#ff0;
  font-weight: 500;

}
.item p{
  font-size: 18px;
  color:#fff; 
  font-weight: 100;
} 

.item .txt{
  position: absolute;  /*使用絕對定位將文字內容定在圖片內*/
  top:0; 
  right:0; 
  bottom:0;
  left: 0;
  padding:20px;
  background-color:rgba(0,0,0,.6); /*將背景顏色設定成帶黑色的透明色*/
  display: flex; 
  flex-direction: column;
  justify-content: center;
  opacity: 0;  /* 文字設為透明*/
  transition: opacity .5s; /*設定漸變效果*/
}

.item:hover .txt{
  opacity:1; /*滑鼠碰到圖片時，文字內容從透明變成不透明*/
}

.item h2::after{
  content:''; /*使用偽元素一定要搭配這句才會有效果*/
  display: block; /*偽元素預設是display:inline-block;*/
  width:0%;/*設定一開始寬度是0 */
  height:2px; 
  margin:10px 0; 
  background-color: #ff0;
  transition: width .5s .3s; /*設定漸變效果 跑0.5秒 delay0.3秒*/
}

.item:hover h2::after{
  width:100%;  /*設定碰到item區塊才會出現h2底線*/
}

參考資料:金魚都能懂的網頁切版 : 互動圖文卡片 NO002 | 切版教學 | HTML教學 | 網頁教學 | 網頁切版, CSS vertical-align 屬性, RGB、HSL、Hex 網頁色彩碼，看完這篇全懂了

以上為個人學習筆記整理
若有錯誤，歡迎指正