Copy & Paste CSS 線上提供 Buttons、Box-shadows 及 Color palettes 已搭配好的 CSS 樣式,複製就可以使用

Copy & Paste CSS 線上提供 Buttons、Box-shadows 及  Color palettes 已搭配好的 CSS 樣式,複製就可以使用

階層樣式表 (Cascading Stylesheets;CSS) 主要用來塑造網站的特殊風格,例如有段文字要用紅色來標明重點或是網頁版面要呈現2欄或 3欄的架構等等,對初學者而言參考別人寫好的 CSS 語法,可以快速增加對 CSS 的靈活運用,「Copy & Paste CSS」 是個提供 Buttons 及 Box-shadows 的模板網站,使用者可以透過其展示的樣式,如果符合自己的需求,便可以複製其 CSS語法,然後套用到自己的網頁,另外,該網站的 Color palettes 還提供已搭配好的顏色組合,供你複製帶走。

CSS Grab n' Go Editor 可視化 CSS 語法產生器

CSS Grab n&#39 Go Editor 可視化 CSS 語法產生器

階層樣式表 (Cascading Stylesheets,CSS) ,最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式,讓同一個元素可以有不同的樣貌呈現,不過對於初學者而言,要了解整個 CSS 語法規則並不容易,除了時間之外,如果有輔助的工具可以協助,相信可以更快的跨過門檻,CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器,其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化,用戶可以透過可操作的面板進行屬性值變更,且立刻可看到所產生的變化,完成整個調整,還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法,快速套用到元素上。

Beautiful CSS box-shadow examples 線上 box-shadow 模板,CSS 語法免費帶走

Beautiful CSS box-shadow examples 線上 box-shadow 模板,CSS 語法免費帶走

網頁在呈現方框、線條、文字等元素時,如果可以適時的加入陰影,就可讓該元素有立體效果的展現,Beautiful CSS box-shadow examples 這個網站做出了 80 多個 box-shadow 模板,使用者僅需要挑選適合自己網頁呈現的樣式,完全不必再經過任何的調整,就可以將 CSS 語法帶走,套用到自己的網頁內,快速又方便。

HTML Table Styler 📅 CSS Generator 免費互動式的 HTML 表格與 CSS 線上程式碼產生器

HTML Table Styler 📅 CSS Generator 免費互動式的 HTML 表格與 CSS 線上程式碼產生器

對 HTML 的初學者來說,如果有 HTML 與 CSS 相關的工具來輔助入門,將可事半功倍,以網頁的製作來看,通常都少不了 table 與 div 的應用,如果要有些變化,就需要在色彩、框線、文字、背景等多加著墨,HTML Table Styler 📅 CSS Generator 是一個免費互動式的 HTML 表格與 CSS 線上程式碼產生器,透過操作方便的調整介面,就能產生出 Gradient、Box Shadow、Text Shadow、Color、Font、Table、Column Border、Border Radius、Transform、Background 各種樣式,每種均可產生 HTML、CSS Code,且可預覽,另外,針對 table 要改用 div 也提供轉換器,讓初學過程大幅減短,兼顧工作效率。

Enjoy CSS 線上 CSS 語法產生器

Enjoy CSS 線上 CSS 語法產生器

CSS 是可以用來排版與美化網頁內各種元素的腳本語法,不論是整體布局或是內含元素的美化,均需要透過 CSS來完成,而 CSS 語法說難不難,說簡單也不簡單,尤其是對專攻程式或初學者的用戶來說,還是有學習門檻的,但還好網路上這方面的輔助工具有不少,EnjoyCSS 便是其中的一個,透過該網站所設計的介面,使用者僅需調整所需要參數,便可以輕鬆產生網頁常用到的元素,像是文字、輸入欄、按鈕、區塊會使用到的 Text、Background、Shadows、Border and Radius、Transition、Transform 等效果的 CSS 或是 LESS、SCSS 腳本語法,且還提供各瀏覽器所支援的程度,讓你可以快速佈局到自己的網頁內。

讓 Google 用 AI 帶你體驗手影戲的藝術樂趣

讓 Google 用 AI 帶你體驗手影戲的藝術樂趣

估計多數人在小時候都有玩過用手勢透過太陽或燈光的投影做出各種造型的影子遊戲,而現在這種遊戲也被 Google 搬到 Web 上,Google Shadow Art 網站是一個利用電腦上的網路攝影機教你用手做出 12生肖的影子,並利用人工智慧的判別方式,就會知道你做的手勢正確不正確,並顯示該生肖的動畫,最後還幫你做出一張卡片,想當有趣,還未體驗過人工智慧在各方面的應用嗎?可以先到這裡玩玩。

CSS Portal 線上 CSS 按鈕、圓角、選單、框架語法產生器

CSS Portal 線上 CSS 按鈕、圓角、選單、框架語法產生器

對學習 CSS 來說,不論是初學或是要進階,有可以參考的語法是相當重要的,畢竟各家瀏覽器支援的 CSS 語法不見得相同,CSS Portal 是一個提供網頁常用到的 CSS 的語法產生器,包含 CSS Box Shadow、CSS Button、CSS Gradient、CSS Flip Switch、CSS Menu、CSS3 Menu、CSS RGBA、CSS Ribbon、CSS3 Rounded Corners、CSS Sprite 、CSS Text Rotate、CSS Text Shadow 、CSS Tooltip 、Layout 、Style Input Range 讓你在製作網頁時,可以即時預覽樣式與語法。

Flatty Shadow 線上 ICON 圖標產生器

Flatty Shadow 線上 ICON 圖標產生器

做網頁若都有只有文字,即便是功能齊全,也會讓人覺得不友善,適度的使用一些 ICON 來幫襯,不當可美化網頁,也更能貼近使用者,網路上有很多類似的網站,不過大多是固定尺寸、顏色,即便是要調整還是需要花點時間與學習。Flatty Shadow 是個 ICON 線上生成器,透過其所提供的工具,可動態產生自己想要的圖標,讓圖示風格可以一致化,讓作品看起來更具質感。