CSSnippets:CSS 範例精選,附 HTML、React 及 CSS 程式碼

CSSnippets:CSS 範例精選,附 HTML、React 及 CSS 程式碼

CSSnippets 是一個提供 CSS 範例的免費網站,專門收錄多種常用的 CSS 樣式和效果,包括 Button、Box-shadow 、Card、Checkbox、Dropdown、Input-fields、Loading-spinner、Radio、Text 及 Toggle Switches 等。所有範例都可以在 CSSnippets 網站上直接操作,並顯示實際應用效果。使用者只需根據所需的 HTML 元件類別或 CSS 效果,尋找相應的範例,然後將範例中提供的 HTML、React 及 CSS 程式碼複製到自己的專案中,非常方便。

CSS Loaders:提供網頁載入動畫範例,附完整程式碼

CSS Loaders:提供網頁載入動畫範例,附完整程式碼

CSS Loaders 收錄了超過 600 個以 CSS 製作的載入動畫範例,並根據形狀或動作分為近 40 種分類,包括 Classic、Dot、Bar、Dot VS Bar、Spinner、Shape、3D、Progress、Wobbling、Infinity、Zig-Zag、Wavy、Flipping、Pulsing、Cut、Blob、Arrow、Maze 及 Line 等。每個 Loader 都可以在線上預覽,並且一鍵就能複製所需的 CSS 語法以供後續使用。

Canva 免費寫網站神器來了!AI 寫程式、直接發佈、網址自己選

Canva 免費寫網站神器來了!AI 寫程式、直接發佈、網址自己選

Canva 現在不只是平面設計工具!還能幫你寫程式並直接發佈成網站!全新推出的「Canva AI 寫程式功能」,讓使用者只須描述程式功能就能由 Canva AI 在平台內編寫 HTML、CSS 和 JavaScript,快速完成小型 Web 應用程式、互動頁面或簡易應用,並且一鍵發佈成真正的網站,開啟網址後任何人都可以瀏覽與使用,不需架設伺服器、不需設定網域,就能以自己的 Canva 子網域(如:你的名稱.my.canva.site)直接分享程式作品,實現「零門檻網站開發」的願望。

acefreefonts 免費英文字型,可先預覽或直接下載

acefreefonts 免費英文字型,可先預覽或直接下載

有相當多的網站有提供免費英文字型的下載服務,像是 FontenniumFontSpace,再進階點的像是 Google Font Directory 由 Google 所提供的 CSS 英文字型,讓網頁字型應用更簡單 都提供了相當不錯的英文字型,可供下載,acefreefonts 也提供了 A - Z 相當豐富的字型下載服務。當然若是在電腦裝了很多字型,當要運用時,也可以透過像是 FontViewOK 字型檢視工具,檢視所有字型﹝免安裝﹞或是 Font.colorfull 線上字型檢視器,一次列出所輸入的文字所有字型樣式 等工具來協助,找出最適合的字型。如果需要中文的字型,也可參考 免費中文字型下載﹝王漢宗教授自由字型﹞教育部標準字體3套,免費中文字型下載 或是 「中文全字庫」免費的書法字型下載。若在 Windows 內安裝字型有困難請參閱 如何在Windows7安裝新字型

如何在網頁裡使用 Adobe 所推出的 Edge Web Fonts 免費網頁字型服務?

如何在網頁裡使用 Adobe 所推出的 Edge Web Fonts 免費網頁字型服務?

網頁中的字型呈現,都是以瀏覽者電腦有安裝的字型為主,因此,即便是網頁製作時,所使用的字體有多美觀,除非瀏覽者的電腦有相同的字型。為解決此一困擾,因此便有網頁字型託管服務,像是 Google web fonts 由 Google 所提供的網頁字型應用服務 便是一例,現在,Adobe 也推出的 Edge Web Fonts 免費網頁字型託管服務,提供超過 500 種以上的免費字型,其中也包含所有在 Google Web Fonts 裡的開放原始碼字型,使用時,只需要將其生成的 JavaScript 語法複製到網站裡,便能以 CSS 的 font-family 方式來使用該字型,相當方便。

alwane.io 擷取網站 CSS 內的顏色代碼

alwane.io 擷取網站 CSS 內的顏色代碼

想要取得網站所搭配的顏色代碼,最快速的做法就是將網頁擷取成圖片,然後透過圖片編輯器內的取色工具去取得顏色代碼,另外一種就是去讀取該網站內含的 CSS,前者取得的色彩可能有偏差,而後者又很麻煩,但取得的顏色代碼絕對正確,而現在後者這麼麻煩的動作,可以由 alwane.io 這個網站來幫你代勞了,使用者只需要將網址輸入,該網站就會自動幫你擷取 CSS 內所有的顏色代碼,並且將相近的顏色以色塊的方式進行分組呈現,另外,如果是已知的 CSS 或是顏色代碼,也可以直接貼到 alwane.io 網站來分析。

BigImg.it 線上圖片轉貼並可重設圖片尺寸及顯示位置的免費服務

BigImg.it 線上圖片轉貼並可重設圖片尺寸及顯示位置的免費服務

想要轉貼網頁上的圖片,通常在取得圖片的原始網址後來進行轉貼,但對於不熟 HTML 或 CSS 語法的人來說,想要轉貼圖片其實也是種困惱,BigImg.it 網站就提供了免費圖片轉貼語法產生服務,只要取得原始圖片的網址後,就可重新設定圖片尺寸大小及定義圖片顯示位置,並在設定後,產生 iframe 語法,複製該語法就可以貼到自己網頁裡想要顯示圖片的位置。

Blend-CSS 漸層色彩 CSS 語法產生器

Blend-CSS 漸層色彩 CSS 語法產生器

網頁有需要使用色彩漸層來布置時,有些人會使用圖片來避開因不同瀏覽器對 CSS 支援各有不同的問題,但也有網站採主要瀏覽器才支援的 CSS 語法來支應,Blend-CSS 是一個可以線上產生漸層色彩的 CSS 語法產生器,操作方法非常直覺,透過設計好的左、右可選不同色彩的介面,直接就可混合成漸層色彩,且可直接預覽,滿意後,就可複製其產出的 CSS 語法,放到網頁要應用的地方,相當方便。

border radius 圓角框 CSS 語法線上產生器

border radius 圓角框 CSS 語法線上產生器

CSS 版本進展到 CSS3.0,讓以往需要靠圖片來輔助才做得到的效果,變得只需用 CSS 即可,例如邊框特效、色彩展示、圖形變化、動畫、轉換特效、文字色彩、文字陰影、區塊陰影、文字旋轉...等,不過標準有了,語法的學習上卻變成是個門檻,還好,線上有很多關於 CSS 產生器,像是按鈕、陰影、圓角...等,如果對 CSS 語法陌生,又想產生圓角邊框,可以來試試 border radius 這個線上的 CSS 圓角框產生器,簡單方便。

BrandColors 下載知名網站所使用的顏色 CSS

BrandColors 下載知名網站所使用的顏色 CSS

網站的製作不論是初學程式或已經是高手,可能都會覺得寫 Code 來實現功能會比對網站整體顏色該如何配置來的簡單許多,因為,如何用色才能得滿分,始終是沒有標準答案的,只能說用傳統常見的顏色呢就是中規中矩,若用色大膽,有人欣賞就是創新,沒人欣賞就便垃圾了。當然,我們也可以到 BrandColors 這個網站來參考與了解知名網站是如何進行顏色搭配的,若覺得喜歡,也可下載該網站的用色 CSS 檔案,方便後續的應用。

Buttons 線上 CSS 按鈕產生器

Buttons 線上 CSS 按鈕產生器

製作網頁時,難免會有需要讓使用者點擊的地方,若只是用文字來敘述,雖然簡單明瞭,但卻顯得單調,想要放個按鈕圖示,但卻又礙於要使用圖片,牽涉較廣,若有這些問題,可以來試試這個可以說是 CSS 按鈕寶庫的 Buttons 線上 CSS 按鈕產生器,不但提供 Flat、Glow、Rounded、3D、Border、Pill、Circle、Dropdown(下拉選單)、icon、Square、Block 等各式各樣的按鈕,且配色相當豔麗,使用上更是簡單,只需在網頁特定位置,載入相關連結後,複製想要使用的按鈕樣式到網頁想要應用的位置即可。

Call-to-Action Button Generator - CSS 按鈕產生器

Call-to-Action Button Generator - CSS 按鈕產生器

對初學網頁製作的人來說,當需要對「按鈕」元件進行美工時,若能參考別人寫好的 CSS Code 是一個事半功倍的好方法。Call-to-Action Button Generator 是一個可即時預覽的 CSS 按鈕線上產生器,不但提供按鈕顏色、文字、陰影、ICON 等屬性自訂外,還可自動產生所需的 CSS Code 與 PNG 圖檔,讓使用者方便影用到網頁的任意處,相當方便。