[純css] bootstrap5 Dropdown 下拉選單加上動畫

/0 評論/在： , /通過：

bootstrap中的dropdown menu顯示或隱藏，是使用了.show這個class來控制選單的display:none; 或 display:block;，因此我們沒有辦法直接針對display去寫動畫。

閱讀更多
1+

純 css 實作類似Google表單浮動表單標題

/0 評論/在： , /通過：

Google表單通常都會有一種很酷表單標題效果，點到input時候原本在placeholder的標題就跑到左上角變成文字了，並且原本input的外框線也要斷開放進label。

看圖比較懂：

快速作法就是把label的背景設定成跟整個表單整體的背景顏色一致，這樣就定位focus的時候位移到上方就好。

但是！！如果背景是一張圖或是漸層呢？label的背景顏色就不能只是固定的單色了。

這時候我們就要做到真正的透明label。

閱讀更多
0

如何把 sass 的 mixin 和 if 改寫成 less

/0 評論/在： , /通過：

antd 使用的 css 預編是 less，之前在其他專案都是寫 scss，想要把之前寫的工具例如響應式的 mixin 等等搬過來用，這樣就必須改寫成 less 的寫法。

閱讀更多
0

[純css動畫] 波浪

/0 評論/在： , /通過：

憂鬱的星期一，來拍個片好ㄌ～

最近好像很流行這種動態的背景，真心純css不騙，然後沒有svg 不怕不怕：

youtube：點這裡查看

codepan：點這裡查看

閱讀更多
0

純 css 區分 hover in / out 不同動畫

/0 評論/在： , /通過：

在 codepan 上面看到一個很有趣的 hover 效果，於是想說不要看他的程式碼，自己來實作看看。

一般我們要區分滑鼠進入或是離開，會需要用到 javascript 來監聽 moseover / mouseleave ，但是如果你是簡單的效果的話，不妨可以用 css 實作看看。

重點在於使用不同的 transition 條件，去阻擋某些應該要變化的屬性，hover 和沒有 hover的 css 使用不同的 transition 條件，就會看起來很像不同的動畫。

閱讀更多
0

[不安裝套件] 製作響應式 RWD 輪播效果 Slider

/0 評論/在： , , /通過：

如題，我個人並不是很排斥安裝 javascript 套件，因為畢竟人家花心思做出來的東西就是會想得比較全面，可是有時候我們就是用不到這麼多功能，所以可以自己動手做的就試著做做看吧！

閱讀更多
0

修改input游標的顏色

/0 評論/在： , /通過：

input要修改打字時的游標顏色，大致上效果長這樣子：

閱讀更多
0

React實作上傳檔案預覽圖片

/0 評論/在： , , /通過：

這是我想要實現的樣子：在一個卡片中點擊上傳檔案，上傳後的照片不能超出我設定的框框，太高就左右留白，太長就上下留白。

閱讀更多
0

線條背景

/0 評論/在： , /通過：

用漸層的方式繪製重複排列的線條背景

background: repeating-linear-gradient(
    45deg,
    rgba($color-white, 0) 25%,
    rgba($color-white, 0) 60%,
    #fff 75%,
    rgba($color-white, 0) 0
);
background-color: rgba($color-white, 0.3);
background-size: 12px 12px;
1+