文章專區

最新網頁設計文章

知識圖譜(Google Knowledge Graph),是 Google 在搜尋體驗上獨創的資料串聯應用,大多數的搜尋引擎,在結果的呈現上都是只有透過爬蟲程式在公開網路的串聯資訊中組成表單條列,而 Google 圖譜則會在表單條列旁的頂端會額外幫助你針對搜尋目標列舉出相關的資訊題材,可能是國家資訊、景點位置、名人介紹、品牌商家等大方向相關資訊整合,呈現結果如:圖片、地點、簡介、著作、產品、使用者評論等相關細部資訊。     Google 知識圖譜資訊的來源除了本身的爬蟲串聯自動產生之外,也提供了商家、品牌等相關目標人員的管理功能和使用者實際體驗的評論功能,這樣經過 Goolge 官方串聯後與管理者、體驗雙方實際的資訊登錄所整合出來的資訊便能更正確、客觀的呈現在更多的使用搜尋結果上,重新定義了搜尋官方、管理官方、所有體驗者的搜尋共享關係。     在功能命名上就是針對「知識」的串聯與「圖譜」式的呈現來增強貼近人們語義搜尋體驗內容,目的在於提供使用者更詳盡、實用的搜尋資訊,透過這樣的功能,也能提升品牌、商家對使用者的知名與信賴度,所以經營站台的同時,一起建立好網頁結構化資料相關資訊提供 Google 確認與應用,也是一種擁有實值效益和必要的經營手法。  
 科技始終來自於人性,這是大家朗朗上口,常被引用的一句名言。在科技發達,網路無遠弗屆的現今,越來越多的商家與企業加入了廣大數以萬計的網站市場上提供服務,而搜尋引擎也進步發展得越來越人性化,搜尋引擎龍頭 Google 從原本的站台資料查詢衍伸出了地圖商家服務,以往大家都認為網站是無遠弗屆,甚至跨國、跨區的無限服務,但隨著大量相同商家、產業廣泛的湧入,人們在網路世界的選擇逐漸變多,在地化的經營也變得逐漸重要!因此 Google 也人性化的結合地圖資訊開始透過行動定位或IP的判斷將搜尋結果在地化優先呈現。     從網站優化 SEO 的角度出發,商家與企業建置網站便是希望提高廣告曝光與通路的拓展,消費者自然也會選擇快速、方便、實惠的項目,網站在地化經營的重點也包含了許多潛在意義,面對眾多同業的競爭,地緣就近、資訊清楚、品牌顯著、商譽有佳、內容精確的網站便越能受到搜尋引擎和消費者的青睞。     因此 Google 在搜尋結果上也提供了知識圖譜、商家使用者評比的相關功能,好讓搜尋結果能因為使用者的地緣與累積使用評比呈現最佳的排名,所以網際網路雖然廣大,但扎實的在地化經營也能有效、明確的幫助站台發展,更能從在地使用者服務商譽上累積拓展至世界各地。  
 z-index可以設定元素的堆疊順序, 設定值越高越前面,可以為負數,例如:z-index: -1。 另外要注意的是z-index只能在有設定位(position)的元素上才會奏效。 可設定為position: static、absolute、relative、fixed。 如下圖範例1中所示,如果將色塊設成z-index: 1的話,就會將文字擋住了。 See the Pen NMQENQ by Ya (@bok770) on CodePen.   然而如果改成z-index:-1的話,因為色塊的順序為負的,所以會被放置在文字的後面。 See the Pen yjmRGB by Ya (@bok770) on CodePen.   範例2: See the Pen wjVEQq by Ya (@bok770) on CodePen. 如範例2所示,設定值越大的元素( z-index:3),堆疊順序會越前面, 要注意設定值以免遮蓋到後方的元素。  
   Google-SERP-SEO常見優化項目,在先前分享初識搜尋引擎最佳化(SEO)時,提到過使用者在大多數搜尋引擎使用關鍵字查詢時都會呈現「關鍵字廣告」與「自然搜尋排序」兩種結果,但其實除了這兩項結果外,各家搜尋引擎在搜尋後的呈現頁面上還會根據使用者不同需求提供如:人物、商家、地點、產品等相關資訊,視使用者需求習慣的挑選介紹,然而並非所以有搜尋引擎所提供的資訊格式都相同,所以在這樣的呈現頁面上我們統稱為「 SERP 搜尋結果頁面」(Search Engine Results Page),本次也將針對趨勢熱門的 Google SERP 進行常見SEO設定項目進行更進階的說明。      從畫面中我們能瞭解除了廣告與自然排序結果之外,常見對於 SEO 有幫助的部分為:網站的內部連結架構、Google知識圖譜。在以往形式中的自然排序結果都只會顯示網站的介紹敘述,值得注意的是在 Google 的呈現架構中,我們可以透過對網站程式的內部架構設定,將站內主要連結分類呈現在自然排序中,讓使用者能夠不必透過進入網站首頁便能更快速的精確到達站內想涉略資訊頁面,對於有更精確性的導向在選擇點擊上能有實質提升的效益。    Google知識圖譜,在架設網站的同時,我們能將站台相關資訊一併建入,在知識圖譜上的資訊能夠提供使用者有效的參考與瞭解該站台的各種詳盡訊息,常見的如:營業時間、地點、電話、評價等實用資訊。在建立這種簡單卻有實質參考價值性的訊息不僅可以提供使用者方便瞭解,更能增加站台與使用者在搜尋之間的資訊互動!  
Select option是下拉式選單,通常用在表單(form)裡,在網頁中很常看到,像是旅行社的網站會提供旅遊國家讓網友做選擇,或是購物網站提供各項商品項目等等。  基本語法為 < select name="選單名稱" > < option value="選項值" >< /option > < /select > 範例: See the Pen ZompYe by Ya (@bok770) on CodePen. 範例中的travel-form為此選單的名字,可以自己設定, 包在裡面的option是此選單的選項,每個項目都會有一個值(value), 用來判斷所選擇的項目,不會顯示在頁面上, 而 < option >< /option > 之間的文字就是會看到的內容, 這樣一來簡單的下拉式選單就完成了。 可以配合一些JS特效或是使用CSS美觀選單樣式。
   .app頂級網域名稱(TLD,Top-Level Domain),開放註冊申請囉!由 Google 在2015年2月以 TLD 史上最高金額2.5億萬美元所競標下的 .app 頂級網域名稱的經營權,在本月(2018/5/8)開始透過各家註冊機構對外開放申請註冊網址應用了!      Google 旗下網域名稱註冊管理機構 Google Registry 透過 Google 官方資訊對外宣布了.app頂級網域名稱開放應用的資訊,如同域名由英文單字「application」的簡寫.app 命名,主要是提供「行動應用程式、雲端程式、網路程式、瀏覽器程式」等開發人員所能加以學習、交流、運用的安全網域名稱。      其中也特別強調了.app 是 TLD 當中首例預設直接使用 HTTPS 加密的傳輸模式,讓開發人員能夠更安全的將應用程式推廣至全球普及,透過HTTPS的加密特性,可以避免連線傳輸途中受到惡意廣告程式和 ISP 的入侵或跟蹤,同時也保障在開放的 Wi-Fi 環境中確保傳輸安全。      在.app的開放中,我們明顯瞭解到了 Google 對行動應用趨勢及HTTPS加密傳輸有著十分的重視,因此它也將是Google 宣告帶領網路走向未來 HTTPS 全面化的領導趨勢,從2018/5/8開始只需要先透過get.app確認.app的域名使用狀況後,就能開始選擇合作的註冊商進行.app網址申請囉!
在網頁設計上,有時我們只要擷取圖片的一部分時,若是還要另外切圖片的話又會顯得累贅,這時我們可以用CSS的屬性來自由裁切圖片囉! css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來,並利用margin來控制要顯示的部分。 範例: 原本的完整圖片 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   使用css裁切過後 See the Pen KRovqO by Ya (@bok770) on CodePen.   css的clip屬性 clip的屬性值僅有rect( 矩形 ),其值為 rect (top, right, bottom, left),預設值為auto,而必須注意的是此屬性要有position:absolute才會生效,圖片顯示範圍的計算為top減掉bottom為顯示範圍的高,right減掉left為顯示範圍的寬。 範例: See the Pen LmdjJO by Ya (@bok770) on CodePen.
   本站先前由測量速工具 Page Speed Tools 禁止轉譯 JavaScript 和 CSS-改善網站速度提升介紹過的在行動裝置普及前,以往精美多樣化的網站所使用的JavaScript 和 CSS 特效程式較為複雜與龐大,因行動裝置的普及與限制載入,漸漸成了網站的弊端。     因而衍伸出了改善JavaScript 和 CSS 載入限制的"部分快速轉譯技術",能夠在保留站台原始效果的情況下,調整網站在讀取瀏覽時的優先存取項目與技術,本次將針對實際細部改善技術進行介紹。   從範例的網站中,我們能瞭解 Page Speed Tools 明確的告知了我們網頁含有那 4 項禁止轉譯 CSS 資源,對網頁的轉譯作業造成延遲。 原本是方便連結、呼叫使用的特效卻造成了網站的連結延遲,所以,以下我們也將針對這部分項目進行改善範例說明。   以往大部分的設計師在開發網站的時候,會習慣將CSS打包成單一檔案,再根據頁面的使用需求進行外連來達到畫面乾淨並方便呼叫管理的應用,透過 Page Speed Tools 的告知,我們從範例網站的首頁載入程式碼確認了造成延遲的 CSS 外部連結位置。   以第一項 CSS:css/reset.css 為例,我們可以將原本外連的 CSS 資源進行"複製"加入首頁程式碼變成預設的風格設定。   將原先的 css/reset.css 的連結設定進行移除(本站為示範所以此部分使用隱藏方式呈現),把前一步驟所"複製"的 CSS 風格以 <style>  </style> 包裹進行貼上設定後儲存。   經過以上更換設定的方式,我們再使用 Page Speed Tools 的分析,便能發現在轉譯作業造成的延遲有所改善。透過這樣的"部分快速轉譯技術"我們便能在保留站台原始效果的情況下改善延遲效果。  
  在本站先前介紹過的Page Speed網站速度與SEO的重要關係當中,我們針對了測速工具 Page Speed Tools 給我們的最佳化圖片建議進行了改善說明,檢測網站當中其實包含了許多項目,在改善完圖片後,本次將為大家介紹"禁止轉譯 JavaScript 和 CSS"的建議調整方向。     禁止轉譯 JavaScript 和 CSS,其實指的是在網站畫面呈現的特效工作程式區塊,在行動裝置發展之前,大多數網站只對應桌上型電腦裝置,而多數電腦裝置包含著碩大的螢幕畫面與穩固快速的實體網路線路,較不像行動裝置受小螢幕與無線網路的限制,因此在發展的歷史中,越精美越多樣化的網站所使用的JavaScript 和 CSS 特效程式就顯得更加複雜與龐大,原本是替網站美化與提升功能的效果卻因為行動裝置的限制載入與普及,漸漸成了網站的弊端。     因而從始至今,在數以萬計的眾多站台中,衍伸出了改善JavaScript 和 CSS 載入限制的"部分快速轉譯技術",能夠在保留站台原始效果的情況下,調整網站在讀取瀏覽時的優先存取項目與技術,就是改善禁止轉譯 JavaScript 和 CSS的一種優化方式。       已往的網頁可能需要多次禁止轉譯來回行程以及多項外部資源載入才能完成。但在部分快速轉譯技術優化後的網頁則能夠減少禁止轉譯來回行程的次數以及降低外部資源載入的容量,所需要的來回行程與外部載入位元組數越少,則網頁轉譯速度越快。
 作為網頁設計師肯定對製圖軟體Photoshop不陌生, 而現在可以直接用CSS呈現囉! 雖然目前的瀏覽器支援度很有限, 除了Opera與IE無法支援以外,Chrome和Firefox則可以不靠前綴即可呈現 。 CSS的mix-blend-mode屬性就跟Photoshop的圖層混合模式一樣,雖然不如Photoshop那麼多,但也高達十六種效果。   就讓我們看以下範例,可以比較各個色彩模式的呈現: mix-blend-mode: normal 一般 預設值,沒有被混合。 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/zjZyKO/' _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: multiply 色彩增值 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/JvWwbY/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwbY/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;JvWwbY&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: screen 濾色 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/ervbBa/' _fcksavedurl='https://codepen.io/bok770/pen/ervbBa/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;ervbBa&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: overlay 覆蓋 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/vjxvgx/' _fcksavedurl='https://codepen.io/bok770/pen/vjxvgx/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;vjxvgx&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: darken 變暗 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/QrpzdV/' _fcksavedurl='https://codepen.io/bok770/pen/QrpzdV/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;QrpzdV&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: lighten 變亮 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/odZJZz/' _fcksavedurl='https://codepen.io/bok770/pen/odZJZz/'&amp;amp;amp;amp;amp;amp;amp;amp;gt;odZJZz&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-dodge 加亮顏色(減淡) See the Pen &amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/ELWGma/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGma/'&amp;amp;amp;amp;amp;amp;amp;gt;ELWGma&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: color-burn 加深顏色 See the Pen &amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/' _fcksavedurl='https://codepen.io/bok770/pen/wjJRej/'&amp;amp;amp;amp;amp;amp;gt;wjJRej&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;.   mix-blend-mode: hard-light 實光 See the Pen &amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/JvWwyX/' _fcksavedurl='https://codepen.io/bok770/pen/JvWwyX/'&amp;amp;amp;amp;amp;gt;JvWwyX&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;.   mix-blend-mode: soft-light 柔光 See the Pen &amp;amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/bMqOrj/' _fcksavedurl='https://codepen.io/bok770/pen/bMqOrj/'&amp;amp;amp;amp;gt;bMqOrj&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;.   mix-blend-mode: difference 差異化 See the Pen &amp;amp;amp;lt;a href='https://codepen.io/bok770/pen/aGJPLv/' _fcksavedurl='https://codepen.io/bok770/pen/aGJPLv/'&amp;amp;amp;gt;aGJPLv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Ya (&amp;amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;gt;@bok770&amp;amp;amp;lt;/a&amp;amp;amp;gt;) on &amp;amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;amp;gt;CodePen&amp;amp;amp;lt;/a&amp;amp;amp;gt;.   mix-blend-mode: exclusion 排除 See the Pen &amp;amp;lt;a href='https://codepen.io/bok770/pen/WJpLZa/' _fcksavedurl='https://codepen.io/bok770/pen/WJpLZa/'&amp;amp;gt;WJpLZa&amp;amp;lt;/a&amp;amp;gt; by Ya (&amp;amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;amp;gt;@bok770&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.   mix-blend-mode: hue 色相 See the Pen &amp;lt;a href='https://codepen.io/bok770/pen/ELWGbj/' _fcksavedurl='https://codepen.io/bok770/pen/ELWGbj/'&amp;gt;ELWGbj&amp;lt;/a&amp;gt; by Ya (&amp;lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&amp;gt;@bok770&amp;lt;/a&amp;gt;) on &amp;lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&amp;gt;CodePen&amp;lt;/a&amp;gt;.   mix-blend-mode: saturation 飽和度 See the Pen &lt;a href='https://codepen.io/bok770/pen/GdWPOO/' _fcksavedurl='https://codepen.io/bok770/pen/GdWPOO/'&gt;GdWPOO&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   mix-blend-mode: color 顏色 See the Pen <a href='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/' _fcksavedurl='https://codepen.io/bok770/pen/rvyopN/'>rvyopN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.   mix-blend-mode: luminosity 明度 See the Pen <a href='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/' _fcksavedurl='https://codepen.io/bok770/pen/LmWMeb/'>LmWMeb</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>.