Gradients CSS3 cũng hỗ trợ minh bạch, có thể được sử dụng để tạo ra các hiệu ứng mờ dần.
Để thêm sự minh bạch, chúng tôi sử dụng các rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong rgba () chức năng có thể là một giá trị 0-1, và nó xác định độ trong suốt của màu sắc: 0 chỉ minh bạch đầy đủ, 1 chỉ ra đầy đủ màu sắc (không trong suốt).
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu hoàn toàn minh bạch, đầy đủ chuyển sang màu đỏ:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Các bạn tìm hiểu thêm ở đây : http://thietkewebchuyennghiepvl.blogspot.com/2015/09/css3-gradients.html
Để thêm sự minh bạch, chúng tôi sử dụng các rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong rgba () chức năng có thể là một giá trị 0-1, và nó xác định độ trong suốt của màu sắc: 0 chỉ minh bạch đầy đủ, 1 chỉ ra đầy đủ màu sắc (không trong suốt).
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu hoàn toàn minh bạch, đầy đủ chuyển sang màu đỏ:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Các bạn tìm hiểu thêm ở đây : http://thietkewebchuyennghiepvl.blogspot.com/2015/09/css3-gradients.html
Không có nhận xét nào:
Đăng nhận xét