Categories Tối ưu CSS

CSS cho người tay ngang

Những người tay ngang tham gia lập website trên nền WordPress giờ rất nhiều, nguyên nhân là vì các yếu tố thuận lợi tăng lên nhanh chóng:

  • WordPress dễ dùng và có nhiều plugin miễn phí cũng như trả phí hỗ trợ vô số tính năng, cài đặt chỉ cần thông qua vài click.
  • Giao diện đa dạng, nhiều lựa chọn.
  • Cộng đồng hỗ trợ lớn.
  • Tài liệu hướng dẫn phong phú.
  • Giá hosting với chất lượng khá có giá chỉ vài trăm ngàn một tháng.
  • Tên miền đăng ký dễ và cũng không đắt.
  • Thanh toán trực tuyến giúp mọi việc đều có thể tiến hành tại nhà được, không phải lên phố.

OK. Tuy nhiên những ai chưa học web căn bản sẽ gặp phải khó khăn khi dùng CSS để tinh chỉnh website. Cái này nói chung không khó học, nhưng để thành thạo & làm cho khéo phải mất thời gian, nhẹ nhẹ cũng vài tháng.

Giải pháp mỳ ăn liền (Hảo Hảo) cho ai không có nền căn bản là sử dụng các mẫu sẵn chỉ việc copy-paste vào là xong. Hôm nay tôi sẽ nói về các giải pháp như vậy.

Ví dụ như hình dưới đây, một hộp đổ bóng trông khá phức tạp được tạo bởi CSS.

Box 1

Mẫu trên dễ dàng được tạo bởi công cụ như cssmatic.com/box-shadow

Nó có các tính năng tùy biến rất tốt, còn hơn cả những người biết CSS ở mức trung bình (gồm cả tôi).

tạo bóng đổ

Với đầy đủ các tùy chọn như:

  • Horizontal Length: bóng đổ tính theo chiều ngang.
  • Vertical Length: bóng đổ tính theo chiều dọc.
  • Blur Radius: bán kính blur (làm mờ).
  • Spread Radius: mức độ tỏa của bóng.
  • Shadow Color: màu bóng đổ.
  • Background Color: màu nền.
  • Box Color: màu hộp.
  • Opacity: mức độ trong suốt của bóng.

Ví dụ đây là mã mẫu CSS mà công cụ trên tạo cho Box 1:

width:200px; height:100px;-webkit-box-shadow: 40px -8px 103px 4px rgba(46,7,46,1);
-moz-box-shadow: 40px -8px 103px 4px rgba(46,7,46,1);
box-shadow: 40px -8px 103px 4px rgba(46,7,46,1);

Chúng ta đến một ví dụ khác với hộp như dưới đây.

Box 2

Công cụ để tạo đoạn mã này: bennettfeely.com/clippy/

tạo hộp khối

Bạn cũng chỉ việc điều chỉnh rồi copy đoạn mã vào.


Đời không như là mơ

Lúc ban đầu viết bài này, tôi cứ nghĩ rằng những người chỉ biết về CSS rất ít cũng có thể dùng được các công cụ, nhưng hóa ra không phải như vậy.

Mặc dù các công cụ trực quan này rất dễ dùng nhưng điều đó không có nghĩa là chỉ việc copy-paste là xong việc như phần đầu tôi quá hào hứng!

Có 2 điều dễ nhận thấy:

  • Các công cụ hỗ trợ phân tán, mỗi trang web sẽ làm một nhiệm vụ nào đấy, chứ không có công cụ nào tập trung bao trùm được hầu hết các mục đích.
  • Điểm đáng chú ý hơn là để dùng các công cụ này hiệu quả, chính xác bạn vẫn phải có kiến thức CSS căn bản, chẳng hạn selector (bộ chọn), màu nền (background-color), kích thước (height, width), đường viền (border), căn lề (margin, padding) là gì. Nếu không có bất cứ kiến thức nào về CSS hoặc rất thấp thì các công cụ trực quan cũng không khác gì một đống mã lộn xộn mà thôi.

Kết luận: các công cụ hỗ trợ tạo mã CSS rất tuyệt vời. Không chỉ những ai tay ngang, mà người chuyên nghiệp cũng có thể dùng nó để rút ngắn thời gian công việc. Tuy nhiên để dùng được bạn vẫn phải có kiến thức nền tảng về CSS.

PS: Bình thường WordPress nó có sẵn công cụ tùy biến CSS áp trên toàn bộ website, anh chị em nào muốn áp CSS trên một post hay page cụ thể (để không ảnh hưởng đến các post, page khác / tối ưu CSS không sử dụng) có thể dùng plugin wordpress.org/plugins/simple-css/, plugin này của tác giả theme rất chất lượng GeneratePress– chắc cũng không lạ gì với nhiều người.

Back to Top