CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

以往我們要依據寬度為容器做改變時,我們通常只能用css media query。但media query中帶入的min-width或max-width寬度條件只限用於整個視窗,因此media query常常不能直覺地在Layout需求上實作。

比如說,有一個component,會被應用在主要內容區以及比較窄的sidebar時,我們通常也只能給他一個modifier class name來讓他在sidebar中不會破版。

閱讀全文 CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

把音樂中的人聲跟樂器都分離出來的超強軟體Spleeter

在查有沒有command line可以分離歌聲跟伴奏的工具時,發現了這個強大的程式。雖然跟一般專業處理聲音的軟體比起來,處理出來的結果沒有太大差別,失真也沒有比較少,不過他強大的地方在於除了人聲以外,他還可以分離出鋼琴、鼓聲、Bass等等樂器。對於想玩重新編曲的或DJ的人來說,應該是一個蠻實用的工具。

閱讀全文 把音樂中的人聲跟樂器都分離出來的超強軟體Spleeter

Photoshop, After Effects 匯出webp動態圖

工作的關係,稍微研究了一下關於產動態webp的方式。本來想說Photoshop已經支援webp了,應該也有匯出webp動畫的功能吧。但事與願違。看了一下以前要做gif動畫都會用的「儲存為網頁用」功能,沒有存為webp的檔案類型選項。再看一下「演算視訊」裡面也沒有webp的格式選項。

閱讀全文 Photoshop, After Effects 匯出webp動態圖

CSS 超好懂的@Layer教學

乍看layer這個字,還以為是像Photoshop的圖層概念之類的東西,亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的(對於CSS權重不是很了解的話,可以快速看一下這篇筆記。)依照layer宣告的順序,來決定樣式優先順序,後宣告的即使權重較小,也會覆寫。

閱讀全文 CSS 超好懂的@Layer教學