iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
Modern Web

SASS 基礎初學三十天系列 第 26

DAY 26 首頁文章

終於跳脫 header 的部分來到了下面文章列表啦,總覺得光是上半部就做了好久,不知道完賽前能不能把整個畫面刻完XDD

先來新增 component 吧!

// Post.js

import React from "react";

export default function Article() {
  return <div>Article Content</div>;
}

-----------------------------------------

// App.js

import "../src/assets/sass/main.sass";
import Header from "./components/Header";
import Article from "./components/Article";
function App() {
  return (
    <div className="container">
      <Header />
      <Article />
    </div>
  );
}

export default App;

然後也在 sass 的部分也新增一個 partial,現在用起來也挺習慣這種模組化的方式了!

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"
@import "article"

今天的難題!

Untitled

第一位挑戰選手是——廣告版位!這個感覺不難,一起來動手玩創意吧!(????

//article.sass

.ads
    padding: 24px
    text-align: center
    background-color: $gray

    img
        max-height: 150px
// Post.js

import React from "react";

export default function Article() {
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
    </div>
  );
}

恩⋯⋯對,廣告的部分大概就是這樣,應該用看的就蠻懂了XD,圖片的部分就直接抓官網上的 link來實作~

第二個難題!

首頁頭條文章的部分!第一篇文章帶的圖會是最大張的,而圖片的效果會有 hover 紅色的樣式

首先我們把內容都先擺上去,來慢慢修它~~

// Post.js

import React from "react";

export default function Article() {
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
      <div className="post">
        <div className="post-headline">hot now</div>
        <div className="post-img-wrapper">
          <img
            className="post-img"
            alt="post-img"
            src="https://media.vogue.com.tw/photos/60b9a4fcf37df9e2f39b0216/2:3/w_2880%2cc_limit/29711-1_V.jpg"
          />
        </div>
        <div className="post-body">
          ENTERTAINMENT
          <div className="post-title">
            寶藏男孩持修:「對我來說男子氣概無關外表,而是要負責任。」
          </div>
          BY NICOLE LEE 2021年6月7日
        </div>
      </div>
    </div>
  );
}

針對每個要修改的內容,也都加上 className 並且順便排版~

// article.sass

.ads
    // ...
.post
    padding: 0 5vw
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100

    &-headline
        width: 17vw
        border-top: 10px solid $primary-color
        margin: 0
        margin-right: auto
        padding: 0
        font-family: $logo-font
        font-size: 64px
        font-weight: 200
        text-transform: capitalize

    &-img-wrapper
        width: 90vw
        height: 700px
        overflow: hidden
        margin-top: 64px

    &-img
        max-width: 90vw

    &-body
        margin: 0 0 0 240px
        border-left: 1px solid $primary-color
        padding: 32px 200px 0 64px

    &-title
        @extend %logo-font
        font-size: 48px
        padding: 16px 0

排玩版後的 class 樣式大概是這樣,這邊可以看到有 @extend 去快速套用了字型!之前我們已經設定好的就不用重複編寫囉~

第三個難題!

這個我真的找超久才找到解法,就是 vogue 上圖片 hover 的樣式,原本想說應該簡單套上 overlay 就可以了吧,但結果不是,overlay 雖然可以使用 opacity 讓圖片淡化來顯示背景色,但這樣就不是紅色濾鏡的感覺,會有粉白色的樣式,所以搜尋了很久,才發現原來要使用 svg filter 的做法來改變圖片的 RGB 顏色

作法如下:

首先在 html 的地方新增 svg, filter 以及 feColorMatrix 的 tag,feColorMatrix 就是濾鏡本身,透過矩陣計算過圖片顏色後來套用新的濾鏡顏色,可以在這個網站上來練習看看用法

SVG Color Matrix Mixer

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="red-filter">
      <feColorMatrix
        type="matrix"
        values="
        1 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 1 0"
      ></feColorMatrix>
    </filter>
  </svg>

之後我們先把紅色的 svg filter 放入 html 中

// article.sass

// ...
.post
    padding: 0 5vw
    border-top: 1px solid $primary-color
    @extend %link-font
    font-weight: 100

    // ...

    &-img
        max-width: 90vw

        &:hover
            color: $dark-gray
            cursor: pointer
            transition: .1s ease
            filter: url(#red-filter)

hover 的部分在指定 filter 的 id 來套用,就大功告成啦!沒想到短短幾行花了我好久在找做法⋯⋯

Untitled

大概就是醬!我們的 banner 也差不多了~總覺得後面幾篇都在飆車XD

明天見啦~~~


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了!是世界奇觀!

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 25 Full Screen Modal - Follow Us
下一篇
DAY 27 文章列表
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言