CSS3 có gì hay?
Nếu ví HTML là gạch để xây nhà thì CSS là lớp sơn bóng bẩy! Thật vậy, cũng như nhà đẹp cần phải biết trang trí, một trang HTML mà không có CSS rất dễ trở nên đơn điệu và nhàm chán. HTML và CSS đã là một cặp đôi ăn ý từ những phiên bản trước đây, nhưng nay với HTML5, CSS cũng được nâng cấp lên một phiên bản mới: CSS3 với nhiều cải tiến đáng kể.
Sử dụng CSS là một đề tài lớn đã được nhiều cuốn sách đề cập đến. Trong phạm vi giới hạn, bài viết này không trình bày lại những khái niệm căn bản về CSS mà chỉ lướt qua những nét mới nổi bật trong CSS3.
1. Định dạng font:
Một trong những thao tác phổ biến nhất với CSS là định dạng font chữ. CSS cung cấp thuộc tính font-family để xác định kiểu font hiển thị:
1: font-family: Times New Roman
Thật không may là việc lựa chọn font chữ gặp rất nhiều hạn chế do bị phụ thuộc vào số font được cài đặt trên máy người dùng. Điều này có nghĩa là chúng ta phải hạn chế sử dụng các loại font “hiếm” vì nhiều khả năng chúng sẽ không hiển thị đúng trên các máy tính không có font đó. Tuy nhiên, ngay cả các font phổ biến đôi khi cũng gặp rắc rối, vì chúng có những tên khác nhau trên khác hệ điều hành khác nhau. Chẳng hạn như font Arial còn được gọi là Helvetica hay Sans Serif. Kết quả là chúng ta thường thấy các khai báo kiểu như sau:
1: font-family: Arial, Helvetica, sans serif
Cách viết này sẽ đảm bảo rằng font được hiển thị đúng: hệ thống chỉ việc lựa chọn loại font phù hợp nhất. Nhưng còn có một cách giải quyết tốt hơn: nhúng trực tiếp kiểu font vào file CSS. Với CSS3, việc này trở nên rất đơn giản, đoạn code sau minh họa cách nhúng một font TrueType vào CSS:
1: @font-face{
2: font-family: ‘<tên font>’;
3: src: url(‘<đường dẫn tới file font>’) format(‘truetype’);
4: }
2. Tạo hiệu ứng đổ bóng cho text:
CSS3 cho phép tạo hiệu ứng đổ bóng một cách dễ dàng. Hãy xem qua một ví dụ đơn giản:
1: .shadowedText {
2: font-family: Arial, Helvetica, sans serif;
3: font-size: medium;
4: color: #FF0000;
5: text-shadow: 0.25em 0.25em 2px #999;
6: }
Thuộc tính text-shadow trong khai báo trên cho phép kiểm soát hiệu ứng đổ bóng. Thuộc tính này có bốn tham số, trong đó hai tham số đầu tiên là bắt buộc:
- horizontal-offset: tọa độ X tương đối của bóng (so với text)
- vertical-offset: tọa độ Y tương đối của bóng (so với text)
- blur-radius: bán kính mờ của bóng. Tắt hiệu ứng mờ bằng cách truyền giá trị 0
- shadow-color: màu sắc của bóng
3. Chia nội dung thành nhiều cột:
Chia cột là một công việc khó khăn. Trước đây, các lập trình viên thường sử dụng bảng hoặc các tag <div> phức tạp để đạt được mục tiêu này. Nhưng nay thì CSS3 cũng đã hỗ trợ sẵn. Sau đây là cách chia nội dung thành hai cột trong CSS3:
1: .columns {
2: font-family: Arial, Helvetica, sans serif;
3: font-size: 10px;
4: color: #444;
5: text-align: justify;
6: -webkit-column-count: 2;
7: -webkit-column-gap: 1em;
8: }
Một lưu ý nhỏ là hai thuộc tính column-count và column-gap có thêm tiền tố -webkit-. Các thuộc tính thử nghiệm của CSS3 được đặt tên theo kiểu này nhằm tránh xung đột trong trường hợp đặc tả thay đổi. Do đó hiện nay, cần sử dụng các tiền tố -moz- (cho Mozilla), -0- (cho Opera) và -webkit- (cho Safari và Chrome).
4. Các đường viền bo tròn góc:
Thêm đường viền (border) cho các thành phần trong trang web không phải là điều gì mới mẻ. Nhưng với CSS2, hầu như không có cách nào để tạo ra các đường viền với các góc bo tròn một cách tự nhiên (đương nhiên là vẫn có các giải pháp phức tạp hơn như sử dụng image). CSS3 mang lại cách tiếp cận hiệu quả nhất bằng cách quy định các thuộc tính để tạo hiệu ứng này:
1: .roundedCorner {
2: -webkit-border-radius: 10px;
3: border: 4px solid #FF0000;
4: }
Khai báo này sẽ tạo một đường viền với bốn góc được bo tròn. Tuy nhiên, có những trường hợp mà ta chỉ muốn áp dụng hiệu ứng này cho một góc cụ thể nào đó, may mắn là CSS3 cũng cho ta khả năng này với các thuộc tính:
5. Tạo hiệu ứng chuyển động:
Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép áp dụng các hiệu ứng chuyển động để làm tăng tính bắt mắt cho trang web. Sau đây là một ví dụ căn bản về tạo chuyển động:
1: @-webkit-keyframes topdown {
2: from {
3: top: 0px;
4: }
5: to {
6: top: 300px;
7: }
8: }
9:
10: .animation {
11: -webkit-animation-name: topdown;
12: -webkit-animation-direction: alternate;
13: -webkit-animation-duration: 2s;
14: -webkit-animation-iteration-count: 5;
15: position: relative;
16: left: 0px;
17: }
Có thể thấy rằng đoạn CSS trên chia làm hai phần: phần đầu định nghĩa hiệu ứng chuyển động theo nhu cầu sử dụng (ví dụ trên định nghĩa một chuyển động theo phương thẳng đứng đi từ tọa độ 0 tới tọa độ 300px). Phần tiếp theo gán chuyển động này cho class .animation, trong đó có các thuộc tính quan trọng như: thời lượng (duration), số lần thực hiện chuyển động (count), chiều của chuyển động (direction – ví dụ trên sử dụng giá trị alternate để chuyển động tự động đổi chiều sau mỗi lần thực hiện)
Trên đây chỉ là vài nét mới nổi bật của CSS3, nhưng bấy nhiêu cũng đủ để chứng minh rằng đây là một công nghệ đầy tiềm năng. Không chỉ góp phần hoàn thiện HTML5, CSS3 còn đơn giản hóa đáng kể công việc của các nhà phát triển web. Đây thực sự là sự kế thừa xứng đáng của CSS. Và với sự hỗ trợ ngày càng mạnh của các trình duyệt, có thể tin rằng CSS3 sẽ nhanh chóng trở nên phổ biến vào một ngày không xa.
* Source code:
Download file source hoàn chỉnh chứa các đoạn code trong bài ở đây
Nguồn WormTech
Pham Nguyen 