Tạo hiệu ứng Gradient bằng CSS 3 một cách đơn giản

Đăng bởi Kiều Tiên | 01/10/2015 | 1078

Ở thời đại ngày nay chúng ta đã có CSS 3 có thể giải quyết được vấn đề này chỉ với vài dòng lệnh, giúp website load nhẹ hơn rất nhiều.

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>