CSS Gradients for IE9

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.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Hướng dẫn exposed Filters với Views 3 trong Drupal 7

Hướng dẫn exposed Filters với Views 3 trong Drupal 7

With views, it's easy to create a restricted listing of content. What's more, you can also expose those filters to the user, so they can sort and filter the content themselves. Here's an example of the type of functionality you can enable with "exposed filters":

Hướng dẫn tạo multi-step forms có sử dụng ctools multistep wizard

In the previous post I gave an example of Ctools modal API as being operated with a single form. In this one you'll be given an insight into my experiences with another powerful tool, namely Ctools multistep wizard as being used with or without the modal API involvement.

Google, Facebook né thuế tại VN: Thất thu lớn

Google, Facebook né thuế tại VN: Thất thu lớn

Ngay sau khi Thanh Niên đăng bài , một trong những đối tác chính của Google tại VN đã thừa nhận điều này.

Công ty diệt chuột T&C

 

Diet con trung