文章

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

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

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

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

閱讀更多

修改input游標的顏色

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

閱讀更多

裁切照片

不用放背景圖,直接針對<img />裁切圖片

img{
   width: 100%;
   height: 66rem;
   object-fit: cover;
   object-position: 50% 50%;
}

多邊形

單純用css改變element形狀,支援多邊形、內凹

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);
閱讀更多

自適應計算n欄的寬度

網頁想要排版成n欄一排

<div class="grid">
  <div class="grid__item"></div>
</div>
.grid {
  display: flex;
  flex-wrap: wrap;
    &__item {
      margin-bottom: $gutter;
      width: calc((100% - 2 * #{$gutter}) / 3);
      &:not(:nth-child(3n)) {
        margin-right: $gutter;
      }
  }
}