Äầu tiên mình xin gá»i lá»i 🌸CHÚC MỪNG NÄ‚M MỚI🌸 tá»›i cá»™ng đồng ngÆ°á»i dùng Viblo! KhaiButDauXuan
Chúc má»i ngÆ°á»i năm má»›i đầy may mắn, thà nh công và hạnh phúc. Hy vá»ng trong năm má»›i 2023 nà y, chúng ta sẽ cùng nhau há»c há»i và chia sẻ kiến thức để cùng nhau phát triển. HAPPY NEW YEAR 🥰
Hôm nay mình sẽ chia sẻ cho má»i ngÆ°á»i má»™t loạt các Tools hữu Ãch cho ae Front-End Dev mà mình rất hay sá» dụng.
1. CSS Gradient
CSS Gradient: Công cụ nà y giúp bạn tạo mà u Backgroud dá»… dà ng cho trang web của bạn. Bạn có thể chá»n và chỉnh sá»a các mà u để tạo ra mà u ná»n hoà n hảo, và công cụ sẽ còn tạo ra code CSS cho bạn.
2. Animista
Animista: Bạn muốn thêm một số hiệu ứng và chuyển tiếp động độc đáo và o trang web của mình? Animista sẽ giúp bạn. Nó có một thư viện các hiệu ứng CSS đã sẵn sà ng để bạn sỠdụng và tùy chỉnh theo ý muốn của bạn. Khi hà i lòng với hiệu ứng Animation mà bạn mong muốn thì chỉ cần copy code css là ok quá tiện.
3. Neumorphism
Neumorphism: Công cụ nà y giúp bạn tạo thiết kế bằng phong cách “neumorphism” phổ biến. Bạn có thể chá»n và chỉnh sá»a mà u sắc, kÃch thÆ°á»›c, bán kÃnh, khoảng cách giao diện và nhiá»u hÆ¡n nữa để tạo ra giao diện CSS má»m mại cho thiết kế của bạn.
4. Get Waves
Get Waves: Nếu bạn muốn thêm má»™t số hình dạng lượn sóng và o trang web của bạn, Get Waves là công cụ hữu Ãch dà nh cho bạn. Bạn có thể tạo và tùy chỉnh các hình dạng lượn sóng SVG và sau đó sao chép mã SVG để sá» dụng nó.
5. Shadow Brumm
Shadow Brum: Công cụ nà y cho phép bạn tạo ra bóng đổ CSS mượt mà , là m cho thiết kế của bạn trông tháºt tuyệt vá»i hÆ¡n.
6. CSS Clip-path Maker
CSS clip-path maker: Thuá»™c tÃnh clip-path cho phép bạn tạo các hình dạng phức tạp trong CSS bằng cách cắt má»™t phần tá» thà nh má»™t hình dạng cÆ¡ bản (hình tròn, hình elip, hình Ä‘a giác…), hoặc từ má»™t nguồn SVG.
Hiệu ứng hoạt há»a và chuyển đổi CSS có thể thá»±c hiện vá»›i hai hoặc nhiá»u hình dạng clip-path có cùng số Ä‘iểm.
7. PurgeCSS
PurgeCSS: PurgeCSS là một công cụ để loại bỠCSS không sỠdụng trong dự án của bạn.
8. CSS Scan
CSS Scan: Cách nhanh nhất và dá»… nhất để kiểm tra, sao chép và chỉnh sá»a CSS.
9. Fancy Border Radius Generator
Fancy Border Radius: Khi bạn sỠdụng tám giá trị để xác định border-radius trong CSS, bạn có thể xây dựng các hình dạng có hình dạng tự nhiên. WOW 😱.
10. CSS Grid Generator
CSS Grid Generator: Bạn có thể thiết láºp số lượng và đơn vị của các cá»™t và hà ng của bạn, và tôi sẽ tạo ra má»™t lÆ°á»›i CSS cho bạn! Kéo trong các há»™p để tạo ra các div được đặt trong lÆ°á»›i.
11. Flatuicolors
Flatuicolors: Flat UI Colors có 13 bộ mà u sắc khác nhau. Hợp tác với 13 nhà thiết kế trên toà n thế giới, tổng số 280 mà u có thể COPY/PASTE một cách giễ dà ng.
12. Icon-icons
Icon-icons: Giúp bạn tìm biểu tượng cho các dá»± án của bạn, ứng dụng, tạp chÃ, bức tranh quảng cáo hoặc bất kỳ mục Ä‘Ãch khác… Bạn có thể tải chúng vá» dÆ°á»›i dạng định dạng png, ico, icns hoặc svg.
13. Flex-tuan200
Flex-tuan200: Äây là tool dà nh cho anh em nà o má»›i táºp dùng Flex CSS. Tool nà y trá»±c quan hoá má»i thứ khiến Flex trở nên giá»… dà ng hÆ¡n bao giá» hết. (Cái nà y mình rất hay sá» dụng 🤣 nhìn váºy thôi nhÆ°ng nó khá tiện)
🌸CHÚC MỪNG NÄ‚M MỚI – HAPPY NEW YEAR🌸
Nguồn: viblo.asia