Tạo hiệu ứng Gradient bằng CSS 3 một cách đơn giản
Các bạn vào http://www.colorzilla.com/gradient-editor/ để bắt đầu tạo hiệu ứng gradient bằng css 3.
Tại box Presets có chứa các mẫu có sẳn về hiệu ứng chuyển sắc Gradient các bạn có thể chọn mẫu mình thích, các bạn nhìn xuống dưới có một thanh cho phép các bạn điều chỉnh theo ý mình thích giống như sử dụng Photoshop vậy đó.
Copy tất cả các code trong box CSS và bỏ vào class của css:
<html>
<head>
<meta charset="UTF-8">
<title>Ví dụ tạo hiệu ứng background gradient bằng CSS 3</title>
</head>
<style>
.gradient{
height: 100px;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
}
</style>
<body>
<div class="gradient">
</div>
</body>
</html>
Thế là bạn đã tạo thành công một background gradient bắt mắt mà không cần dùng đến hình ảnh.
Xem thêm: http://vncode.org/lap-trinh-web.html
Đăng bởi Kiều Tiên Tags: CSS, CSS 3, Gradient, hiệu ứng, hiệu ứng Gradient, lập trình, lập trình web, Tạo hiệu ứng Gradient, Tạo hiệu ứng Gradient bằng CSS 3