css

styled-components 就決定是你了 寫 CSS 搭配上其他模組已經都不是新鮮事情,CSS 要經過編譯可以變成可繼承,可覆寫,可重複使用 mixin 的方式已經都是日常所見。 隨著框架的發展,大家有各自不同的搭配方式,在使用一小段 react 時間之後,我們採用過 radium...

本文參考至 Intro to the 8-Point Grid System 目前大多網站已使用類似 Bootstrap , Foundation 這類行 CSS framework 開發網站,甚至嘗試自己構建一些類似的系統。 但是當設置成更大的元素和內容時,會降低整體設計。也很難讓所有人都成為設...

  使用CSS設定網頁版型樣式,應該是許多網頁設計師共同語言,透過CSS所提供的選擇器,來設定網頁版型中的樣式,但是否常會遇到,明明已設定了新樣式,卻偏偏怎麼也無法套用,其實這跟優先權有關,雖然在CSS提供了許多不同的選擇器類型,當使用不用的選擇器時,它的優先套用順序也不同,因此梅干今天就來分享一下...

  先前曾分享過「Retina.js」這外掛,來解決Retina高解析螢幕在瀏覽網頁時,圖片自動切換成高解析,讓圖片看起來是細緻,而不會因此感到模糊或鋸齒,由於Retina螢幕的Device Pixel Ratio大於1,意思就是說在Retina的螢幕中所顯示的每個像素,與對應到的實際像素是超過1倍...

不知道大家有沒有注意到,這次的 Firefox 十週年活動網站上出現了一些特殊的動畫元素。這些元素不是 GIF 圖素,也不需要複雜的動畫套件,而是運用了 SVG 本身具備的動畫功能。 使用 SVG 來做動畫有幾個好處: 首先因為是向量圖形,所以任意縮放變形都不怕出現鋸齒顆粒。 多數向量繪圖軟體都支援...

RWD 全稱為 Responsive Web Design(適應性網頁設計),簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後,接下來小小分析一些常見的 RWD 流言,並不是說這些流言都是胡謅一通,但我們如果常因為流言中的一些負面模糊形容而卻步,很可能就錯失了...

接續上一篇所介紹的一些基本 CSS 排版小技巧,本文第一部分開始介紹 CSS media queries 常見的使用方式,以及一些在開發初期就要先注意的地方;第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉! 運用 CSS medi...

繼之前蓋索林大師的一個打十個系列文章,介紹了 Gaia WebApp 支援多種設備的技巧,本系列文章將深入介紹一些網頁適應性設計相關的通用工具及方法。如果你還不知道什麼是適應性設計,底下有簡潔的介紹。 什麼是適應性設計?它適合我嗎? 適應性設計 (Responsive Web Design,簡稱 R...

在八月份的七夕搭鵲橋活動裡,用網頁動畫呈現了牛郎織女團聚慶祝的畫面。不知道有沒有眼尖的網友發現,其實活動網頁裡的動畫效果都是運用 CSS animation 及 CSS transition 所做出的特效喔!揪~竟~要怎麼做出這些特效呢?讓我們繼續看下去。 這邊也順便工商服務一下,之前香蕉人也介紹...

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦! 登登登!傳說中的~視差動畫! 設定你的視差捲軸動畫 視差效果(圖片取自 Wikipedia) 先構思好動畫的進行方式,視差故名思義就是景物因遠近不同造成視線內移動速度的差異, 最常見的例子是在坐車時,距離較近...