CSS Gradients for IE9

Trong bài trước tôi có giới thiệu sử dụng CSS gradient để tạo chuyển sắc thay vì dùng Photoshop và nó làm việc với hầu hết các trình duyệt, đáng tiếc rằng hiện tại nó không được hổ trợ trên IE9. Trong bài nay tôi xin giới thiệu việc sử dụng SVG để tạo ảnh chuyển sắc và đương nhiên là nó sẽ làm việc được không những trên IE9 mà còn nhiều trình duyệt khác.

Điều đầu tiên chúng ta cần có khái niệm SVG là gì và nó dùng để làm gì. Đơn giản bạn cần biết rằng SVG(Scalable Vector Graphics) là một ngôn ngữ đánh dấu XML dùng để mô tả hình ảnh đồ họa vector hai chiều, tĩnh và họat hình, thường dùng trên các trang mạng. Để biết thêm thông tin bạn có thể đọc về nó trên wikipedia.

Để sử dụng SVG tạo hình ảnh gradient chúng ta thực hiện như sau:

Tạo một tập tin có phần mở rông là SVG giả sử là svg-gradient.svg có cấu trúc như sau:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%"
   height="100%"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#b2bbca" stop-opacity="1"/>
      <stop offset="50%"  stop-color="#909cb3" stop-opacity="1"/>
      <stop offset="50%"  stop-color="#8593ac" stop-opacity="1"/>
      <stop offset="100%" stop-color="#73839f" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <rect width="100%" height="100%"
     style="fill:url(#myLinearGradient1);" />
</svg>

Ở trên chúng ta đặt chiều cao và chiều rộng là 100%, đồng thời khai báo các thông tin về màu sắc cũng như vị trí của chúng.

Tiếp theo tạo file CSS dành cho IE9, trong file CSS này chúng ta sẽ đặt hình nền chuyển sắc từ file SVG đã tạo lên phần tử chúng ta muốn. Ví dụ ta tạo ra file popup-svg.css có nội dung như sau:

div {
  background-image: url("svg-gradient.svg");
}

Để sử dụng hình nền chuyển sắc tạo từ file SVG dành riêng cho IE9 chúng ta sẽ dùng bình luận điều kiện để liên kết tới file CSS dành cho IE9. Ví dụ:

<!--[if IE 9]>
  <link rel="stylesheet" type="text/css" href="popup-svg.css">
<![endif]-->

Để hiều thêm về bình luận điều kiện trên IE bạn có thể đọc bài viết về bình luận điều kiện lọc trình duyệt IE tôi đã thực hiện trước kia.
Phần hướng dẫn trong bài này tôi tham khảo từ css3wizardry.com, các bạn có thể truy cập để đọc bài viết gốc từ tác giả Robert Biggs một Web developer chuyên về HTML5, CSS3, JavaScript, SVG.