Permalink↓ 今日學習重點 ↓
使用 HTML
<video>
Tag 放入影片並操作各種屬性使用 CSS 製作網頁的影片主頁橫幅 (Hero Image)
使用
<iframe>
嵌入YouTube 與各種 Social Media 影片
在設計行銷網頁時,放入漂亮的影片是最輕鬆達到吸睛效果的方法之一,例如:把影片放至滿版當成背景,上面再壓上標題與文字,畫面就會很豐富,這是很常見的網頁設計方式。
例如(以下都不是業配啦XD),
像資生堂的銀座旗艦店官網,也是使用這種方式設計開頭的:
SHISEIDO GLOBAL FLAGSHIP STORE | SHISEIDO
或是,在遊戲宣傳網頁,也很常使用這種手法,像是最近要推出的遊戲——無限暖暖:
《無限暖暖》官網——無論何時都要盛裝登場!
這種將大圖或影片放在開頭的區塊,通常被稱作「主頁橫幅 (Hero Image)」。今天我們就透過製作這樣的網頁,來練習用 HTML 的 <video>
Tag 放入影片,並且並操作影片的各種屬性吧!
此外,文章結尾還會提及如何放入用 <iframe>
嵌入YouTube 與各種 Social Media 的影片。
Permalinkㄧ、HTML <video>
Permalink1. 基本語法
要在網頁中放入影片我們會用以下語法,在 <video>
標籤中放入 <source>
標籤放入影片。
Permalink標準寫法
<video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的瀏覽器不支援影片播放
</video>
<video>
標籤中可以放入多種影片來源,瀏覽器將選擇它的第一個來源的影片,如果不行播放的話再撥下一個,如果都無法播放才會顯示放在內部的文字。放在影片中的文字,是在瀏覽器不支援
<video>
標籤時才會出現。
Permalink簡寫
<video src="movie.mp4"></video>
如果覺得這樣的寫法太長,也可以使用用 src
這個屬性來指定影片檔案的路徑,不使用 <source>
。
Permalink2. 常用的屬性
其他 <video>
標籤最常用的屬性還有:
controls
:出現控制面板autoplay
:自動播放loop
:循環播放muted
:靜音播放preload
:決定影片如何在頁面載入時進行預載,有三個值可設定:none
:不預載影片,直到用戶按下播放按鈕。metadata
:只預載影片的 metadata(如影片長度等資訊)。auto
:預載整個影片檔案。
poster
:當影片尚未播放時顯示的圖片,作為縮圖或預覽圖,也可以當成是影片出不來時的替代圖片。如果沒有設定會取影片的第一幀當封面。width
與height
:除了使用 CSS 設定寬高外,也可以使用這兩個屬性設定寬高
這些屬性就是常用的屬性,不過 <video>
標籤還可以設定其他更細節屬性,詳細請看:
Permalink3. 注意事項
Permalink關於自動播放
如果在使用者沒有預期下自動播放出聲音,會對使用者體驗不好,所以現在多數瀏覽器預設都已阻擋這樣的行為,除非使用 JS 寫程式強制執行影片/音樂。
所以,如果需要影片能自動播放,必須要將影片/音樂設定為「靜音(muted
)」,影片才會自動播放喔!
<!-- 有操作介面 -->
<!-- 沒有設定靜音,自動播放無作用 -->
<video width="320" height="240" controls autoplay>
<source src="影片網址" type="video/mp4">
</video>
<!-- 自動播放 + 靜音 -->
<!-- 要設定為靜音,才允許自動播放 -->
<video width="320" height="240" autoplay muted>
<source src="影片網址" type="video/mp4">
</video>
詳細請看 DEMO:HTML video tag
也就是說,已經不太會發生「在上電腦課偷看部落格,部落格的影片或音樂自動放出聲音來,被老師發現的窘境」。😂
Permalink客製選單需要使用 JS
此外,如果要使用自行設計的選單按鈕,都需要使用 JS 操作,用原生的 HTML 只能使用瀏覽器的預設樣式。
Permalink4. DEMO
知道如何放入影片後,我們就可以來製作把影片當成背景的網頁了!
(使用這種方式建議注意影片大小,一來 load 不出來會影響使用者體驗,二來是過多的流量會對自己的網站造成 loading 負荷。)
這邊我們在主要內容區塊 .container
:用絕對定位填滿容器,再進行其他額外的排版。
而在 <video>
標籤上:
使用
object-fit: cover;
將影片填滿容器,然後使用
pointer-events: none;
阻止萬一點擊到影片,出現瀏覽器針對影片的操作選單(因為要當作背景,避免額外的互動,不過這個可有可無,因為將內容絕對定位在影片上,所以也點不到),另外,使用
poster
屬性設定了影片封面圖片,以防萬一影片跑不出來,還有預設圖可以看。
詳細的 code 與 DEMO 可參考下面:
PermalinkHTML
<header>
<video autoplay muted loop
src="https://im1010ioio.github.io/super-easy-css/36/video.mp4"></video>
<div class="container">
<nav>
<ul>
<li><a href="#">商品說明</a></li>
<li><a href="#">參考行程</a></li>
<li><a href="#">交通說明</a></li>
<li><a href="#">行程規定</a></li>
</ul>
</nav>
<div class="text-content">
<h1>
<span class="line-1">馬爾他</span><br>
<span class="line-2">全世界最小的國家</span>
</h1>
<p>馬爾他(Malta)是位於地中海中心的一個小型島國,介於意大利西西里島和北非之間。這個國家由三個主要島嶼組成,分別是馬爾他島(Malta)、戈佐島(Gozo)和科米諾島(Comino)。雖然國土面積不大,但馬爾他有著悠久而豐富的歷史文化。</p>
<button type="button">開始探索</button>
</div>
</div>
</header>
PermalinkCSS
header{
position: relative;
height: 80vh;
overflow: hidden;
color: white;
text-shadow: 0px .25rem .5rem rgba(0,0,0, .3);
}
video{
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
header .container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, .5);
display: flex;
flex-direction: column;
}
DEMO 連結:Video Full Background
Permalink二、YouTube 影片
既然提到了影片,那就順便說一下怎麼放 YouTube 影片吧!
Permalink1. 放入方法
Permalink官方放入方法
在 YouTube 照著以下步驟操作:分享 > 嵌入。
在嵌入的程式碼這個畫面往下拉,你會發現目前只有幾個選項可以設定:
設定開始時間
顯示播放器控制選項:
勾了以後就不會出現左下「在以下平台觀看:YouTube」的文字啟用隱私權加強保護模式:
勾了以後 YouTube 就不會記錄看影片的人的資訊
最後,你就會得到以下的 HTML code,只要貼上就可以了:
<iframe width="560" height="315" src="https://www.youtube.com/embed/owOqb70D07M?si=C0vKjuZJL-hkQBNR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
當然你可以針對寬高(屬性 width
/ height
)的部分微調。
Permalink2. 我想要自動播放怎麼辦?
PermalinkYouTube iFrame 的可調整參數
如果照著 YouTube UI 介面上操作,沒有辦法設定更詳細的設定,YouTube 提供了
IFrame Player API 文件,裡面有許多參數大家可以參考。使用方法是用 Query String 傳遞參數進去。
所謂的 Query String 就是直接在連結後面用 ?參數1=參數1的值&參數2=參數2的值
接起來就好,是傳遞參數的一種方式。不過,因為是透過網址公開的方式傳遞,通常都不是放機密資訊。
BUT!
BUT! YouTube 的 IFrame Player API 有些參數無作用(例如loop
),而有些參數不在文件內(例如mute
),僅供參考就好。XD
PermalinkYouTube 自動播放
我查到要讓 YouTube 影片自動播放的話,要使用以下的 Code:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/pjFQOLTh7EU?autoplay=1&mute=1&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
就跟前面提到關於自動播放,瀏覽器的限制一樣:
如果在使用者沒有預期下自動播放出聲音,會對使用者體驗不好,所以現在多數瀏覽器預設都已阻擋這樣的行為,除非使用 JS 寫程式強制執行影片/音樂。
所以這裡設定了靜音+自動播放,作為必要條件:
autoplay=1
mute=1
另外,我還加了 controls=0
,企圖讓播放器操作選單不見,不過結果是:選單大約要過 4 秒後才會自動消失,hover 過去影片上方就會出現選單。
詳細 DEMO 請看:YouTube Autoplay
Permalink3. <iframe>
標籤
在網頁偵測模式中,我們可以發現:嵌入 YouTube 影片的是一個叫做 <iframe>
的標籤,而 <iframe>
中包含著另外一份 HTML 網頁(<html>
)。
沒錯,這個標籤就是讓你在網頁中放入其他網頁的標籤,通常都是用來嵌入外部內容,如影片、地圖、社群貼文分享等等。但因為可能放入「其他網站的網頁」,可能會有安全性的問題,所以 <iframe>
有一些限制與問題:
Permalink跨域問題(Same-Origin Policy)
如果嵌入的內容與主頁面來自不同的來源(不同的域名、協議或端口),跨域安全策略會限制主頁面和嵌入的內容之間的互動行為。例如,無法通過 JS 去看或修改來自不同來源的
iframe
中的內容(如 DOM)。
解決方案可以是使用postMessage
API 在主頁面和iframe
之間安全地傳遞消息。Permalink安全性風險
嵌入來自不可信來源的內容可能會引入安全風險,如 XSS(跨站腳本攻擊)或點擊劫持(Clickjacking)。攻擊者可能利用
iframe
的嵌入來誘騙使用者進行不安全的操作。
使用sandbox
屬性可以限制iframe
中的功能,例如禁止腳本執行或表單提交,從而提高安全性。PermalinkSEO(搜尋引擎最佳化)
搜尋引擎可能不會索引
iframe
中的內容,因為它們屬於嵌入的外部來源。這可能會影響嵌入內容的可見性,對於依賴 SEO 的網站來說是個限制。
如果內容對 SEO 非常重要,應考慮其他嵌入方法,而不是使用iframe
。
PermalinkYoutube 嵌入設定了什麼?
allow
屬性:指定允許影片使用的功能:accelerometer
:允許影片使用加速計autoplay
:允許影片自動播放(但沒有作用)clipboard-write
:允許影片將內容複製到剪貼簿encrypted-media
:允許播放加密媒體gyroscope
:允許影片使用陀螺儀picture-in-picture
:允許影片以畫中畫模式播放web-share
:允許影片使用網頁分享功能
referrerpolicy
屬性:控制在跨域請求時,瀏覽器向伺服器傳送的 Referer 標頭資訊。
strict-origin-when-cross-origin
表示只傳送原始域,用於保護使用者隱私。
allowfullscreen
屬性:- 允許使用者將影片全螢幕播放。
Permalink三、IG/ TikTok/ X (Twitter) 影片
如果想放入其他 Social Media 的影片,雖然每家平台實作的方式會略有不同,不過一樣也是使用 <iframe>
的概念嵌入。
這邊就不一個個深入探討了,提一下從哪裡取得嵌入的 code 就好了。
Permalink1. Instagram
從 Instagram 網頁版,必須要是「公開貼文」,接著在貼文右上角的「點點點」後,就會出現「內嵌」選項,可勾選內容是否要包含貼文文字(包括解說)。
嵌入後,影片不能自動播放,要點擊後才會播放。
另外,如果影片不是使用「原始音訊」,而是使用 Instagram 內選用的音樂,點了不會播放影片,會變成連結至 Instagram(應該是因為版權因素)。
話說… 我喜歡這個迷因 🤣:
https://www.instagram.com/reel/CqIaUJAoZpc
Permalink2. TikTok
在 TikTok 網頁版中,會有一個「</>
」圖示的按鈕,點了就會直接出現程式碼了。
嵌入後,TikTok 的影片會靜音+自動播放。
Permalink3. X (Twitter)
在 X (Twitter) 網頁版中,和 IG 類似,點了貼文右上角的「點點點」後,就會出現「嵌入貼文」選項,然後會跳新視窗,讓你選想要以哪種方式呈現:
選了後會預覽給你看,直接複製就行囉!
話說… 我喜歡這個迷因 🤣:
https://x.com/jesselaunz/status/1805403344548016599
Permalink四、實際使用情境
影片是一種非常棒的行銷素材,如果能好好運用,能夠提高使用者的體驗與停留的時間。
(題外話,提高停留時間,說不定還能提高銷售額,在寫這篇文時我發現一間日本公司—— LEEEP 就是在做這件事,他們幫助電商收集在 Social Media 上與品牌或產品相關的影片,管理並且放到商品頁中。)
如果想要在網頁上放影片,建議可以在網站上放較短秒數吸引人的片段(如 15-30 秒精華影片),這樣就可以設定為自動播放或是做更多進階的控制;而較長、詳細的解說影片則可以放到 YouTube 等其他平台上,讓使用者想了解更多時再點擊播放,分散網站的流量。
這樣既可以達到吸睛效果,又不至於佔用太多網站的流量,還多一種曝光方式,可以說是一舉多得。
Permalink↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你,若你覺得獲益良多,請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。
Subscribe to our newsletter
Read articles from Eva Chen | 網頁設計師下班後 directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Article Series
Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯
#00 文章目錄 / 參賽前言 | Super Easy CSS
參賽前言 本系列文章目標是學習 CSS 基本知識,並且研究 The State of CSS 中值得令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知識,不用再零零散散地去爬文搜尋。此外,還會提…
#01 網頁的基本名詞:UI/UX?切版&切圖?前端&後端?靜態&動態?RWD or Mobile First? | Super Easy CSS
↓ 今日學習重點 ↓ 理解網頁設計師、工程師常用的詞彙是什麼? 網頁的基本名詞 UI/UX? UI/UX 分別代表使用者介面設計(User Interface Design,簡稱 UI)和使用…
#03 人在江湖,版控要有:了解 GIT / GitHub / GitLab / Git Flow
↓ 今日學習重點 ↓ 理解版本控制的重要性 了解 Git 版控的概念 了解 Git Flow,開發上的使用情況 我把我所知的 Git 知識都放在這了,自己去拿吧!(航海王口吻)不過也許有誤…
#04 GIT 實戰練習:GitHub Desktop、GitHub Page 基礎教學
↓ 今日學習重點 ↓ 安裝寫程式必要軟體 實際操作 GIT & GitHub 上一篇我們了解了 Git 與實際應用的概念,接下來我們要實際練習使用 GIT 和 GitHub。 安裝必要軟體 …
#05 Html 基礎語法
↓ 今日學習重點 ↓ 了解 HTML 的語法 上一篇文章,我們有建立了一份 HTML 檔案,那麼這些語法到底是什麼意思呢?讓我們往下看。 HTML、HTML5、HTM 是什麼? HTML(Hy…
#06 寫一份簡單的 Html,常用 Html Tag 總整理
↓ 今日學習重點 ↓ 練習使用 HTML 的各種標籤(tag) 知道 CSS 和 JS 要放在 HTML 的哪裡? 今天,讓我們來了解一份簡單的 HTML 會長什麼樣?然後,修改一下第 #0…
#06補充 網頁的根、絕對路徑、相對路徑,那些關於路徑的小知識
HTML 的屬性 href、src 都需要指定檔案路徑才能載入進來,所以這邊補充個關於路徑的小知識。 何謂網頁的根(root)? 指的是網域底下第一層的檔案,例如:https://test.com/…
#07 Css 基本語法 & 權重介紹
↓ 今日學習重點 ↓ 了解 CSS 的基本語法 對於 CSS 的權重有基本概念 我們終於進入我們的重點 CSS 啦!今天要來講解 CSS 權重與選擇器。 本篇會先講解如何撰寫 CSS 與權重…
#08 Css 選擇器總整理!
↓ 今日學習重點 ↓ 了解 CSS 各種實用的選擇器 本篇會用實例與註解說明各種實用的 CSS 選取器,由於很多所以可以先存起來,之後要用到時再查詢。 我的 Photoshop 老師游閔州曾說過…
#09 原生的 Css 變數,基本與進階應用
↓ 今日學習重點 ↓ 了解如何設定 CSS 變數,並且使用它們 CSS 變數(CSS Variables)可以讓人在整個網站的樣式中輕鬆重複使用相同的值,更輕鬆地調整網站的外觀,同時保持一致性。…
#10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦!
↓ 今日學習重點 ↓ 了解如何使用原生 CSS 巢狀 (CSS Nesting) 了解原生 CSS 巢狀的限制 (與 SCSS 比較) 以往 CSS 要使用巢狀管理要透過 Sass (SCS…
#11 開始寫 Css 或程式必須知道的:Dry & Kiss & Yagni
↓ 今日學習重點 ↓ 了解開發的三大原則:DRY & KISS & YAGNI 在進入寫 CSS(或其他程式碼)的世界之前,有幾個重要的原則值得我們了解和牢記。這些能夠提高 code 的品質,讓…
#12 Css 設計方法與命名建議:oocss、smacss、bem、rscss
↓ 今日學習重點 ↓ 了解 CSS 命名建議:OOCSS、SMACSS、BEM、RSCSS 上篇我們了解了寫 Code 的三大方向,主要都是為了更簡單、更好維護。 所以,以此延伸,有許多 CSS…
#13 CSS 盒子模型 (Box Model):border-box & content-box
↓ 今日學習重點 ↓ 了解網頁上,構成一個 Box 盒子的內容 了解 CSS border-box & content-box 有何不同 在網頁中,每個 HTML 元素都是一個方塊,我們又稱…
#14 Reset CSS!變回你該有的樣子
↓ 今日學習重點 ↓ 了解 CSS 為什麼需要 Reset? 了解 CSS 有哪些 Reset 的方法? CSS 為什麼需要 Reset? 不同的瀏覽器會有不同的預設樣式,可能包含字體大小、…
#15 網頁使用的單位大解析:px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax
↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們 在網頁設計中,我們會使用到各種單位來調整尺寸和排版,而單位分成絕對單位和相對單位。以下是各種好用的單位介紹: 絕對單位 1. 像素(pi…
#16 CSS 數學函式 calc()、max()、min()、clamp()
↓ 今日學習重點 ↓ 了解四個實用的 CSS 數學函式:calc()、max()、min()、和 clamp() CSS 的數值可以做簡單的運算,今天我們要介紹 CSS 的數學函式,數學函式可以…
#17 CSS block、inline、inline-block:網頁排版的御三家
↓ 今日學習重點 ↓ 了解網頁上三種常見的 display 屬性:block、inline、inline-block 在 CSS 中,display 屬性是一個關鍵的屬性,它可以改變 HTML …
#18 CSS Flex 彈性盒子:網頁排版的超級寵兒
↓ 今日學習重點 ↓ 了解 Flex 的主軸線與交錯軸、flex-wrap(容器) 了解 flex-grow、flex-shrink、flex-basis、align-self、order(Fle…
#19 CSS Grid、Subgrid:網頁排版的神奇格子,來排個照片牆與雞腿便當吧!
↓ 今日學習重點 ↓ 學習 Grid 容器的各種設定 了解如何劃分 Grid 區域 了解 Subgrid 學習 Grid 細節設定:Gap、Order 昨天我們介紹的 flex 是單向的…
#20 CSS 內部尺寸 (Intrinsic Sizing):min-content、max-content、fit-content
↓ 今日學習重點 ↓ 了解 3 個 CSS 內部尺寸與實際應用:min-content、max-content 和 fit-content 今天來點簡單的主題! CSS 中的尺寸分為兩種,一種叫…
#21 CSS Position:relative、absolute、fixed、sticky 找到適合的定位
↓ 今日學習重點 ↓ 了解 5 種 CSS Position 定位方式 了解 z-index CSS Position 屬性可以用來設定元素在網頁中的位置,也是必學的屬性之一。它主要有 5 …
#22 CSS display: contents:讓你變成小透明,製作 JS Components 時的好東西!
↓ 今日學習重點 ↓ 了解 display: contents; 是什麼? 了解 display: contents; 的運用時機 了解 display: contents; 與 subgrid…
#23 CSS 邏輯屬性 Logical properties 與 Writing modes
↓ 今日學習重點 ↓ 了解 CSS 邏輯屬性的使用情境 了解 CSS 邏輯屬性的語法 CSS 新推出了另外一種排版邏輯,叫作邏輯屬性(Logical properties),特別是針對需要處…
#24 RWD & CSS Media Queries & iOS Safari 上的經驗談
↓ 今日學習重點 ↓ 了解 RWD 的概念與常見螢幕尺寸斷點 了解 Media Queries 的使用方法 了解開發 iOS Safari 的注意事項 當我們在設計網站時,我們希望網站能夠…
#25 CSS 列印的小技巧:@media print、break-before/after/inside、@page
↓ 今日學習重點 ↓ 了解如何設定列印樣式 了解如何防止元素換頁時被截半 了解如何處理列印頁面 網頁需要列印的情況,通常是一些表單頁面(收據、報告等)。上一篇我們講解了 CSS Media…
#26 CSS Container Queries 容器查詢:隨著自己變大變小變畫面
↓ 今日學習重點 ↓ 了解 Container Queries 的用法 了解 Container Queries 特有的單位 了解 Container Queries 的使用情境 前幾篇我…
#27 網頁載入字體、Icon Font 與 CSS font-family、font-weight
↓ 今日學習重點 ↓ 了解字體的基本知識 了解網頁如何載入字體 了解 CSS font-family、font-weight 了解如何使用 Icon Font 我們關於版面編排與 RWD…
#28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行:white-space、word-break、-webkit-line-clamp 的妙用
↓ 今日學習重點 ↓ 學會設定文字過長、行數過多顯示點點點(刪節號 ellipsis) 了解如何讓文字強制換行 學會如何讓文字依據 \r\n 自動折行 在網頁中,許多資料是動態產生的,也就…
#29 CSS 立體字、霓虹字、外框字、漸層字:text-shadow、-webkit-text-stroke、-webkit-background-clip
↓ 今日學習重點 ↓ 了解 CSS 的 text-shadow 與其應用 了解製作文字外框的方法 了解如何製作 CSS 文字遮罩 之前我們都是著重在網頁排版上,今天我們要來做點吸睛的文字視…
#30 iT 鐵人賽心路歷程 & 我的寫作方法
這 30 天真的是很經歷了好多,這中間經歷了去日本玩、首次確診、兩個連假,同時要整理過去熟悉的知識,還要研究其他我不會的,一度還逼近棄賽,能完賽很感動。 今天不寫 CSS,來分享這 30 天的心路歷程…
#31 CSS 顏色設定:基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()
↓ 今日學習重點 ↓ 了解 hex、rgb()、cmyk()、hsl()、hsb() 了解廣色域是什麼 了解 lch()、oklch() 與他們的優勢 顏色在之前的範例中雖然有用到,但是一…
#32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色、與混色的 color-mix() 製作色彩系…
↓ 今日學習重點 ↓ 了解 currentcolor 及他的使用時機 了解 accent-color、placeholder 了解怎麼改動 input 閃動的光標顏色 了解怎麼改動文字反白的顏…
#33 CSS 切換淺色/深色模式:Media Queries 的 prefers-color-scheme 搭配 CSS 變數
↓ 今日學習重點 ↓ 使用 Media Queries 的 prefers-color-scheme 搭配 CSS 變數設定預設的淺色/深色模式 使用 HTML input checkbox 做…
#34 CSS 讓圖片填滿容器的各種方法,以圓形大頭貼為例:object-fit 與 background-size,搭配 aspect-ratio
↓ 今日學習重點 ↓ 在 HTML 加入圖片 使用 object-fit 讓圖片填滿容器 使用 background 讓圖片填滿容器 在 HTML 加入圖片 我們可以使用 HTML 的 <…
#35 圖片的 1x, 2x, 3x 是什麼?關於網頁上圖片解析度的處理:HTML <img> srcset、CSS image-set() 與 @media resolution
↓ 今日學習重點 ↓ 了解向量圖、點陣圖是什麼? 了解像素密度 (Pixel Density) 的原理 使用 HTML <img>srcset 屬性處理圖片 使用 CSS background…
#36 HTML <video> 用影片當背景,使用 iframe 嵌入 Youtube自動播放/ IG/ TikTok/ X (Twitter) 影片
↓ 今日學習重點 ↓ 使用 HTML <video> Tag 放入影片並操作各種屬性 使用 CSS 製作網頁的影片主頁橫幅 (Hero Image) 使用 <iframe> 嵌入YouTube …
#37 CSS 基本漸層:線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)
↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層 了解如何設定漸層的色彩空間 除了背景圖片,漸層色也是屬於 CSS 的背景一種,今天我們就來練習畫各種漂亮漸層吧! 單純用漸層色就能夠表現出…
#38 CSS background 組合技:多重背景、背景位置、簡易視差滾動 (iOS 不支援)
↓ 今日學習重點 ↓ 學會 CSS 背景的詳細設定方式 學會使用多重背景,並了解使用情境 學會設定背景的原點 background origin,及了解他的使用情境 學會使用簡易的視差滾動 …
#39 CSS 幾何背景:條紋、格子、點點、棋盤格子背景 (CSS background)
↓ 今日學習重點 ↓ 學會繪製各種條紋、格子背景 學會繪製各種點點背景 學會繪製各種棋盤格背景 除了單純的漸層色外,漸層還能夠延伸畫出其他的圖案:如條紋、格子、點點、棋盤格背景等等,很神奇…
#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)
↓ 今日學習重點 ↓ 學習 CSS filter blur() 特效 使用偽元素 ::before / ::after 製作裝飾元素 使用 box-shadow 製作裝飾元素 在平面設計中…
#41 用 CSS border-radius 畫圓角與圓圓的形狀:圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)
↓ 今日學習重點 ↓ 學會 border-radius 的基本用法 了解繪製出圓角的原理 在上篇文章中,我們用簡單的圓形加上模糊效果繪製了不規則的漸層,這篇我們來探討如何繪製各種形狀,其實使…
#42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)
↓ 今日學習重點 ↓ 學會用 border 繪製等腰與直角三角形 在 CSS 中,可以使用邊框 border 來繪製三角形,通常會被當成箭頭使用,用在提示框的邊緣或操作步驟按鈕上。 CSS b…
#43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片
↓ 今日學習重點 ↓ 學會使用 CSS clip-path 繪製各種圖形 在 CSS 中除了使用 border 來繪製形狀,還有一個語法 clip-path 也可以繪製圖形,它可以將東西指定在某…
#44 CSS 邊框 border 與各種花式邊框的小技巧:borde-image、outline、box-shadow
↓ 今日學習重點 ↓ 學會 CSS 基本邊框 border 的用法 了解 border-image 的原理與用法 了解如何繪製多重邊框:outline / box-shadow 前幾篇我們…
#45 CSS 中的半透明遮罩 mask,實現各種模糊邊緣特效
↓ 今日學習重點 ↓ 學會 CSS 遮罩 mask 的用法 了解 mask-mode 常用兩種模式下的差異 前幾篇寫到 CSS clip-path 時,可以剪裁任何 HTML 的元素,包含色…
#46 CSS 濾鏡 filter/ backdrop-filter:模糊、透明圖陰影、調色與毛玻璃效果
↓ 今日學習重點 ↓ 學會 CSS 濾鏡 filter 的用法 學會 CSS 背景濾鏡 backdrop-filter 的用法 除了用繪圖軟體在圖片上調整色調,CSS 內建的濾鏡效果也能讓我…
#47 一次搞懂 CSS 各種混合模式:mix-blend-mode/ background-blend-mode
↓ 今日學習重點 ↓ 了解 CSS 各種混合模式 將混合模式應用在 mix-blend-mode 和 background-blend-mode 上 mix-blend-mode 和 bac…