CSS

  • CSS ::selection

    網站當滑鼠反白時,反白區域的底色通常是藍色,但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改,設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。

    p::-moz-selection { 
        color: red;
    }
    p::selection { 
        color: red; 
    }

    如上所示,您可以::selection對單個元素進行樣式設置。
    IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。
    Firefox 支持替代的::-moz-selection。

  • 手機眾多裝置的螢幕顯示大小不同,會因為排版時區塊及圖片可用百分比達到顯示等比縮放,但唯獨文字沒辦法設定依照顯示的百分比去做縮放。

    就因為這樣設計排版上,主要視覺區塊內的文字,大小設計剛好在區塊內,以不同顯示比例去看,區塊及圖片會因為設定成百分比而依照螢幕大小縮放,但文字確保持在您設定的大小,這就會產生區塊有自動縮放大小,文字卻沒有自動縮放大小,使得你設計的版面跑位或不是你所要呈現的設計樣子。

  • Font Awesome 的設計只需要簡單的應用Html語法,就可輕鬆在網頁加入ICON圖示。

    過去網頁設計師,需要為了網頁的小圖示,需要親手設計ICON,更或者需要在網路搜尋找尋適用的ICON,總是為了這小ICON傷腦經,現在Font Awesome將提供我們,無數的ICON圖示給我們運用,而且簡單輕鬆添加在你的網頁上。

    您可以將Font Awesome圖標使用在幾乎任何地方,只需要使用HTML class加入fa,空格後面再加上想要加上圖示名稱 。(圖示名稱可在Font Awesome官網搜尋到)

  • Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,並不負責在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸頁面在向下滾動的時候,有些元素會產生細小的動畫效果。雖然動畫比較小,但卻能吸引你的注意。如果你希望你的頁面也更加有趣,那麼你可以試試WOW.js。

    WOW.js依賴animate.css,所以它支持animate.css多達60多種的動畫效果,能滿足您的各種需求。

    瀏覽器兼容

    IE6、IE7 等老舊瀏覽器不支持CSS3 動畫,所以沒有效果;而wow.js 也使用了querySelectorAll 方法,IE 低版本會報錯。為了達到更好的兼容,最好加一個瀏覽器及版本判斷。

    開始使用WOW.js

    引入文件

    css

    <link rel="stylesheet" href="/ucamc/css/animate.min.css">

    js

    <script src="/ucamc/dist/wow.js"></script>