it should look like http://img190.imageshack.us/img190/1686/textgradient.jpg the tricky part is, it should work for opera, canvas..? also important: the transparency is only needed for the big texts in the screenshot.
the text is simple html text in a span tag. the background is a somewhat transparent png, defined as css background-image of the container div.
i'd have no problems with using canvas or something like that for displaying the text.
If only Cufón supported a horizontal linear gradient "out of the box" you would have been sorted for an easy <canvas> solution. Funnily enough, a conversation on cufon supporting a horizontal linear gradient was just started in the last 24 hours. The demo below demonstrates Cufón with a vertical linear gradient using rgba.
Demo: jsfiddle.net/Marcel/35PXy (fullscreen)
well, it was a long day, and i've found a solution by myself.
it uses canvas.
for a canvas with html height 73px and width 720px:
var ctx = myCanvasEl.getContext("2d");
ctx.font = "53pt Arial, Helvetica, sans-serif";
var gradient = ctx.createLinearGradient(400, 0, 650, 0);
gradient.addColorStop(0, "rgb(255,255,255)");
gradient.addColorStop(1, "rgba(255,255,255,0)");
ctx.fillStyle = gradient;
ctx.fillText(myText, 0, 58);
The simplest way to do this that I can think of is to create a copy of the background image, go into photoshop and create a gradient that's mostly transparent. Then overlay the gradient on the text. That'll work in every browser, I believe.
You don't need canvas anymore. Use property background-clip: text combined with a gradient background with rgba (alpha channel to full transparency).
Here an example:
http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index2.html
It's great but it works just in webkit browser, at this time.
For a more compatible solution you can look at mask-image http://trentwalton.com/2011/05/19/mask-image-text/
Similar to the first method, you should fade mask to full transparency to get the effect you want to realize.
Related
I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).
Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.
SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).
Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.
Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code.
Instead, here's an image explaining the obvious idea:
Demo Fiddle
You CAN accomplish this in CSS only, but with limited support.
You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.
This will only work in webkit browsers however.
e.g.:
div {
color: white; /* Fallback */
background: url(yourimage.png) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
See here for more on background-clip
The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.
If there is no background image, this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.
Alternatively- you can use SVG, per this question
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
Is there a way to render background texture with alpha in a webpage? I want to have texture on top of a gradient so I can see through it.
I'm not using canvas for this (although I do use canvas for some other animation effect)
You can achieve that with CSS3 Multiple Backgrounds and CSS3 Gradients. Here is a good article on the subject.
Edit: To clarify, you basically need to just define two backgrounds on the object. First one would be the gradient while the second would be the alpha texture.
You don't need CSS3 for this. Use a seamless background tile on html and an alpha gradient on the body.
html {background: #fff url(path/to/bg-tile.png) repeat 0 0;}
body {background: transparent url(path/to/gradient.png) repeat-x 0 0;}
Multiple background images are not supported in IE<9
You could just use a big div as background and add the gradient and the png inside the div and then use css to resize and position
I wish to create breadcrumbs that employ css arrows, and want to apply a gradient on the background, but have been unable to set a gradient for the css triangles themselves.
I'm wondering if I can set an opacity on the triangles , and then lay them over top of a div with the desired background gradient. This also has to be compatible down to IE7. So far no luck. Does anyone have any suggestions?
Use PNG image for the arrow. Arrow image must have transparent background.
The best way to achieve what your looking for would be to use an image. IE7 I don't think supports opacity without some javascript manipulation. Use a gif or another type of image with transparent background.
This is how you set opacity or <=IE8
.triangle {
filter: Alpha(Opacity=80); // ie argh!
opacity: 0.8; // standard browsers
}
I would like to know if there is any way I can apply 100% transparency to text so that we can see the background picture of the page within the characters in the text.
i.e. imagine I’ve got a <div> with a white background, and a background image on <body>. I’d like to set the text inside the <div> so that the background image on <body> can be seen through the text, despite the white background on the <div>.
I could probably use an inverted font but I would prefer a better way to do it if there is one.
Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).
I'm not sure if this is what you want, but will explain it anyway.
Situation: you have a non plain background that you want to bee seen through your text.
Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text
This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.
This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).
Edit
Seeing Paul's find on webkit got me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvas element on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.
So far with canvas, this is what I did
<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);
// set composite property
ctx.globalCompositeOperation = 'destination-out';
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);
ctx.strokeText("red rectangle", 10, 40);
</script>
</body>
</html>
by using a detination-out compositing and drawing text on the canvas.
I’m not exactly clear what you’re asking (100% transparency means that something’s invisible, and invisible text isn’t generally a great idea), but in general:
The CSS opacity property applies to an entire element, not just its text. So if you have this HTML:
<div class="opacity-50">
This is a div with a background colour and 50% opacity
</div>
And this CSS:
.opacity-50 {
background: #ccc;
color: #000;
opacity: 0.5;
}
Then both its background and its text will have 50% opacity.
rgba colour values allow you to specify semi-transparent colours. So, if you have this HTML:
<div class="text-opacity-50">
This is a div with semi-transparent text
</div>
And this CSS:
.text-opacity-50 {
background: #ccc;
color: rgba(0,0,0,0.5);
}
Then only its text will have 50% opacity.
I think rgba colour values are supported by slightly fewer browses than opacity.
Ah — if you’re talking about “punch-through” transparency, no, CSS doesn’t do this.
Except for WebKit (the rendering engine in Safari and Chrome), which has a totally custom, made-up-by-Dave-Hyatt, not-even-in-CSS-3 property value, -webkit-background-clip: text;.
No other browser other than Safari and Chrome supports it.
You can spent the time to make your own font with InkScape and IcoMoon and make a negative knocked out font, then your letters can be see trough! I used this technique for some see trough Icons.
Why not try to set the DIV's background image to a completely transparent GIF?
http://www.pageresource.com/dhtml/csstut9.htm
Using a .png without background is a good method. In Photoshop you can save for the web.
or in css:
#div
{
background:transparent;
color:whatever;
}