Định nghĩa và sử dụng. Trong CSS3 chúng ta có thể tạo màu sắc cho background theo biên độ giảm dần.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 541 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Trong CSS3 chúng ta có thể tạo màu sắc cho background theo biên độ giảm dần. Cấu trúc:

tag {
background: -moz-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -o-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -ms-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -webkit-gradient(linear,vị-trí,color-stop(0.n1, mã-màu-1),color-stop(0.n2, mã-màu2),...,color-stop(0.n, mã-màu-n));
}

Trong đó:
vị-trí: được hiển thị theo các cặp thẻ, mã-màu: giá trị màu, n: độ tràn màu (hay độ trộn lẫn)
- Tính theo % : đối với -moz-, -o-, -ms-.
- Tính theo giá trị thập phân (từ 0 - 1) : đối với -webkit-.
HTML viết:

Vị trí: bottom. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: top. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: left. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,right top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: right. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right top,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: left bottom. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left bottom,right top top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: left top. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,right bottom top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: right bottom. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right bottom,left top top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Vị trí: right top. CSS viết:

div {
background-color: #1a82f7;
background: -moz-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right top,left bottom top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt