Một thuộc tính mà ít ai để ý đó là thuộc tính chia cột. Chức năng này mới chỉ phát triển trên Webkit và FF. Nhờ vào đó, ta không cần phải định dạng nhiều cho mệt nữa, rất phù hợp với các site Magazine.
Cách sử dụng:
Bài 10. Vòng lặp (Loop)
Vòng lặp được sử dụng khi có một thao tác được lặp đi lặp lại một cách tự động theo một quy tắc nhất định.
Ví dụ, muốn in dòng chữ Hello World 5 lần thì bạn phải viết đi viết lại 5 lần, việc này rất đơn giản, nhưng nếu bạn muốn viết 100 dòng thì sao. Quả là ác mộng nếu không có vòng lặp.
Vòng lặp For … To … Do
Vòng lặp For … To … Do được sử dụng khi ta biết trước số lần lặp
Cú pháp For <Giá trị đầu> To <Giá trị cuối> Do <Khối công việc>
Hãy xem ví dụ sau:
Plugin tìm kiếm theo từng chuyên mục
Theo mặc định của WordPress, khi tìm kiếm ta sẽ được kết quả của tất cả các chuyên mục. Nhưng nếu bạn chỉ muốn hiển thị kết quả của duy nhất 1 chuyên mục thì sao?
Plugin “Search by Category” được viết ra để làm việc này. Demo bạn có thể xem tại trang chủ của code24h.
Các chức năng chính của Plugin
- Hiển thị danh sách các chuyên mục cần tìm kiếm ở dạng Dropdown
- Cho phép người dùng ghi nội dung trong ô tìm kiếm, nội dung của Dropdown trực tiếp
- Có thể Exclude các chuyên mục không muốn hiển thị trong Dropdown
- Có file CSS riêng để tuỳ chỉnh kích thước, vị trí, giao diện tìm kiếm
Download tại
Bài 3: Hiệu ứng bo tròn (border-radius)
Bình thường, để bo tròn bạn phải sử dụng một tấm ảnh và một số thủ thuật rất phức tạp, trong CSS3 thì rất đơn giản.
border-radius: [kích cỡ];
-moz-border-radius: [kích cỡ];
-webkit-border-radius: [kích cỡ]
Trong đó moz-border-radius dành cho Firefox, -webkit-border-radius dành cho Webkit và border-radius dành cho các trình duyệt khác.
Ví dụ
[codesyntax lang="css"]
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
[/codesyntax]
Đối với trường hợp không muốn bo tròn toàn bộ
[codesyntax lang="css"]
-moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;
[/codesyntax]
Ví dụ này cho thấy các bo tròn phần đầu bên phải và phần chân bên phải, mỗi phần 10px. Cú pháp của Firefox và Webkit khác nhau nên thận trọng để tránh nhầm lẫn.
Bài 2. Hiệu ứng Text-Shadow
- Hiệu ứng text-shadow giúp hiển thị bóng cho chữ.
Sử dụng
text-shadow: [toạ độ X] [toạ độ Y] [độ mờ] [màu sắc];
Ví dụ
[codesyntax lang="css"]
text-shadow: 1px 1px 20px #666; text-shadow: 1px 1px #fff; text-shadow: 0 0 #
[/codesyntax]
Text-Shadow cũng hỗ trợ việc sử dụng nhiều hiệu ứng shadow cùng 1 lúc cách nhau bởi dấu phẩy. Ví dụ:
[codesyntax lang="css"]
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
[/codesyntax]
Hiệu ứng cho ta một đoạn chữ bốc lửa, quá tuyệt vời phải không? Bình thường để làm việc này bạn phải dùng Photoshop đấy!
