iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

做一個面試官無法拒絕的sideproject,當一個全能的前端系列 第 9

DAY9 - 製作多彩文字與排版

上一篇加入了動畫效果後,現在要來寫介紹文字與搭配CSS的排版,做出有自適應效果的首頁

步驟一:製作多彩文字

多彩文字的想法是來自於蘋果的 HomePod mini 的介紹頁面得到想法的。有一種繽紛又有氣勢的感覺。第一時間想了很久,還是想不到CSS有什麼屬性可以製作多彩文字

https://ithelp.ithome.com.tw/upload/images/20210924/20120107A1B2oWLvX8.png

後來看了一下程式碼之後,才恍然大悟,真的沒有這樣的CSS屬性,而是原來可以轉個念頭這樣做:

background: -webkit-linear-gradient(
0deg, #ffa745 0%, #fe869f 30%, #ef7ac8 45%, #a083ed 70%, #43aeff 85%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  • background的 linear-gradient 是用來建立背景的漸層顏色,百分比表示,到達什麼地方要變成什麼顏色
  • -webkit-background-clip 則是最關鍵的屬性,顧名思義就是修剪背景,用來指定背景的作用範圍。有 border-boxcontent-boxpadding-boxtext 等多種值,使用text,就可以讓上一個設定的漸層背景限定在文字範圍內
  • -webkit-text-fill-color 也就是文字填充的顏色,將文字填充透明的顏色,只讓背景顏色顯現出來。

說到這裡,我想讀者一定會有一個疑問-webkit-text-fill-color 和一般文字設定顏色的 color 有什麼不同,color 設定成透明的也有一樣效果。我查一查之後,看到最有可能的解釋是在CSS3之前,color屬性不支援透明的顏色,直到之後才有支援,但是我無法求證。

步驟二:為不同的資訊層級排版

這個比較偏設計的部分。說明為什麼相同的文字,經過排版資後會覺得清晰易懂,容易找到重點。這個

https://ithelp.ithome.com.tw/upload/images/20210924/2012010742i0o5XmlX.png

像是左邊的資訊,就比較難抓到重點,一定得全部讀完之後,才會了解大意與內容;相對的,同樣的內容經過是當的排版,再利用顏色對比呈現出重點,可以很快速抓到重點,這個就是所謂的資訊層級

所謂的資訊層級,引用提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy這篇文章的介紹

視覺層級,即是傳達資訊。如何組織、排序內容,讓接受者能夠盡可能輕易地理解資訊。設計師可以利用視覺元素去區別資料的重要性,引導觀看者閱讀的順序或焦點,第一個注意到的元素、第二、第三、第四…等。使用的方法包含放大字體、使用強烈顏色去強調關鍵元素。

平常按照設計師的稿子在排版的時候,有發現這樣的原理嗎?

製做自適應的頁面

相信製作自適應的頁面可以說是每個前端工程師的必修課程。之前安裝的bootstrap終於發揮作用了。但是慚愧的是,因為筆者都待在B2B的公司工作,根本沒有製做自適應網頁的需求,所以幾乎快忘光怎麼使用了。回到本系列的宗旨,就是要做自己喜歡的專案,又學到東西,快快樂樂地度過每一天。因此趁這個機會看bootstrap的官方文件和複習flex的排版

在這裡非常推薦以下兩個網站

看完之後,相信就會對以下bootstrap設定不難理解,就可以輕鬆做出不同裝置、不同排版的頁面囉

<div class="container-fluid">
  <div
    class="row align-items-center full-height"
  >
    <div class="col col-md-6 col-12">
      <ng-lottie [options]="iconOpts" width="100%" height="100%"></ng-lottie>
    </div>
    <div class="col col-md-6 col-12">
      <h1 class="h1">90天原子習慣挑戰</h1>
      <div class="fs-2x">只要90天,發現你自己</div>
      <div class="button-area">
        <button
          nbButton
          hero
          status="success"
          shape="round"
          routerLink="introduction"
        >
          介紹
        </button>
        <button nbButton hero shape="round" status="info" routerLink="share">
          心得分享
        </button>
      </div>
    </div>
  </div>
  <div
    class="row align-items-center full-height" 
  >
    <div class="col col-md-6 col-12">
      <h1 class="h1">你不需要很厲害才開始,要開始才很厲害</h1>
      <div class="fs-2x">每天多1%的努力,90天之後放大為2.45倍</div>
    </div>
    <div class="col col-md-6 col-12">
      <ng-lottie [options]="iconOpts2" width="100%" height="100%"></ng-lottie>
    </div>
  </div>
</div>

電腦版本:

https://ithelp.ithome.com.tw/upload/images/20210924/20120107F4JXHyzHvy.png

手機版本:
https://ithelp.ithome.com.tw/upload/images/20210924/201201070ybtt9iOq4.png


上一篇
DAY8 - 用ngx-lottie動畫製作一個吸引人的首頁
下一篇
DAY10 - 切換不同的佈景主題
系列文
做一個面試官無法拒絕的sideproject,當一個全能的前端30

尚未有邦友留言

立即登入留言