Sau 13 năm là một phần không thể thiếu trong việc thiết kế web, Cascading Style Sheets (CSS) đã được phát triển thành một công cụ vô cùng mạnh mẽ, cho phép bạn phát triển những trang web với nhiều hiệu ứng và trông đẹp mắt hơn rất nhiều. Bài viết này sẽ chia sẻ với các bạn những kỹ thuật cơ bản về CSS3 mà một nhà thiết kế web cần phải nắm vững. Sau đây là những cái mà mình thấy là cơ bản nhất :
1 Multiple Backgrounds
CSS3 cho phép bạn ấn định nhiều backgrounds cho một phần tử sử dụng nhiều thuộc tính. Bao gồm cả những thuộc tính như : background-image, background-repeat, background-position và background-size. Để dễ hiểu các bạn có thể tham khảo ví dụ sau :
body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}
2 The general sibling combinator
Đây là 1 loại combinator mới được giới thiệu trong CSS3, nó cho phép bạn chỉ định thuộc tính đến đúng phần tử mà bạn muốn áp đặt, để dễ hiểu chúng ta cùng xem ví dụ sau :
h1~p {
color: red;
}
dấu ~ chính là một combinator mới, nó cho phép bạn áp đặt thuộc tính của thẻ <p> ở vị trí đầu tiên tính từ thẻ <h1>, ví dụ như sau:
<h1>Heading</h1>
<p>This paragraph is a match</p>
<div>
<p>This paragraph is not a match</p>
</div>
Trong ví dụ trên thì chỉ có dòng This paragraph is a match là màu đỏ, còn đoạn dùng thẻ <p> phía dưới sẽ không được áp dụng.
3 New pseudo-classes
CSS3 cũng giới thiệu vài pseudo-classes mới đó là :
:last-child – Chỉ lựa chọn phần tử con cuối
ví dụ :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Kết quả sẽ là :
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
:nth-child(n) – Lựa chọn phần tử con ở vị trí n
Ví dụ :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>Thủ thuật web</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>Note:</b> Internet Explorer does not support the :nth-child() selector.</p>
</body>
</html>
Kết quả sẽ là
Thủ thuật web
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
:not(e)– lựa chọn tất cả mọi thứ ngoại trừ e
Ví dụ
:not(table) {
// thuộc tính cần áp đặt
}
Đoạn css trên sẽ áp dụng cho mọi thứ ngoại trừ các phần tử là table
Các bạn có thể tham khảo list of CSS3 psuedo-classes để có thể biết thêm về nhiều psuedo-classes khác
4 Resizing Elements
Với CSS3 bạn có thể chỉnh lại kích thước các phần tử đang sử dụng bằng thuộc tính resize. Thuộc tính này chỉ có hiệu lực trên Firefox 4+, Chrome, và Safari. Đoạn code sau đây sẽ làm xuất hiện 1 biểu tượng hình tam giác nhỏ nằm ở phía dưới góc phải của phần tử, và cho phép bạn thay đổi kích thước phần tử theo ý muốn bằng cách dùng chuột.
div {
resize: both;
}
Để hiểu rõ hơn các bạn có thể tham khảo ví dụ minh họa sau :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
border:2px solid;
padding:10px 40px;
width:200px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Firefox 4+, Safari, and Chrome support the resize property.</p>
<div>The resize property specifies whether or not an element is resizable by the user.</div>
</body>
</html>
5 Better Fonts
Hầu hết chúng ta khi thiết kế web đều dùng font mặc định là Arial, Helvetica, Verdana và Georgia, tuy nhiên CSS3 cho phép bạn mở rộng sự lựa chọn font cho website của bạn mà không cần quá lo lắng về việc font đó có hỗ trợ ở máy người dùng hay không. Các bạn chỉ cần xem đoạn css sau là sẽ hiểu được sự khác biệt trong font của CSS3
@font-face {
font-family: SketchRockwell;
src: url('http://example.com/fonts/SketchRockwell.ttf');
}
h1 {
font-family: SketchRockwell;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}
6 Text Shadows
Thuộc tính text-shadow cho phép bạn tạo hiệu ứng bóng đổ mà không cần phải tạo một file hình trong photoshop, ví dụ sau đây chúng ta sẽ sử dụng màu #003471 cho hiệu ứng bóng đổ
h1 {
text-shadow: #003471 2px 5px 2px;
}
Kết quả sẽ là :
7 Rounded Corners
CSS3 cho phép bạn có thể bo tròn lại các góc trong các phần tử bằng cách sử dụng thuộc tính border-radius. Các bạn có thể xem ví dụ sau :
div {
border: 2px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 500px;
}
Trong đoạn code trên , – moz được dùng cho Firefox và -webkit được dùng cho Safari và Chrome
Hy vọng bài viết này sẽ giúp ích được nhiều cho các bạn.