Tạo nền chuyển sắc cho web với CSS3 mà không dùng hình

Để tạo nền chuyển sắc cho web bạn có 2 cách thực hiện:

Cách 1:

Theo phương pháp cổ điển thì các bạn sẽ sử dụng hình vẽ từ photoshop kết hợp với CSS, cách này tuy mất thời gian nhưng hay ở chổ xem được trên mọi trình duyệt.

Cách 2:

Dùng code CSS3, cách này đở mất thời gian (Copy code > Paste là xong) web duyệt nhanh hơn, tuy nhiên chỉ chạy tốt trên các trình duyệt mới, các trình duyệt cũ bó tay.

Với các bạn làm web tôi tin chắc bạn đã biết cách 1 vì vậy hôm nay tôi giới thiệu với các bạn cách tạo nền chuyển sắc cho web mà không cần dùng hình (Cách 2), cách này giúp web của bạn chạy nhanh hơn, làm rất đơn giản (Copy code > paste). Tuy nhiên nó không hỗ trợ các trình duyệt cũ đặc biệt là IE phải từ Version 10.0+, Firefox, Opera, Chrome thì OK.

Nào ta bắt đầu nha:

Bước 1:

Tạo file *.html mới bằng bất cứ phần mềm soạn thảo web nào bạn muốn, tôi dùng Dreamweaver CS5. Ở phần code CSS bạn copy > Paste đoạn code sau vào thẻ

<style>

…

</style>

Phần nội dung web bạn tự lo nha, muốn viết gì cũng được.

Sau khi có nội dung bạn nhấn F12 để xem trên trình duyệt (nhớ dùng Firefox để thử nghiệm nha, dùng IE là bó tay luôn nha bạn).

Quá đẹp đúng không nào, chẳng cần dùng cái hình nào cả. Trong đó màu chuyển sắc có 3 tham số:

-         top: kiểu tô linear thẳng từ trên xuống (Có thể sử dụng: left, right, bottom)

-         #F9F: màu 1

-         #FFF: màu 2

-         repeat-x: màu chuyển sắc lặp theo trục x.

Bước 2:

Thay đổi các tham số để có các kiểu nền chuyển sắc như ý:

Tô chuyển sắc từ trái sang phải, repeat-y

Tô chuyển sắc từ trái sang phải, repeat-y

Tô chuyển sắc kiểu tròn từ tâm

Các bạn thử nghiệm nha, rất đơn giản@!#