原文鏈接：https://dev.to/haycuoilennao19/50-tool-online-for-front-end-developer-5404

作者：Niemvuilaptrinh

如有翻譯不準，請多指正。

Browser Default Styles

在瀏覽器中，你可以找到HTML對象的默認CSS屬性。

Clippy

Clippy是一個在線工具，允許您為網(wǎng)頁設(shè)置CSS剪輯路徑屬性。

Keyframes CSS

CSS關(guān)鍵幀使得使用CSS關(guān)鍵幀創(chuàng)建基本到高級移動成為可能。

Neumorphism.io

Neumorphism.io通過將CSS屬性組合在一起來幫助你創(chuàng)建軟UI對象。

CSS Cursors

CSS Cursors是一個頁面，它顯示CSS中游標屬性的所有示例。

CSS Grid Generator

CSS?Grid Generator是一種工具，通過輸入工具提供的信息，可幫助你在CSS中輕松創(chuàng)建網(wǎng)格。

Placeholder Image Generator

Placeholder Image Generator可幫助你在圖像未顯示或等待在網(wǎng)頁中加載時為圖像創(chuàng)建占位符。

Html dom

Htmldom是純Javascript代碼的集合，可幫助你管理網(wǎng)站中的Htmldom。

HTML5 head elements

HTML5?head elements是可以找到頭部標簽中使用的所有屬性的地方，例如meta，圖標，社會性標簽...

Input Type Sandbox

Input Type Sandbox是可以檢查網(wǎng)頁中輸入字段的類型的地方，例如電子郵件，號碼，電話...

Meta Tags

Meta Tags 幫助自動導出流行的社交網(wǎng)絡(luò)的元標簽，如Facebook，Twitter，Google...供網(wǎng)站使用。

Can I Include

Can I Include?是一個Web應(yīng)用程序，可幫助我們確定HTML元素是否可以嵌套。

Key codes

Key codes是一個網(wǎng)站，可以在其中輕松找到按鍵碼，以從鍵盤上的按鈕設(shè)置事件偵聽器。

Color contrast checker

Color contrast checker是一個Web應(yīng)用程序，可幫助你檢查網(wǎng)頁設(shè)計中兩種顏色之間的對比度。

Git Command Explorer

Git Command Explorer是一個網(wǎng)站，可以根據(jù)選擇的信息輸出git命令。此外，它還對這些命令進行了更詳細的注釋，以便更輕松地理解。

Make thumbnails

Make thumbnails是一個Web應(yīng)用程序，可讓你輕松為圖像創(chuàng)建縮略圖。

Can I Email

Can I Email是一個網(wǎng)站，你可以在其中查看電子郵件中支持哪些HTML和CSS屬性。

Trianglify

Trianglify是一個在線工具，可幫助你的網(wǎng)站創(chuàng)建漂亮的背景。

CSS Layout

CSS Layout是一個網(wǎng)站，它收集了使用CSS設(shè)計的流行布局，以幫助你可以輕松的選擇網(wǎng)站的設(shè)計。

FANCY-BORDER-RADIUS

FANCY-BORDER-RADIUS是一個Web應(yīng)用程序，它允許你通過使用CSS邊框半徑屬性設(shè)置形狀來設(shè)計對象。

1loc

1loc是一個聚合解決方案的地方，用于解決在使用Javascript編程語言進行Web開發(fā)時經(jīng)常遇到的問題。

Color Namer

Color Namer是一個Web應(yīng)用，通過在網(wǎng)頁中以十六進制或rgb格式輸入該顏色信息來提供所需顏色的名稱。

Browser Framer

Browser Framer是一個Web應(yīng)用程序，允許你附加具有不同瀏覽器背景的屏幕截圖，以增加美感，并在查看照片時為用戶提供更逼真的感覺。

CSS Scan

為網(wǎng)站收集超過86種箱形陰影效果。

Favicon

幫助你的網(wǎng)站免費創(chuàng)建FavIcon。

CSS Filter

它可以幫助你使用CSS的過濾器屬性，為網(wǎng)站中的圖像對象設(shè)計顏色。

Simple CSS Media Query Generator

它聚合了當今流行的屏幕，從手機到平板電腦，臺式機，筆記本電腦...因此，你可以輕松地為CSS代碼選擇正確的媒體查詢。

Mix Font

使用“Mix Font”可以在組合時檢查字體之間的可見性。

Omatsuri

Omatsuri是設(shè)計師設(shè)計工具的集合，例如使用css創(chuàng)建三角形，wensite中的光標顯示樣式，HTML符號..

Underline Generator

幫助你使用CSS屬性創(chuàng)建漂亮的下劃線。

Checkboxes & Radios CSS Generator

Convert Images to Base64

Responsively

該工具可以同時在多個設(shè)備上檢查網(wǎng)站的可見性。

UI Design Daily

為網(wǎng)站收集漂亮的UI設(shè)計。

Devdocs

Devdocs是面向開發(fā)人員的流行編程語言文檔的集合。

Shortcode

Shortcode是編譯代碼片段以解決編程過程中常見問題的地方。

Public-apis

Public-apis是為項目提供免費數(shù)據(jù)的地方。

CSS Grid Layout Generator

這是一個工具，可以幫助你使用CSS輕松快速地構(gòu)建復(fù)雜的網(wǎng)格系統(tǒng)。

CSS Duotone Generator

此工具可幫助你設(shè)置圖像的CSS屬性，例如距離，不透明度，模糊度，圖像顏色...

CSS3 Generator

CSS3 Generator可幫助你快速創(chuàng)建復(fù)雜的屬性，例如框陰影，漸變，過渡...此外，對于每個屬性，它將提供有關(guān)該屬性的瀏覽器支持的詳細信息。

Box-model

Box-model是Codepen上的一個應(yīng)用程序，可幫助你在為Web中的對象設(shè)置填充，邊距和邊框?qū)傩詴r更直觀地查看。

Animated CSS Background Generator

Animated CSS Background Generator是一個工具，允許你使用提供的顏色創(chuàng)建動畫背景。此外，它還為你提供了一些其他設(shè)置，例如計數(shù)，大小，平均速度..

Web Code Tools

Web代碼工具是一種工具，允許通過輸入所需的屬性值來設(shè)置CSS中的通用屬性。此外，它還在預(yù)覽中提供了一個可視化示例，因此可以根據(jù)輸入的值輕松可視化結(jié)果

Enjoy CSS

Enjoy?CSS是一個工具，可以幫助你為網(wǎng)頁中的許多對象設(shè)置樣式，例如輸入，按鈕，塊...你的工作是選擇要設(shè)置樣式的對象，然后選擇CSS值。與該對象相關(guān)，結(jié)果將立即顯示。

CSS Portal

CSS Portal就像享受CSS頁面一樣，它是各種CSS生成器工具的集合，用于網(wǎng)站對象，例如FlipSwith生成器，文本漸變生成器，功能區(qū)生成器...

CSS3 Generator

CSS3?Generator是一個可以幫助你在網(wǎng)頁設(shè)計中設(shè)置常見屬性，例如陰影，濾鏡，變換....的工具。

HTML Table Generator

這是一個工具，可以輕松編輯網(wǎng)站中的表格組件。

Making CSS

Making CSS 是一個專門聚合工具的網(wǎng)站，可幫助輕松生成CSS。

CSS Masonry Generator

CSS Masonry Generator是一個砌體網(wǎng)格系統(tǒng)構(gòu)建器（如社交網(wǎng)絡(luò)pinterest），可以使圖像更加優(yōu)化。

Generator of CSS background patterns

這是一個可幫助你通過選擇提供的可用信息來輕松為網(wǎng)站構(gòu)建背景模式的工具。

The Hero Generator

這是一個工具，可幫助你通過CSS屬性輕松構(gòu)建包含圖像和內(nèi)容的標題。