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>
Related
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
I have a problem here. I need something to be implemented onclick of a button. I searched on the net and found out that SVG was an easier way to do it rather than CSS stylesheets.
I have an HTML5 canvas (which is basically a snapshot from a video stream that I have taken and drawn on to the HTML 5 canvas using drawImage()). On click of a button, I want the image with the following effect to come on the canvas instead of the original image.
My problem is that I am able to replicate the effect if I apply the effect on just an image. However, on the canvas it gives me the mask separately and the image separately. This is the code that I am using for the SVG
<svg height="0">
<defs>
<mask id="mask-radial">
<rect width="500" height="500" fill="url(#g1)"></rect>
<radialGradient id="g1" cx="80%" cy="80%" r="100%">
<stop stop-color="black" offset="50%"/>
<stop stop-color="white" offset="110%"/>
</radialGradient>
</mask>
<!--<mask id="mask-linear">
<rect width="400" height="300" fill="url(#l1)"></rect>
<linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0%"/>
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</mask> -->
<filter id="filtre1">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<!-- <filter id="filtre2">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter> -->
</defs>
</svg>
This is how I am calling it in CSS
.effet{
width: 500px; height: 500px;
margin: 0 auto 50px auto;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
position: absolute;
}
.filtre--r{
-webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 50%, black 80%);
-webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 80%);
-webkit-filter: blur(40px);
mask: url('#mask-radial');
filter: url('#filtre1');
}
and these are my HTML elements.
<div class="effet">
<img src="/static/images/noEffect.png" alt="" />
<img class="filtre filtre--r" src="/static/images/noEffect.png" alt="" />
</div>
Can somebody please tell me how I can recreate the effect for my canvas? Thanks in advance.
I researched and found that HTML5 Canvas radial gradient was an effective solution.
var lightSize = 100;
var x = 200;
var y = 200;
var radialGradient = context.createRadialGradient(x, y, 0,x, y, lightSize);
radialGradient.addColorStop(0, "#FFFF99"); // color at start circle
radialGradient.addColorStop(0.9, "#FFFF99"); //color at offset 0.9
radialGradient.addColorStop(1, '#7D7D5C');// color of finish circle
context.globalCompositeOperation = "multiply";
context.fillStyle = radialGradient;
Was able to recreate the effect totally.
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.
I've seen this technique used quite a lot. Like say a separator border (like bottom border for stackoverflow header) which fades at both ends. How do I achieve this with compass? I've searched their documentation and google and can't find any examples of how to do this.
I've never used Compass CSS, but how about mixing CSS and SVG?
Your SVG file:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
<stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" />
</svg>
The CSS:
div.separator
{
width: 80%;
height: 16px;
background-image: url(gradient_file.svg);
}
Does Opera browser supports linear-gradient? What is syntax?
Thanks
No, Oper does not support linear gradient of CSS3. But, you can use svg for backgrounds. Here is content of simple svg file with gradient:
<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: #9c0000;"/>
<stop offset="100%" style="stop-color: #590000;"/>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>
No, but it has been announced that it will very soon. My guess would be March.
AS of Aug 2011 YES, Opera does support linear gradients.
At Gradients in Internet Explorer 9 you can see the how using it.
Briefly:
/* Opera */
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);
Hope it helps you.
No but here's the best solution.
Go to photoshop, make a big ass gradient in whatever direction lets say 2560px x 20px
Use "save for website" as a jpg, using and any % of quality but save it as 2560px x 1px instead.
Use it as a background image with repeat-x or repeat-y whatever repeat is required to extend the 1px width/height....And it will barely cost you a KiloByte or two.