CSSGradients 用 CSS 調配出萬個漸層色模板,讓你隨時取用

CSSGradients 用 CSS 調配出萬個漸層色模板,讓你隨時取用

色彩的運用不論是採純色、漸層色或兩者搭配都是不錯的選擇,以網頁要使用漸層色來說,可以使用圖片亦可以使用 CSS 語法來產生,CSSGradients 這個網站免費提供 11000+個以 CSS 語法配置好的漸層色彩模板,使用者僅需選擇要使用的色彩模板,就可以複製該模板的 CSS 語法,運用到網頁任何位置,相當方便。

繼續閱讀»»»

Countdown Timer 在網頁上放個倒數計時器

Countdown Timer 在網頁上放個倒數計時器

辦活動的網頁,如果可以適時的放上倒數計時器,藉以提醒有興趣的網頁訪問者,絕對有加分的作用,那麼要放到網頁的倒數計時器該如何製作呢?這就不用傷腦筋了,透過 TickCounter 網站旗下的 Countdown Timer 服務,便可以輕鬆完成,使用者除了可以自訂倒數計時器的名稱、終止時間及顏色樣式,還能直接產生嵌入網頁的程式碼,更棒的是該程式碼還支援自適應網頁( RWD,Responsive web design ),讓使用者即便是在行動裝置上也能瀏覽。

繼續閱讀»»»

CSS Tooltip Generator 提示訊息框 CSS 語法產生器

CSS Tooltip Generator 提示訊息框 CSS 語法產生器

瀏覽網頁時,當我們看到帶有 ? 的圖示符號,通常將滑鼠指標指過去就會出現提示框,而其內容是解釋其意義或是提示使用者該如何操作等,而其出現的位置,可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言,要產生這樣的提示框並不容易,但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站,使用者僅需修改簡單的參數,便可以快速產生自己理想中的提示框,然後複製其產生的 CSS 語法,就可以應用到網頁內,相當方便。

繼續閱讀»»»

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

常可以見到在網路上關於 CSS 排版的提問,例如元件在容器內如何橫排、對齊或是自動縮放等問題,而這些問題幾乎都可以使用 CSS Flexbox 來解決,那什麼是 Flexbox 呢?簡單的說就是將容器的 display 屬性設定為 flex,再透過 flex 的相關屬性來決定容器內的元件要如何排版,所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性,如果是 CSS Flexbox 的初學者建議先看 圖解:CSS Flex 屬性一點也不難 這篇文章,因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法,你也可能需要對 flex 屬性有基本的認識,即便是不全,在實際操作該網站後,便可以完全釐清疑問,增加自己對使用 flex 排版的功力。

繼續閱讀»»»

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

在網頁中如果要用圖示,例如電話、郵件或是箭頭,以往的做法就是要有該圖示的圖片檔,將其放在指定的位置,但隨著螢幕大小多元化,固定尺寸的圖示圖片檔,缺點盡顯,除了佔用流量外,亦無法滿足螢幕大小的變化,因此將圖示如同網頁字形般的運用,是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集,CSS.GG 這個網站同樣提供免費的字形化圖示集,使用者可以自訂顏色、尺寸,再透過其所提供的 HTML,CSS、SVG 或是 TSX 語法就能應用到網頁上。

繼續閱讀»»»

Grid-Generator 可自訂網頁結構的版型產生器

Grid-Generator 可自訂網頁結構的版型產生器

網路上有很多免費的網頁模板可供下載,套用的方式也不複雜,但如要修改其中的版型結構,可能就有點門檻,而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾,但不論利用何種版型,如要套用模板,就需要找到相類似的模板,不然就是自己改,太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式,視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等,到最後產生該網頁版型的 CSS 樣式表,讓你不論用何種的網頁開發工具,都能輕鬆靈活的套用該 CSS,加快生產力。

繼續閱讀»»»

請輸入關鍵字


請選擇訂閱工具...


˄