2017-09-29 | 網路

設計 UI 別再用繪圖軟體製作漸層效果圖片了! 現在用 CSS 就可以做到美麗的漸層效果，還可以幫你省下不少圖片檔案的容量，增加效能。

隨著後扁平化時代的 Material Design 崛起，單一色塊不能滿足外觀的需求，美麗的漸層效果也開始流行了起來，不過以前設計師只能用 Photoshop 等設計軟體來做出漸層圖片後再放到網頁上，這在行動裝置上就沒辦法達到響應式效果。

所以在 2013 年以後，主流的瀏覽器都都開始有支援 CSS 漸層語法，自此刻起，設計師便只要使用簡易的 Gradients 即可做出美麗的漸層效果，不再需要設計圖檔了。

不過值得注意的是，在一些小型的元件上盡量使用左右漸層，而不是上下漸層，因為不同螢幕大小的裝置原則上是寬度變化，若是使用上下漸層，會顯得十分擁擠，而左右漸層或斜角漸層則可以讓視覺延展出去。

CSS 程式碼

#grad {
  background: red;                    /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow);      /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow);    /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow);     /* Standard syntax */
}

要有漸層效果至少要 2 種顏色，一般來說 2 種的效果就夠了，基本語法就是 linear-gradient，其他的都是為一些特定舊版的瀏覽器設定的。

儘管網路上有許多 Gradient Generator，但是對於許多沒有美學概念的工程師、或是想省時間不想每次都自己配色的人來說，使用別人配好的漸層就會是最佳選擇。

更多詳情都在…

網動廣告科技

參考資料：https://www.mydesy.com/gradients

【BLOGGER 技術】只用 CSS 做出美麗的漸層顏色效果

網頁設計　網站設計　台北網頁設計

1 分鐘快速學會滑動一段距離後讓上方選單固定在最上方！

自從 CSS 熟了後就發現 Blogger 的優勢，想怎麼改就怎麼改，這邊當作紀錄分享出來一些 Blogger 好用的技巧，之後再統整成一篇。

為什麼要用這個?

根據統計，使用者進入網站後最容易注意到的就是選單(navigation)，一個好的選單可以讓使用者找到他想要看的資訊，達到資訊提供媒介的效果。

讓選單固定在上方的效果對於行動裝置的 UX 十分重要，尤其是部落格文章通常都不會太短，它可以讓使用者不用在看完文章後想點其他連結時一直往上滑(當然可能有 95% 的人文章看完後就關掉網站了…)

而且要是看到什麼讓使用者有興趣的東西，他可以直接在選單上尋找，降低他的麻煩。

不過這個問題其實比較好的方法應該是用側欄選單，不過就算是側欄顯示還是得用固定在上方的效果。

Javascript 程式碼

<script type="text/javascript">
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 495)  {          /* 要滑動到選單的距離 */
       $('.dropdowns').addClass('navFixed');   /* 幫選單加上固定效果 */
    } else {
      $('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
    }
  });
});
</script>  

這段程式意思是當螢幕滑動超過 495px 的距離時，就幫 class 名稱有 dropdown 的元件再加上一個 navFixed 這個 class，而有 dropdown 的這個 class 的元件你必須先確認整個網頁上只有選單有，才不用怕抓錯元件(一般來說會用這個名稱命名的應該只有選單有)

至於 495px 是我這個部落格上方的空間距離，你可以依照自己的空間作調整。可以把它放在最下面結束標籤的上方統一管理，免得之後要找不知道放到哪，更多詳情都在…

網動廣告科技

參考資料：https://www.mydesy.com/blogger

【BLOGGER 技術】滑動後浮動式固定選單，超簡單！