Hướng dẫn Cách sử dụng CSS Gradients cho IE9

[PVS]

Cách sử dụng CSS Gradients cho IE9

Trong bài trước mình 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 mình sẽ 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 mình đã đăng lên diễn đàn.

Chúc các bạn thành công.

Nguồn: sothichweb.com​