Skip to content

Instantly share code, notes, and snippets.

@Cifro
Created January 26, 2011 22:39
Show Gist options
  • Save Cifro/797655 to your computer and use it in GitHub Desktop.
Save Cifro/797655 to your computer and use it in GitHub Desktop.
When will be Opera support CSS3 gradients?
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200px"
height="200px"
version="1.0"
>
<style type="text/css">
.start {
stop-color: rgb(240,240,240);
stop-opacity: 0.5;
}
.end
{
stop-color: rgb(20,20,20);
stop-opacity: 0.5;
}
</style>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" class="start"/>
<stop offset="100%" class="end"/>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>
<?php
// gradient-bg.svg from http://www.display-inline.fr/projects/css-gradient/
// with Opera option
$file = file_get_contents(__DIR__ . '/gradient-bg.svg');
$out = preg_replace("/\s+/", ' ', $file);
$out = base64_encode($out);
$dataurl = 'data:image/svg+xml;base64,';
echo '<pre style="pre-wrap; word-wrap: break-word;">';
echo $dataurl . $out;
echo '</pre>';
echo '<pre style="pre-wrap; word-wrap: break-word;">';
echo 'background-image: url("' . $dataurl . $out . '");';
echo '</pre>';
echo '<pre style="pre-wrap; word-wrap: break-word;">';
echo htmlspecialchars('<img src="' . $dataurl . $out. '">');
echo '</pre>';
echo '<img src="' . $dataurl . $out. '">';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment