My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
SVGs as css baground-image
here is a testcase for svg as css background-image.you can see it with Opera 9.5 . this is the svg i use in the testcase:
it seems one can do some funky stuff with this feature.
again great job Opera team !
yeah i see, but this is svg in html:img that is broken not svg in css-background.
if i could provide a width and height for the image tag, it all works.see
http://treebuilder.de/svg/svginimg/xsltimage.html
in this example zooming works fine for html:img.
by the way, here is another example for svg in css, turning all links into buttons:
http://treebuilder.de/svg/svgincss/test3.html
and the image used is:
if i could provide a width and height for the image tag, it all works.see
http://treebuilder.de/svg/svginimg/xsltimage.html
in this example zooming works fine for html:img.
by the way, here is another example for svg in css, turning all links into buttons:
http://treebuilder.de/svg/svgincss/test3.html
and the image used is:
Very nice!
Mail: 9.27 • Primary: 10.63 (has annoying UI regressions: inability to detach tab normally, passes source file w/o extension to external editors) • Secondary: 11.64
extendopera.org • Report bugs to public BTS • „Removing options is evil“ — Jon Stephenson von Tetzchner
extendopera.org • Report bugs to public BTS • „Removing options is evil“ — Jon Stephenson von Tetzchner
hey,
@FataL: thanks !
I found a much simpler way of doing stroke only rounded borders.
it reqires only two rects, one as a mask, and the other with a larger stroke width, that is cut by the mask; here is an example code:
thats what it looks like:
and here are some variations of that:
single, double and triple stroke
with gradients and filters
off to more experiments
cheers
Holger
@FataL: thanks !
I found a much simpler way of doing stroke only rounded borders.
it reqires only two rects, one as a mask, and the other with a larger stroke width, that is cut by the mask; here is an example code:
<svg xmlns="http://www.w3.org/2000/svg"> <mask id="m1"> <rect x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="white" stroke="black" stroke-width="20"/> </mask> <rect stroke="navy" stroke-width="40" mask="url(#m1)" x="0" y="0" width="100%" height="100%" rx="40" ry="40" fill="none"/> </svg>
thats what it looks like:
and here are some variations of that:
single, double and triple stroke
with gradients and filters
off to more experiments
cheers
Holger
Very nice stuffs! Thanks.
See ya, Darken
Opera useful/related links
Opera useful/related links
Wow, really impressive!
Hmm I think I found a bug in Kestrel:
go to http://treebuilder.de/svg/svgincss/test3.html
Everything looks fine. Now go to adressbar an hit enter (basicaly refresh from cache).
Now the SVGs are no longer streched, but repeated
Hmm I think I found a bug in Kestrel:
go to http://treebuilder.de/svg/svgincss/test3.html
Everything looks fine. Now go to adressbar an hit enter (basicaly refresh from cache).
Now the SVGs are no longer streched, but repeated
Using Windows 7 64Bit SP1 and of course Opera
(If nothing else stated the most current weekly) on a nice Dell Studio XPS 16!
(If nothing else stated the most current weekly) on a nice Dell Studio XPS 16!
As someone who's experimented with rounded corners and other types of SVG backgrounds I must say this is some amazing work! I especially like your latest method, and its simplicity. I should remember to use the mask element more myself in my experiments.
Keep up the good work, can't wait to see what you come up with next!
Keep up the good work, can't wait to see what you come up with next!
<a href="http://a.deveria.com/">Fyrdility</a>.
Hey,
thanks for all your responses !
@Hades32: we should collect the bugs concerning the new SVG features in a seperate thread, i think.have you posted the bug yet ?
@Fyrd: thanks for the links, i will have to take a better look at your work when i find some time.
here is a new one.it isnt that simple, but i hope you like it anyways.
its just playing around seeing what can be done.
here is the image:
and a link to a working example:
http://treebuilder.de/svg/svgincss/tv/test3.html
have fun
Holger
thanks for all your responses !
@Hades32: we should collect the bugs concerning the new SVG features in a seperate thread, i think.have you posted the bug yet ?
@Fyrd: thanks for the links, i will have to take a better look at your work when i find some time.
here is a new one.it isnt that simple, but i hope you like it anyways.
its just playing around seeing what can be done.
here is the image:
and a link to a working example:
http://treebuilder.de/svg/svgincss/tv/test3.html
have fun
Holger
Hi Jeff,
thanks ! and hows it going ?
...here is another simple one, you can use a partly opaque SVG and a background color at the same time, like so:
with this you can achieve a nice effect of multible colored buttons, with only one SVG file.
the testcase is here
cheers
Holger
thanks ! and hows it going ?
...here is another simple one, you can use a partly opaque SVG and a background color at the same time, like so:
a {background:green url(grad.svg)}
a:hover {background:blue url(grad.svg)}
with this you can achieve a nice effect of multible colored buttons, with only one SVG file.
the testcase is here
cheers
Holger
Hi, I tried to use this technique on a page I'm working on, but I can't seem to get it to work. I made it work in a test page, but it's just not happening in the actual site, where I need it.
www.euroworker.no is where I'm trying to administer this technique.. (Where it says "Filter Meny")
div.box .title
{
background-image:url(/OPRC.svg);
background-color:#eeeeee;
border-color:#dddddd;
border-bottom-width: 0px;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
padding: 3px;
color: #143788;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
-moz-border-bottom-right-radius:0px;
-moz-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
}
And the SVG
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
</style>
<mask id="m1">
<rect width="100%" height="100%" rx="5" ry="5" fill="rgb(238,238,238)" stroke="black" stroke-width="1" />
</mask>
<rect stroke="rgb(221,221,221)" fill="rgb(238,238,238)" stroke-width="4" mask="url(#m1)" width="100%" height="100%" rx="5" ry="5" />
</svg>
Thanks!
www.euroworker.no is where I'm trying to administer this technique.. (Where it says "Filter Meny")
div.box .title
{
background-image:url(/OPRC.svg);
background-color:#eeeeee;
border-color:#dddddd;
border-bottom-width: 0px;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
padding: 3px;
color: #143788;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
-moz-border-bottom-right-radius:0px;
-moz-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
}
And the SVG
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
</style>
<mask id="m1">
<rect width="100%" height="100%" rx="5" ry="5" fill="rgb(238,238,238)" stroke="black" stroke-width="1" />
</mask>
<rect stroke="rgb(221,221,221)" fill="rgb(238,238,238)" stroke-width="4" mask="url(#m1)" width="100%" height="100%" rx="5" ry="5" />
</svg>
Thanks!
Moderated by: 
Holger Will