Burpee 4 minutes

Burpee 4 minutes 網址：https://burpee.chiayilai.com 最近開始每天 …

自己刻超簡單 React toast notice 功能

Toast notice 功能 讓使用者自己做了什麼動作，產生的結果是什麼，是很重要的事。在 SPA 中，因為 …

超級簡單的純 CSS 圖片輪播

Pure CSS images slider – fade and scale effects 用 …

單純使用 npm 來編譯 Sass 和 JS

Be a minimalist, I like clean code. 之前都是用 gulp 來處理 Sass …

使用 CSS grid 來製作圖片展示，超簡單！

之前都用 Bootstrap 的 grid 來處理，但是遇到需要有 2 倍寬或 2 倍高的區塊就很難處理，這時 …

Loading by pure CSS

用 :before 和 :after 產生兩個圓形一左一右水平移動。 圓形用 absolute 定位，.loa …

網頁版日曆

主要分成三個區塊，黑色的襯底板，紅色的頭板顯示月份，白色的紙張顯示日期。 對齊的方式因為都是單行，直接用 te …

跟著 hover 移動變化的選單橫桿

加入一個空標籤當為移動橫桿， 用 absolute 來定位 抓取橫桿要移動到的目標的寬度與 X 坐標，帶入給橫 …

Radio by pure CSS

將原本的 radio visibility: hidden, label 標籤做底部區域， label:aft …

Checkbox by pure CSS

將原本的 checkbox visibility: hidden,label 標籤做底部區域，label:af …

功能開關按鈕 switch toggle button by pure CSS

在設定頁面常用的功能，將 checkbox visbility: hidden,label 標籤當底部區域，l …

使用 CSS 的 clip 屬性來達到填滿顏色效果

clip 屬性類似遮罩的概念，設定 top, right, bottom, left 四個位置的值，來達到要顯 …

表單簡易驗證，檢查空的輸入框，並出現提示

結合 bootstrap 的 tooltip，在使用者按下確定按鈕時，判斷表單是否有空的輸入框，並提示使用者輸 …

側邊欄開關

不用插件，少於 10 行的 JS 語法，輕鬆完成視窗外的側邊欄寫法。 用 body 有無 class=&#82 …