I have a text input field in HTML and the attribute placeholder:
<input type="text" placeholder="Filter results...">
Unfortunately, the placeholder attribute seems not to work? I thought it is implemented in Internet Explorer 9?
You can see the demo here: http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit
Also I have a problem with -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#f0f0f0')"; in combination with a background-image. In all other browsers, Firefox, Opera, Safari, Chrome, the gradient and the background-image is displayed. Only in IE 9 the background-image is not there. I have to exclude the gradient, then I can see the image. But what can I do to have both?
Here is the demo with the gradient:
http://jsbin.com/esiya3/5/ - http://jsbin.com/esiya3/5/edit
and without the gradient:
http://jsbin.com/esiya3/6/ - http://jsbin.com/esiya3/6/edit
Perhaps someone have an idea?
Thank you in advance & Best Regards.
You could combine a gradient filter with an alpa image loader:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png')
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0');
to solve the gradient-picture problem.
you can use svg for background-image.
you should with svg tag create your gradiant & save it with etension .svg , then load it in css file.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="g">
<stop offset="0" stop-color="blue" />
<stop offset="0.3" stop-color="yellow" />
<stop offset="0.6" stop-color="orange" />
<stop offset="1" stop-color="red" />
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</svg>
css file
div{background-image: url(gradient.svg);}
Related
I have some SVG elements (rectangles). When I double click on these I add a class to the rectangle.
This class is like so :
.highlighted {
stroke: green;
stroke-width : 3px;
}
Basically a green border. I tried the class like this :
.highlighted {
border: 3px solid green;
}
But it doesn't work as I'm working with SVG not HTML.
My question is, is it possible to have multiple strokes on one SVG rectangle element ?
At present the answer is no.
You would need a second rectangle to create the other 'stroke'.
There is hope however
Extract from the W3 spec
SVG 2 supports multiple strokes, which we will need updated wording to handle in this specification.
As for borders...they do not apply to SVG internal elements such as paths and rectangles etc....only the full SVG itself.
It is possible to have multiples borders on a div (with outline and border), but not on SVG.
You can to try with multiple paths.
My SVG knowledge is pretty minimal, but I think it should be possible to achieve these results using SVG Vector Effects.
"Vector effects allows stroking to be applied multiple times."
http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffectsPrimer.html
Also, read this, please:
https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment
I don't know how to do it with a rectangle element but I can think of a way for circle and ellipse elements
<svg height="150" width="500">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255)" />
<stop offset="20%" style="stop-color:rgb(255,255,255)" />
<stop offset="20%" style="stop-color:rgb(100,255,255)" />
<stop offset="40%" style="stop-color:rgb(100,255,255)" />
<stop offset="40%" style="stop-color:rgb(50,5,255)" />
<stop offset="60%" style="stop-color:rgb(50,5,255)" />
<stop offset="60%" style="stop-color:rgb(50,50,25)" />
<stop offset="80%" style="stop-color:rgb(50,50,25)" />
<stop offset="80%" style="stop-color:rgb(250,0,0)" />
<stop offset="100%" style="stop-color:rgb(250,0,0)" />
</radialGradient>
</defs>
<circle cx="70" cy="70" r="55" fill="url(#grad1)" />
<ellipse cx="250" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Is possible to fill SVG by gradient colors after a button is clicked on the page? I read a lot of articles here, but none helped me. I need the gradient colors only in css (The best option).
Here's an example where I need to apply for "metalic colors" - http://web-stranky.org/pro_dementa/
I would be grateful for any help.
Svg yet not support CSS3 gradient property, although you can fill gradient in svg by defining gradient in svg and using fill property to attain gradient fill in svg.
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
for more details
http://www.w3schools.com/svg/svg_grad_linear.asp
So I know I can swap out a gradient fill on an svg with css, something like;
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#GradientSwap1)}
</style>
<defs>
<linearGradient id="GradientSwap1">
<stop offset="5%" stop-color="#F00" />
<stop offset="95%" stop-color="#999" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>
and using ng-class I can swap out more than one of these gradients, except I can only get it to work if I include the <linearGradient> in the defs embedded into each SVG.
My question is, and what I can't seem to figure out. Is there a way to pull these gradient defs out of the SVG and make them into a resource I can use in others? Like in the .NET / XAML world, it would be really easy for me to pull them out, throw them in a resource dictionary, and use the same ones all over the place for whatever I like.
So is there an html5/css3/angular approach to the same conundrum? The idea of having to have to multiple SVG's with potentially multiple of the same Gradient defs reiterated for every single one just sounds wrong.
You should be able to define the gradient once and then call it in the CSS to apply anywhere. You could apply to all svgs or give it a class.
<svg>
<defs>
<linearGradient id="GradientSwap1">
<stop offset="5%" stop-color="#F00"></stop>
<stop offset="95%" stop-color="#999"></stop>
</linearGradient>
</defs>
<section>
<svg class="icon shape-facebook">
<path d="M28.3,62V35.2h-5.5v-9.4h5.6v-7.7c0,0,0.3-9.8,9.8-9.8s9.5,0,9.5,0v9.2H42.1c0,0-2.699,0-2.699,2.7c0,2.7,0,5.8,0,5.8H48
l-1.1,9.4H39.6V62H28.3z"></path>
</svg>
<svg class="icon shape-heart" x="0" y="0">
<path d="M35.645,59.413c0,0,26.949-19.601,26.949-34.12c0-16.752-22.049-22.047-26.949-1.674
c-4.9-20.373-26.95-15.078-26.95,1.674C8.695,39.812,35.645,59.413,35.645,59.413z"></path>
</svg>
.shape-heart { fill: url('#GradientSwap1'); }
http://jsfiddle.net/v6osyy5v/1/
Essentially I'm trying to create an gradient alpha mask in using SVG and CSS (like this), and since the mask property is no longer on the standards track I'm exploring the filter route.
I've created a vertical alpha mask in Sketch, with the top being 0% #000000 and the bottom being 100% #000000, then exported it as an SVG and tweaked it using guidance from this O' Reilly article. It now looks like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- Start by creating our vertical linear gradient -->
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="alphaLinear">
<stop offset="0%" style="stop-color: #000000; stop-opacity: 0%;" />
<stop offset="100%" style="stop-color: #000000; stop-opacity: 100%;" />
</linearGradient>
<!-- Create a rectangle and apply the gradient as its fill -->
<rect id="boxRect" x="0" y="0" width="100%" height="200" style="fill: url(#alphaLinear);" />
<!-- Using that rectangle, we'll create a filter -->
<filter id="alphaGrad">
<feImage xlink:href="#boxRect" result="grad"/>
<feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="grad"/>
</filter>
</defs>
<use id="gradientBox" fill="url(#alphaGradient)" xlink:href="#boxRect"></use>
</svg>
My knowledge of SVG isn't the greatest so I'm suspecting this is where I've gone wrong.
Next, I applied the filter using filter (and -webkit-filter) along with referencing the filter ID #alphaGrad:
-webkit-filter: url('http://blahblah.com/alphagradient.svg#alphaGrad');
But, of course, this it doesn't work. Can anyone help me get the hang of this? Or is this even possible? If not, can someone recommend a method of how to achieve this?
Thanks in advance!
Update: here's a pretty basic fiddle of what I'm doing...
There are many errors and misconceptions in your example (why did you think a displacementMap would help you?)
Why don't you start from the code below - pure SVG using an SVG mask and an SVG image.
<svg width="600px" height="600px" viewbox="0 0 600 600">
<defs>
<linearGradient id="alphaLinear">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
<stop offset="100%" stop-color="#999999" stop-opacity="100%" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)" />
</mask>
</defs>
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/7/71/Anadama_bread_(1).jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet" mask="url(#Mask)"/>
</svg>
Few remarks:
SVG (and CSS) opacity value is not percertentual range but 0.0 - 1.0 range.
Mentioned mask property appears to be just prefixed in Webkit and unprefixed in Gecko.
If your target environment is HTML + CSS, you might not necessarily need SVG: you could get similar effect using linear-gradient and RGBA
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); on some overlay (pseudo) element. pointer-events: none; could be useful then.
Ive been creating css3 text gradients. They work perfectly find in browsers, but when you view them on the web. there is always a line or a box around the text. Similar to what happens on this page: http://www.paulund.co.uk/playground/demo/css_text_gradient/
Is this a webkit bug?
Thanks to Michael's advice using an svg bg over a css3 generated one fixes the mobile issue.
Here is the code for the css:
background:url(../img/grad.svg) 0 -116px;
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
And then the grad.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60">
<linearGradient id="normal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="60" fill="url(#normal)" />
</svg>