[譯] 學習 CSS clip-path 屬性

2016-07-14
阅读 3 分钟
4k
這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部,就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區,類似於遮色片的概念。我們將從基礎開始然後涵蓋語法,進一步理解進階的概念。

[譯] scroll-behavior 滑順的捲動效果

2016-06-03
阅读 2 分钟
16.8k
眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。

響應式設計中百分比 % 的問題

2016-05-22
阅读 5 分钟
4.5k
現在您可能會想知道關於上面這段程式碼有什麼問題,看起來這樣並不明顯,好!假設這是一個三欄(column)的網格,就算你知道 33% + 33% + 33% = 99% 並不是 100%。但在大多數的情況下並不會有什麼問題,不過這誤差的 1% 如果遇到容器像是 1400px 時就是 14px,那就是一個蠻大的誤差了。那為什麼我們不直接調整百分比的精度...

[譯] Houdini: 你還沒聽說!這可能是 CSS 下一件最令人興奮的大事

2016-03-31
阅读 7 分钟
3.3k
你曾經想要使用某個 CSS 的新功能,但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎?甚至更糟糕的狀況,瀏覽器已經支援了但卻充滿問題。我敢打賭這些情況你肯定遇過了。如果上面這種情形你曾經遇過,那麼你是應該關心一下 Houdini。

深入 css z-index 屬性

2016-03-26
阅读 4 分钟
2.1k
說來汗顏,一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對 z-index 完全不熟悉。關於 z-index 的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜,不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。

[譯] CSS 載入機制的未來趨勢

2016-02-18
阅读 5 分钟
9.3k
Chrome 正在試圖改變當 <link rel="stylesheet"> 寫在 <body> 的行為,從blink-dev 的文章並不能很清楚的知道其優點。所以這篇文章想要深入的介紹這點。