Những thuộc tính mới nhất trong css3

Chào các bạn. Trong bài viết này công ty thiết kế web OSVN sẽ cùng các bạn tìm hiểu về điểm mới của CSS3 trong thiết kế web. Vậy CSS3 có những thuộc tính gì mới trong thiet ke website hiện nay. Bài này chúng ta cùng tìm hiểu về những thuộc tính mới nhất trong công nghệ thiết kế web với CSS3.
Những thuộc tính mới nhất trong CSS3

Border-radius
Border-image
CSS3 Gradient
Box-shadow
Vendor Prefix
Text-shadow
Column
Media Query
Transition
Vậy những thuộc tính mới đó làm việc và sử dụng như thế nào?
Cách sử dụng các thuộc tính mới của CSS3

Border-radius

Thuộc tính border-redius trong CSS3 được sử dụng để bo góc cho các border. Border-radius có 4 giá trị để bo góc bắt đầu từ góc thứ nhất tính theo chiều kim đồng hồ. Ví dụ đoạn code CSS3 sau sử dụng border-radius:
#box{
background:green;
height:250px;
width:300px;
border-radius: 10px 10px 5px 5px;
}
Và kết quả như sau:

Bạn thử tăng độ bo của nó lên bằng 1 nửa width xem nó ra hình gì nhé.
Box-Shadow

Thuộc tính box-shadow giúp tạo hiệu ứng bóng đổ theo chiều ngang và dọc của website. Và bạn hãy quan sát đoạn code CSS3 dưới đây nhé
#box{
background:green;
height:250px;
width:300px;
line-height:200px;
text-align:center;
color:white;
font-weight:bold;
box-shadow:10px 10px 10px blue;
-webkit-box-shadow: 10px 10px 10px blue;
-moz-box-shadow: 10px 10px 10px blue;
}
Và đây nó sẽ là kết quả

Và đương nhiên để nó hiển thị tốt trên các trình duyệt bạn phải thêm prefix cho nó rồi. Lưu ý là box-shadow có thể sử dụng giá trị âm. Hãy kết hợp chúng và tạo hiệu ứng đổ bóng đẹp hơn nhé.
Gradient

Thuộc tính gradient được sử dụng nhiều trong các website. Nếu như trước đây bạn phải sử dụng tới photoshop để tạo ra những hình ảnh gradient thì nay CSS3 sẽ giúp bạn thực hiện công việc này một cách đơn giản và hiệu quả. Xem đoạn code dưới đây:
#gradient{
background:#fff;
height:250px;
width:600px;
background-image:-moz-repeating-linear-gradient(450deg,white,black,green,blue,red,yellow);
background-imageebkit-gradient(linear,0 0,0 100%,from(white),to(black));
}
Hãy thử và trải nghiệm thêm với đoạn code sau
#gradient{
background:#fff;
height:250px;
width:600px;
background-image:-moz-repeating-linear-gradient(left,white 80%,blue,white);
background-imageebkit-gradient(linear,0 0,0 100%,from(white),to(black));
}
Và đây là kết quả cho hai đoạn code trên

Column

Đôi khi bạn thường gặp khó khăn trong việc phân chia đoạn văn thành nhiều cột khác nhau, sử dụng khá nhiều css và thẻ html. Với thuộc tính Column mới trong CSS3 sẽ giúp bạn chia một đoạn văn thành các cột theo ý muốn.
Quan sát đoạn code dưới đây và thử áp dụng nó nhé:
#gradient{
width:600px;
color:blue;
column-count:3;
-o-column-count:3;
-ms-column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
/* Chia số cột thành 3 cột */

-webkit-column-gap:20px;
-moz-column-gap:20px;
-ms-column-gap:20px;
-o-column-gap:20px;
colum-gap:20px;
/* Chia độ rộng của các cột */
}
Xem tiếp những thuộc tính mới nhất trong CSS3 tại ithietkeweb.net