SiteLocity 將網頁從外部引入的 CSS 合併並最佳化

SiteLocity 將網頁從外部引入的 CSS 合併並最佳化

網頁排版靠 CSS,為求可維護性,我們通常會將共用語法單獨寫在一個 CSS檔案,然後由網頁從外部引進使用,以便將來在維護時會較輕鬆且不會出錯,但從外部引進的 CSS檔案多了,卻會造成網頁加載緩慢的問題,SiteLocity 這個網站提供了 Critical Path CSS Generator 的免費功能,該功能可將網頁從外部引入的多個 CSS 檔案合併成一個並最佳化,而使用方式也非常簡單,使用者僅需輸入網址交由 SiteLocity網站掃描,便可以得到合併後的 CSS語法。

Urlcast.io 建立有時間倒數才要公開發布的網址

Urlcast.io 建立有時間倒數才要公開發布的網址

如果有網址想要在某特定時間公開,可以來試試 Urlcast.io 這個網站所提供的網址預約發布免費服務,欲使用該服務無須註冊且建立步驟也很簡單,使用者僅需輸入網址後,便可自訂標題並選擇要發布的時間,Urlcast.io 就會建立一個帶有倒數計時器的網頁並給出該網頁的短網址,當時間到之後,就會自動轉址到預計公開的網頁,同時,該短網址也就失效,因此若有商品優惠活動訊息要在特定時間公布,可以來試試。

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

瀏覽網頁之所以會覺得網站可能沒有回應,原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等,總之,在這之前如果適時地放上一個等待圖示或是加載中,請稍後...的字樣,都比讓用戶空等帶來的好,如果是要放等待動畫圖示,GIF 是個選擇,而另一選擇則是使用 CSS,Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示,喜患的就可以直接複製其 html 與 css語法,直接放到想要顯示的位置即可。

Instant Eyedropper 可擷取螢幕任何位置顏色的免費工具

Instant Eyedropper 可擷取螢幕任何位置顏色的免費工具

想要取得電腦螢幕上任一點的顏色,可以來試試 Instant Eyedropper 這套可擷取顏色代碼的免費的工具,使用上相當簡單,只要是目前在電腦螢幕上的任何應用程式、桌布、網頁或是正在播放的影片,都可以使用滑鼠游標指到想要取色點即可。
目前支援下列類型的顏色代碼:

  • HTML
  • HEX
  • Delphi Hex
  • Visual Basic Hex
  • RGB
  • HSB
  • HSL

24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

「Google Fonts」用 Noto Emoji 字型將表情符號或特殊圖示以線條輪廓來呈現

在聊天室或是社群網站發文、留言所看的表情符號或特殊圖示都是彩色的,如果想在網頁中改變這類型符號或圖示的顏色或大小,我們可以來使用 Google Fonts 針對這類表情符號與特殊字型所推出的 Noto Emoji 雲端字型,透過其系統化的整理,使用者可以將這類表情符號、特殊圖示改以清爽的線條方式來呈現,並可以利用字重的設定方式來改變圖示或字型輪廓線條粗細,如果再搭配 Windows 系統內建的「表情符號」功能,讓表情符號的應用就更加方便了。

 訂閱/追蹤

 站內搜尋

˄