thietkewebosvn
Tiểu thương mới
- Tham gia
- 10 Tháng mười 2014
- Bài viết
- 2
- Điểm tương tác
- 0
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 */
}
Và đây là kết quả cho đoạn code trên
Các bạn xem thêm bài viết những thuộc tính mới nhất trong CSS3 tại ithietkeweb.net nhé
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 */
}
Và đây là kết quả cho đoạn code trên
Các bạn xem thêm bài viết những thuộc tính mới nhất trong CSS3 tại ithietkeweb.net nhé
Relate Threads