iT邦幫忙

0

【前端動手玩創意】一句CSS做出好看的hero section!(4)

  • 分享至 

  • xImage
  •  

目錄

【前端動手玩創意】等待的轉圈圈效果 (1)
【前端動手玩創意】google五星評分的星星(2)
【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高,想挑戰再進來!)
【前端動手玩創意】一句CSS做出好看的hero section!(4)
【前端動手玩創意】創造一個Skill bar(5)
【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)
【前端動手玩創意】前端canvas截圖的招式!竟然有三招,可存成SVG或PNG (7)
【前端動手玩創意】讓你的PDF檔案更難被抓取(8)
【前端動手玩創意】哇操!你敢信?花式寫todo-list,body裡面一行都沒有也能搞?(9)
【前端動手玩創意】卡片製作,才不是!是卡片製作器!(10)

超好看的穿透文字效果

神奇的一句css

mix-blend-mode

MDN的用法解說

我們的用法就是: mix-blend-mode: screen;

html原始碼寫法


<div class="image-container">
  <div class="text">NATURE</div>
</div>

很簡單就只是兩個div。
一個放圖片,一個寫文字。

CSS原始碼寫法

就很基本,只要把圖片放在背景就可以了。


.image-container {
  background-image: url("img_nature.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}

.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

心得後記

CSS的世界真的是很大很廣闊,有時候一句關鍵的語法就可以達到很讚的效果!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言