Bạn là pro CSS? Hay bạn chỉ mới bắt đầu tìm hiểu CSS? Chắc hẳn sẽ có những lúc bạn cảm thấy việc code box-shadow, border hay gradient background phức tạp và không trực quan cho lắm. Vì vậy, cac tool sau đây có thể phụ giúp bạn đỡ nhọc nhằn trong công việc hơn.
Mục lục
Bạn cần tạo những mũi tên đơn giản
Bạn sẽ dễ dàng tìm được nhiều hướng dẫn tạo mũi tên bằng CSS border. Những hướng dẫn này dễ hiểu nếu bạn đọc và thực hành vài lần. Tuy nhiên, nếu bạn không có thời gian để đọc hướng dẫn và cần nhiều mũi tên theo 8 hướng khác nhau, trang web này sẽ tiết kiệm dùm bạn rất nhiều thời gian. Giao diện trực quan và dễ hiểu, bạn sẽ luôn nhớ tới nó khi bạn cần tạo mũi tên đấy
CSS Shadow
Tạo shadow bằng CSS luôn khó khăn với mình vì phải làm giống 100% thiết kế, nếu có một tool giúp mình kéo thả các thông số và preview sinh động, nó sẽ giúp mình bớt nhọc nhằn hơn trong cuộc chạy đua deadline. Và mình tìm thấy trang web này giúp tạo box-shadow và trang web này giúp bạn tạo text-shadow. Hai công cụ này đều trong một website cùng nhiều công cụ CSS hữu ích khác nữa, bạn có thể khám phá thêm. Biết đâu bạn có thể tìm được vài công cụ hữu ích cho riêng mình đấy.
Tạo gradient background
Bạn có thể tìm được rất nhiều trang giúp bạn tạo gradient background. Mình cũng đã thử dùng qua rất nhiều công cụ như vậy, và nhận ra rằng UI rất quan trọng trong việc giúp người truy cập sử dụng dễ dàng trang web. Vì vậy, mình xin gợi ý một trang mà mình cảm thấy giao diện đơn giản, dễ sử dụng nhất. Đó là trang web này
Trang này có sẵn một vài preset cho bạn lựa chọn. Bạn có thể custom chung tùy thích. Trang web hỗ trợ hầu hết mọi nhu cầu về gradient background như hướng, pick các điểm trải màu, format của mã màu, tương thích với IE…
CSS gradient có làm nhiều hơn là bạn nghĩ. Bạn có thể tham khảo trang này để khám phá thêm tại đây nhé
Bạn cần tạo stripe background?
Stripe background là những background dạng như thế này
Thật ra để tạo stripe background, người ta ứng dụng CSS gradient. Nhưng vì nó khó hiểu và hơi phức tạp nữa, nên nếu bạn dùng tool được thì quá khỏe rồi. Trang web này sẽ giúp bạn tạo stripe background nhanh gọn và tiện lợi. Việc bạn cần làm là nhập thông số và tool sẽ tính toán mọi thứ để cho bạn code thích hợp
CSS to SCSS/SASS
Bạn cần chuyển CSS sang SCSS/SASS, tool này sẽ giúp bạn làm một cách nhanh chóng. Theo mình thấy, hiệu quả chỉ tầm 80% thôi. Tuy nhiên, như vậy cũng tạm ổn với mình khi có lúc mình phải chuyển cả một file CSS vài trăm dòng thì đây đúng là cứu tinh của mình. Giao diện đơn giản, dễ dùng, chỉ cần copy-paste và nhấn nút, mọi thứ sẽ nhanh chóng hoàn thành giúp bạn.
Tổng kết
Viết CSS luôn là công việc khó và tốn nhiều công sức. Có rất nhiều công cụ được tạo ra để giúp cho công việc của tụi mình đỡ vất vả hơn. Nếu bạn không chắc thứ mình cần có tool sẵn hay không, bạn hãy tìm thử trên Google nhé. Trên đây chỉ là những tool mình hay sử dụng do tính chất công việc. Chắc hẳn sẽ còn nhiều tool khác hỗ trợ nhiều công việc khác mà bạn có thể tìm hiểu được trên mạng. Chúc các bạn code vui vẻ^^