一些有趣的 CSS 選擇器

一些有趣的 CSS 選擇器

本篇大綱:本篇要解決的問題。selection 文字反白樣式。first-letter 每段的第一個字。marker li 「點」的樣式。target 被選擇的錨點、id。focus-within input 影響 form。:placeholder-shown。

Vue CLI 安裝 Tailwind CSS

Vue CLI 安裝 Tailwind CSS

本篇大綱:本篇要解決的問題。安裝 Tailwind CSS -none、minimal、full。postcss.config.js。Google 了一下後,在 npm 上發現有一個套件可以直接安裝,而且容易上手,就整理成這篇。

用純css寫的網頁預覽效果

用純 CSS 寫的網頁預覽效果

覺得可以用在歷年回顧或是頁面預覽的區塊上使用,就自己寫了一個。預設div的寬高就用width/padding的css特性直接做一個正方形處理。而捲動的效果直接用background-position來處理。結合以上2點,實際上會寫到的css沒幾行,如下…

Google Material Design 表單標籤效果

Google Material Design 表單標籤效果

自從 Google 設計了 Material Desgin 後,表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,連 Netflix 都在用了,看來是個好設計,就決定自己來寫一個。