I’m a bit confused as to why we all want to be able to create scaleable graphics in our CSS when we can already do that in SVG. With an SVG background you can set the border, the border radius, a box shadow, a gradient as well as the background color. This means that lines 6 through 13 in this example could be one line:
background-image: url(button_back.svg);
Yes you need another 14 lines in an SVG file, but the possibilities are far greater than CSS3 will ever deliver.
Opera have seen the light and enabled SVG as a background in 9.5, I’m hoping the others will follow suit.
Chris Sharp
In my opinion this
-webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b))
is getting remarkably close to this
<linearGradient id=“fadedown” x1=“0%” y1=“0%” x2=“0%” y2=“10%”>
<stop offset=“0%” stop-color=”#dad” stop-opacity=“1”/>
<stop offset=“100%” stop-color=”#ebe” stop-opacity=“1”/>
</linearGradient>
The first is CSS and the second SVG.
I’m a bit confused as to why we all want to be able to create scaleable graphics in our CSS when we can already do that in SVG. With an SVG background you can set the border, the border radius, a box shadow, a gradient as well as the background color. This means that lines 6 through 13 in this example could be one line:
background-image: url(button_back.svg);
Yes you need another 14 lines in an SVG file, but the possibilities are far greater than CSS3 will ever deliver.
Opera have seen the light and enabled SVG as a background in 9.5, I’m hoping the others will follow suit.