網頁設計

網頁設計師必學的五個 CSS 動畫庫

網頁設計 / 作者: /

俗話說，工欲善其事必先利其器，對現在的網頁設計師來說，為畫面增加一些微互動的動態效果已經是時勢所趨，但 CSS 不比 Flash，需要透過 Code 的方式才寫出動態的效果，對很多視覺設計師來說是一道門檻，所幸網路上已經有很多資源將類似的動畫需求整合起來，只需要用點心去尋找，就可以找到許多功能強大的 CSS 動畫庫，下面我們挑五個比較有名且實用的來介紹。

全平台網站 icon 生成器

好工具不嫌少、網頁設計 / 作者: /

記得早期做網頁的時候，網站完成後會另外畫一個 16×16 的小 icon，這個小 icon 會出現在網址列及我的最愛中，取代瀏覽器原本的預設 icon，成為一個私人的小特色。但後來由於設備的發展一日千里，手機、平板、iOS、Android、MAC、Windows 等等，每種平台對這些小 icon 接受的大小、格式及規範都有些許不同，如果要個別針對這些平台去製作小 icon 變得有點麻煩，且不一定有相關的設備可以提供測試，這時，該怎麼辦呢？

如何讓 Google Map 支援 RWD 的效果

工作、網頁設計 / 作者: /

我們在製作一些與行程或地點有關的網頁時，有時候會希望附上相關的地圖，好方便使用者了解附近的地理位置及規劃路線，這類的地圖應用以 Google Map 最常見，但 Google Map 內嵌到網頁的方式是使用 iframe，對一般的網頁也許不受影響，但如果遇到 RWD 的網頁時，就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例，這時，你可以試試下面的方式。

如何製作一個吸頂式的選單列

Javascript、網頁設計 / 作者: /

一個好用的選單系統，可以幫助使用者快速找到所需的內容，如果你經常觀察網頁的趨勢，因該很容易發現許多網站開始將選單列常駐在頁面的頂部，而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時，不用為了點選選單而去捲動頁面，算是一個很貼心的 UX 規劃。做法也有很多種，從純粹的 CSS 到 Javascript 都有，網路上也有很多現成的範例，下面我們以 On Scroll Header Effects 為例：

如何自訂 Scrollbar 的捲軸樣式

Javascript、網頁設計 / 作者: /

在規劃活動網站的設計時，會常遇到需要放置一些注意事項或者活動辦法的訊息，這類資訊通常會比較長篇，內容也比較乏味，但它對活動網站來說又很重要。如果沒有經過適當的整理，往往都會佔據較大的頁面空間，造成編排上的麻煩。因此大多數的時候，網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內，讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題，那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比，如果沒有經過特別的處理會顯得非常突兀，而 jQuery custom content scroller 是一個 jQuery 的外掛，可以用來自訂上述所需的 Scrollbar 捲軸樣式，讓你在設計畫面時，可以配合網站的視覺來調整適當的 Scrollbar 樣式。

如何同時 Hightline 表格中的行及列

網頁設計 / 作者: /

要將表格中的某一行 Highlight 起來很容易，你只要 tr:hover{background:yellow;} 就可以完成。但，如果你想同時 Highlight 行及列的時候，麻煩就會出現，因為在現有的 HTML & CSS 中，沒有針對「列」的設定。關於這個問題 MATT WALTON 提出一個解決的方式。

CSS 屬性選擇器-新手入門篇

網頁設計 / 作者: /

大多數的 HTML 標籤都包含相對多組的屬性，例如常見的連結 a 標籤可以加 href、style、target、title 等屬性，而 CSS 屬性選擇器可以讓 CSS 依屬性的差異給予該標籤不同的設定，這樣做一來可以減少 class 或 id 的使用，讓 HTML 更加精簡好閱讀，二來可以增加維護的便利性，三來可以更便利的控制網頁上的每個元素，好處不少。

Scroll to Top