Transform Tools:數據描述格式轉換線上工具,支援SVG、HTML、JSON、CSS等多種

Transform Tools:數據描述格式轉換線上工具,支援SVG、HTML、JSON、CSS等多種

Transform tools 是一個免費的線上工具,專為轉換用於網頁開發與數據描述格式而設計。例如將 SVG 轉成 JSX、HTML 轉成 JSX、JSON 轉成 TypeScript 或是 JSON 轉 MySQL 及 CSS 轉 TailwindCSS 等。Transform tools 平台目前可以對 SVG、HTML、JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 及其他,例如 Markdown to HTML 等。每種主要格式可轉換的格式各有不同,例如:JSON 格式可轉出一個 Create table 的 MySQL Script,免除還要手動的改寫的麻煩。

Free HTML 404 page templates 網站 404 網頁免費模板

Free HTML 404 page templates 網站 404 網頁免費模板

Free HTML 404 page templates 是個免費提供 404頁面模板的網站,使用方式很簡便,只需在網站上瀏覽並選擇自己喜歡的模板,就可以使用 CodePen 進行預覽並可以根據自己的需求,修改模板的顏色、字體、圖像等元素,以便與自己的網站風格相匹配。一旦滿意了修改後的模板,只需複制所需的 HTML、CSS 及 Javascript 語法,然後將其貼到網站中相應的 404 頁面即可。

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

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

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

AjaxDaddy 精選的Ajax範例展示網站,並可將程式碼加到自己的網頁中

AjaxDaddy  精選的Ajax範例展示網站,並可將程式碼加到自己的網頁中

AjaxDaddy 是一個專門蒐集Ajax程式碼並將它寫成可在網頁中展示其效果的範例,讓想要使用這些Ajax程式碼的網站只要參考其範例就可以很輕易的就將它放到自己的網頁上。AjaxDaddy 網站內有非常明確的分類,包含有手風琴(accordion)、自動完成(autocomplete)、圖形(charts)、菜單(menu)、分頁(tabs)、提示(tooltip)...等20多個分類,想要在網站上添加一些Ajax效果的朋友,可以試試!

ClockLink 在部落格或網頁裝上時鐘

ClockLink 在部落格或網頁裝上時鐘

很多人會在自己的網頁或是部落格放上一些裝飾用的元件,例如天氣預報、音樂、線上即時人數或是時鐘等等,避免自己的版面過於單調,也能提供訪問者即時的資訊。ClockLink 是一個線上提供時鐘的免費網站,各式各樣造型的時鐘圖樣,絕對有你滿意的,且均提供連結的 JavaScript Code 及 embed 內嵌程式碼,方便放到網頁裡。

CDNJS 網站開發資源託管免費服務 CDN

CDNJS 網站開發資源託管免費服務 CDN

網站開發免不了都要使用到 JavaScript、CSS、SWF、images 等專屬前端網頁的開發應用,例如 JQuery 程式庫,若自己的網站流量夠大,當然可以將其下載到自己網站上來應用,若想節省自身網站的流量,也可以在網頁裡直接引用有提供 CDN 的網站上的程式庫,像是 Google CDN 或是 Microsoft runs their own CDN,若在前述兩個網站上找不到要應用的資源,可以到 CDNJS 網站上找找看,其穩定性與效能也還算不錯喔。

Content Parser Website 解析並提取網頁內的 Markdown、Html 或 Text

Content Parser Website 解析並提取網頁內的 Markdown、Html 或 Text

網頁內包含 HTML、JavaScript 及主要內容還有就是用來排版的 CSS語法,因此當檢視網頁原始碼的時候這些全部都會出現,而 Content Parser Website 這個網站可將網頁解析、篩選過雜結構並單純提取成 Markdown 標記式語言、Html 語法或是 Text,使用方式很簡單,僅需輸入網址選擇要提取的格式,就可以在線上預覽提取後的各種格式,方便使用者做後續的應用。

CSS Button Designer 輕鬆製作網頁使用的按鈕樣式

CSS Button Designer 輕鬆製作網頁使用的按鈕樣式

想要在網頁上對「Button - 按鈕」進行樣式調整,通常會使用背景圖片或是使用 CSS 來調整按鈕的外觀,若要加上當滑鼠移到按鈕的上方或是離開,也會使用 Javascript 來加上,若對繪製這些圖片、Javascript 都不是很熟悉的話,還是要花一些時間來製作,若是偶而用用,建議可以到 CSS Button Designer 這個免費的按鈕樣式產生器來製作,除了可使用 CSS 改變按鈕樣式,也提供滑鼠移到按鈕的上方或是離開時的 Javascript ,製作完成後,直接複製所產生的 Code 便可應用的網頁裡,相當方便。

CSS WAND - CSS 動畫免費應用

CSS WAND  - CSS 動畫免費應用

如果網頁要使用一些動畫圖示,例如滑鼠移動按鈕上方,按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示,這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現,而現在你也可以單純利用 CSS 語法就可辦到,CSS WAND 提供 Hover、Loading 類型的 CSS 動畫,只要複製該範例的 CSS 語法,就可以將範例應用到自己的網頁,相當方便。

如何用 CSS 做出滑動開/關切換按鈕?

如何用 CSS 做出滑動開/關切換按鈕?

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕,如果自己在網頁上要做出如此效果的按鈕,免用 Javascript 就可以辦到,proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器,透過介面輸入所需條件,便可產生 CSS 語法,方便你應用在網頁上。

littlesnippets.net 免費取得 CSS、JavaScript 動畫效果程式碼

littlesnippets.net 免費取得 CSS、JavaScript 動畫效果程式碼

寫網頁時難免會有需要一些動畫效果,例如當滑鼠指標在按鈕、圖片、功能表上或離開時,或是希望做出具有專業水準個人檔案、新聞、產品卡時,如果是初學者想要從無到有,可能需要花費較長時間,要是可以參考別人已做出的效果,取得其程式碼再來修改成自己想要的效果,這樣才能事半功倍。littlesnippets 這個網站提供按鈕、圖片、Logo、News Card、Menu、Profile Card ....等各式各樣的 CSS + JQuery 效果,且每個都有效果展示,更提供 HTML、CSS、JQuery 完整的範例程式碼,用戶只需取得這些程式碼,稍加修改,就可以在自己網頁呈現,相當方便。

angryTools CSS Animation Kit 純 CSS 語法動態特效產生器

angryTools CSS Animation Kit 純 CSS 語法動態特效產生器

寫網頁時,當需要應用一些特效,例如標題文字會閃動、旋轉等,以吸引讀者的注意,很多人都會考慮使用 JavaScript 來實現,如果要透過 CSS 來呈現,對 CSS 語法不熟悉,則變成是一個困擾,即便寫出,還要考慮各大瀏覽器的支援程度。angryTools 網站提供 CSS Animation Kit 產生的文字特效,支援 Edge、Chrome 主要瀏覽器,選好效果可立即檢視與產生 CSS 語法,複製即可使用,簡單方便。