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

Trước đây chúng ta thường dùng các hình ảnh chuyển sắc để làm background cho trang trang web hay một phần trang web, nhưng như thế sẽ làm website của ta load rất nặng điều này không tốt cho SEO và cả người dùng.

Ở 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.

Bài này mình sẽ hướng dẫn các bạn sử dụng công cụ để tạo một hiệu ứng Gradient một cách nhanh nhất.

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 đó.

Tạo hiệu ứng Gradient bằng CSS 3

Tạo hiệu ứng Gradient bằng CSS 3

Copy tất cả các code trong box CSS và bỏ vào class của css như ví dụ bên dưới:


<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.
Các bạn xem demo online tại đây http://jsfiddle.net/75L7f/

GỬI BÌNH LUẬN