- vừa được xem lúc

🌸Đầu xuân chia sẻ cho ae FE kho HÀNG KHỦNG - Useful Front-End Development Tools🌸

0 0 23

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

Đầ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🌸

Bình luận

Bài viết tương tự

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 436

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 57

- vừa được xem lúc

Xóa phần tử trong Array JavaScript

Xóa phần tử trong Array JavaScript là một bài toán mà hầu hết mọi người đều gặp phải khi lập trình JavaScript. Để giải quyết bài toán này, JavaScript cung cấp rất nhiều giải pháp khác nhau.

0 0 49

- vừa được xem lúc

Bài 28 - Hiểu chính xác về Responsive Web Design và cách chia khoảng màn hình

Chào các bạn, thuật ngữ Responsive Web Design có lẽ không còn xa lạ gì với mọi người nữa. Bất kỳ ai làm về web đều đã từng làm hoặc ít nhất là nghe tới thuật ngữ Responsive Web Design này.

0 0 151

- vừa được xem lúc

Giới thiệu về Mixins trong Vuejs

Xin chào năm mới năm me! Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn những vấn đề liên quan đến Vuejs. Ở bài trước mình đã giới thiệu về tính năng Filter và lần này, mình xin chia sẻ với các bạn về một khái niệm cũng rất quen thuộc.

0 0 394

- vừa được xem lúc

Top JavaScript Snippets bạn nên thử một lần cho biết

Chào các bạn, tiếp tục chuỗi chủ đề về JS hôm nay mình xin chia sẻ tới các bạn một số đoạn snippets hay ho giúp chúng ta tăng hiệu suất công việc, cải thiện chất lượng code. Cùng bắt đầu nhé (go). . 1.

0 0 36