Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use this CSS:</p> <pre><code>background: rgb(0,187,214); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmJkNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0,187,214,1) 0%, rgba(235,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,187,214,1)), color-stop(100%,rgba(235,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,187,214,1) 0%,rgba(235,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbd6', endColorstr='#ebffff',GradientType=0 ); /* IE6-8 */ </code></pre> <p>and for IE9 don't forget to add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:</p> <pre><code>&lt;!--[if gte IE 9]&gt; &lt;style type="text/css"&gt; .gradient { filter: none; } &lt;/style&gt; &lt;![endif]--&gt; </code></pre> <p>For rounded corners in IE9 you can add this:</p> <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload