StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Opera 10.x supports SVG in background images, and SVG lets you do gradients in much the same way Firefox and Safari’s CSS extensions do.</p> <p>Opera’s SVG background support seems to have some nasty bugs when your element also has borders in 10.0 and below, but as of 10.5 it seems reasonably solid (in my limited experience).</p> <strong>CSS</strong> <pre><code>/* Opera */ background-image: url(gradient.svg); </code></pre> <strong>gradient.svg</strong> <pre><code><svg xmlns="http://www.w3.org/2000/svg" version="1.0"> <defs> <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0%" style="stop-color: #c6c6c6;"/> <stop offset="100%" style="stop-color: #dcdcdc;"/> </linearGradient> </defs> <rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" /> </svg> </code></pre> <p>You can also include the SVG directly in the CSS file, using a data url, if you url encode the SVG. (In e.g. Python, you can do this by removing newlines and unnecessary spaces, and then passing the file’s contents to <code>urllib.quote</code>).</p> <p>It’s a bit unreadable, but it saves an HTTP request, and if you’ve got more than one SVG gradient embedded in your CSS file, you should see some bandwidth savings over individual files (assuming your CSS file is gzipped).</p> <pre><code>/* Opera */ background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.0%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gradient%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20style%3D%22stop-color%3A%20%23c6c6c6%3B%22/%3E%3Cstop%20offset%3D%22100%25%22%20style%3D%22stop-color%3A%20%23dcdcdc%3B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20fill%3D%22url%28%23gradient%29%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20/%3E%3C/svg%3E); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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