CSS 小技巧

CSS小技巧 如何讓所有文章的圖片自動生成影子或圓角

Bygrandia

由於區塊編輯器（Gutenberg blocks）的images blocks無論是上傳或嵌入，都沒有設定影子drop shadow的選項，只能自己從CCS方面下手。

Sample

.wp-block-image img {
  border-radius: 15px;
  filter: drop-shadow(8px 8px 12px) ;
  color: silver; 	
}

wp-block-image是WordPress內置區塊編輯器插入圖片的class名稱，border-radius屬性是讓圖片生成圓角，而filter屬性相當強大，比如加入drop-shadow就能讓圖片或任何element生成影子。

另外，opacity和saturate都是不錯的filter，一個是透明度，一個是飽和度，就看你怎樣運用，讓圖片添加不一樣的風格。

參考資料
CSS filter Property (w3schools.com)

grandia

來自冥王星的天蠍座，卻流著雙魚座的血。

一個甚麼都不會的平凡人，最擅長的事情就是宅在家，足不出戶。

Similar Posts

WordPress小技巧 如何解決目錄無法自動設置鏈接至非拉丁字標題

WordPress小技巧 如何解決目錄無法自動設置鏈接至非拉丁字標題

grandiaBygrandia

每次看書，是不是會先打開前幾頁，看看目錄（Table of Contents），了解內容？所以寫長篇文章，妥善使用目錄，方便查詢，還能為SEO加分。現在的目錄外掛，已能自動對應H1、H2、H3標題，不必手動設置，容易使用，不過對非拉丁字（Non Latin Characters）的中文字並不友善。

CSS小技巧 如何創建文字呼吸效果並循環呈現的動畫

CSS小技巧 如何創建文字呼吸效果並循環呈現的動畫

grandiaBygrandia

要創建一個文字呼吸效果並循環呈現的動畫，您可以使用CSS關鍵幀動畫。這是相當有趣的代碼，因為呼吸效果可以為網頁帶來一些互動性和引人注目的效果。 以下是一個示例代碼，演示如何實現這個效果： HTML： CSS（styles.css）： 在這個示例中： 我們創建了一個包含文本的元素，並將其放置在一個名為breathing-text的容器內。 使用CSS樣式，我們設置了文本的初始樣式，包括字體大小和動畫屬性。 我們定義了關鍵幀動畫@keyframes breathingAnimation，以在動畫的不同階段設置不同的透明度和文本大小，從而實現呼吸效果。 動畫具有3s的持續時間，ease-in-out的時間函數，並使用infinite選項來實現無限循環。 您可以根據需要調整文本的樣式、動畫持續時間以及變換的比例來獲得所需的效果。 假設，要在原本五彩文字效果，實現文字呼吸效果，如何？ 以下原本代碼： 要在現有的代碼中實現文字呼吸效果，您可以將@keyframes breathingAnimation 添加到您的 .section1 樣式中，並將所需的透明度和縮放效果添加到動畫的關鍵幀中。以下是修改後的示例代碼： 在這個示例中，我們將breathingAnimation 添加到 .section1 的 animation 屬性中，以實現文字呼吸效果。同時，我們保留了之前的 expand-rev 動畫。 請注意，由於 background-clip: text; 和 opacity 動畫會在同一個元素上運行，可能會對彼此產生影響，導致呼吸動畫看起來不如預期。您可能需要根據您的需求微調動畫參數。