iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

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

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

運用到的觀念:

  1. 利用vertical-align: middle;調整圖片預設多餘的空間
  2. 使用position:absolute;絕對定位和相對定位position:relative;來排版
  3. opacity透明度搭配:hover偽類來產生文字互動效果
  4. ::after偽元素搭配:hover偽類來產生互動效果
  5. 使用transition產生漸變的動畫效果
  6. 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 架構

  1. 設定css reset
  2. 將各個區塊寬度設定好
*{
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap{
  width:100%; 
}

.item{
  width:25%;
}

.item img{
  width:100%; 
}

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

調整前

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

調整後


  1. 使用絕對定位 將文字內容(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); 
}


  1. 設定文字內容大小和色彩
.item h2{
  font-size: 24px;
  color:#ff0;
}
.item p{
  font-size: 18px;
  color:#fff; 
} 

  1. 設定文字內容排列的方式
    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;
}


  1. 設定字體

插入 <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;

} 


  1. 在item父層設定display:flex;,將四個item區塊設成從左到右排列
.wrap{
  width:100%; 
  display: flex; 
}


  1. 設定文字互動效果
    將文字設成透明 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; 
}



  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 網頁色彩碼,看完這篇全懂了

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


上一篇
Day21 切版筆記- 圖文滿版區塊
下一篇
Day23 切版筆記- 人員介紹卡片
系列文
文組視角的初學前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言