I'm trying to fill in the content of a text in a h1 tag by an image.
Following my understanding ;-), I'm doing the following in the html:
<div class="image_clip">
<h1>
MY WONDERFULL TEXT
</h1>
</div>
And in the css file:
.image_clip{
background: url(../images/default.png) repeat;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The fact is that it does not yield the expected result... that is the text with the image in it as color.
The image is displayed on the entire background of the div and not only behind the text.
The text itself is moreover still in black.
I'm trying that on Firefox. Don't have other browsers.
Did I missed something?
Tks for the help.
Whilst -webkit-background-clip:text exists, -moz-background-clip:text does not, so you won’t be able to achieve your clipping effect in Firefox. (Unless there’s another way I can’t think of.)
Neither does -moz-text-fill-color, although you could just use color:transparent, as long as the element doesn’t have anything else (e.g. borders, -wekbit-text-stroke) that you want to be visible.
Your code does work in Chrome and Safari:
http://jsfiddle.net/7T8am/2/
However, the <h1>’s text does need to be transparent, so if any other CSS code is setting a colour for the <h1>, you’ll need to override it.
Per the standard, the background-clip property (which is implemented without a prefix in Firefox, by the way), doesn't have text value. You're using a proprietary WebKit feature, not a standard CSS property....
You are applying the style to the enclosing div, not the h1 tag. Try changing your selector to be .image_clip h1 {your:styles;}, or alternatively you can leave your CSS the same and apply the class to the h1 with <h1 class="image_clip"></h1>.
To get background-clip:text to give the anticipated appearance in Firefox you could use this polyfill - https://github.com/TimPietrusky/background-clip-text-polyfill - that replaces the CSS with an SVG version in non Webkit browsers. [untested but seen working]
Related
I'm trying to make gradient text in webkit browsers using this CSS code:
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.
HTML is as follows:
<p class = "text">Hello world.</p>
Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.
IMPORTANT UPDATE:
I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:
<div class = "text">
<p>First line.</p>
<p>Second, way longeeeeeeer line. </p>
<p>Third line, just to see gradient span over multiple lines. </p>
</div>
Any thoughts why this could be the case or how to overcome this?
I found a simple fix for this
.text, span {
display: block;
}
I know it's an old question but in case someone still needs it: I had the same problem and what worked for me was to add a text-shadow to it and make the shadow transparent.
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}
Note that I added '00' to the end of the HEXA code which leads to transparency if someone doesn't know!
If you code like this <h1>Discover <span>Something</span></h1> then text gradient won't appear in Safari but does appear fine in Chrome and Firefox.
If you do like this <h1>Discover Something</h1> without span tag then it does work properly. I don't think Safari liked tags inside the tag. Nasty bug. It works on other browsers like Chrome and Safari.
If you have a two lines text and in Safari does not works, try:
-webkit-box-decoration-break: clone;
flex or inline-flex are the problems if you are using it.
block or inline-block are fixing the problem
This remains a Safari bug as of May 2018. The gradient properly appears if the text is first highlighted, and then unhighlighted.
I was able to use the following alternative:
.text {
-webkit-mask-image: linear-gradient(blue, green);
}
This is working in Safari 11, iOS Safari 11, Chrome 66, and Firefox 60.
Inspired by https://stackoverflow.com/a/45136579/9772439
I had the same problem with b tag, and solve it with property
display: inline-block;
I had the same issue and it looks like it's a Safari bug.
I noticed that the issue only happens when your cascading elements are block types.
My hack for this went like this
<div class = "text">
<span>First line.</span>
<p></p>
<span>Second, way longeeeeeeer line. </span>
<p></p>
<span>Third line, just to see gradient span over multiple lines.</span>
<p></p>
</div>
The only reason I have the paragraph tags is for spacing since adding a display block on the spans will trigger the bug again.
For me, the easiest way to archive this is drawing text as image, contain shadow... And put it in background css.
If you have tried all of the above and none are working, check to see if you have a Pseudo element on the tag.
Safari doesn't like it if these are static so you'll need to position them absolute.
I have the same issue, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case p.text
I have a document that I can't edit the HTML of (a payment page on Shopify) so for security reasons, they don't allow you to edit this (unfortunately, same as the javascript).
You can however, edit your own css. So this is why it must be css only if possible.
I want to basically replace text via css. I know that this itself isn't possible, but this is how I've managed to do the next best thing:
HTML
<P>This is some nice text here</p>
CSS
p:before{
content:'This text has replaced the original.';
visibility:visible;
}
p{
visibility:hidden;
}
JsFiddle - Codepen (for viewing in IE8/EI9)
For the most part, this works and for now is our preferred method.
However, in IE8/EI9, visibility is not supported. (Source)
I've tried other methods such as:
display:none;
and
opacity:0;
but both of them hide :before.
I have also tried to change the text color to the background color, but we don't like the idea of having the text still on screen if highlighted (I know, beggars can't be choosers).
My question is: Are there alternatives to this approach that work in IE8/EI9?
Thanks.
You could use font-size : http://codepen.io/anon/pen/KuJln
p:before{
content:'This text has replaced the original.';
font-size:16px;/* if rem not supported */
font-size:1rem;
}
p{
font-size:0.01px;/* 0+ for ie , yep :) */
}
You can change the color.
http://jsfiddle.net/Epte8/1/
If you don't have a solid background, you could use rgba for IE9 to set the transparency of the color, but that is unfortunately not supported in IE8 (I don't think you can set a transparent text color there).
I've made this fiddle, to demonstrate my problem and question.
I want to have the div that holds all the text have an opacity so that you can see the background (for some reason the background won't show up, works on my machine).
However, in my example all the text has got the same opacity, and that isn't useful for reading.
So basically, how do you have full opaque text, I assume that any child elements will be set to the opacity setting of the parent?
html:
<div class="mainPage">
<h1>Welcome</h1>
<p>... some text ...</p>
</div>
css:
.mainPage {
opacity:0.6;
}
You want to use
.mainPage {
background:rgba(0,0,0,0.6);
}
where 0,0,0 represent black (255,255,255 would be white then) and 0.6 alpha channel
but it is CSS3 so check for the compatibility. Also if you want to this to work in older versions of IE, you could consider PIE CSS
EDIT: As other have mentioned, there are other solutions possible here. To use repeating transparent 1x1px image as your background (which will not work in IE6 if you care?), there are also some php scripts to include to your css that will generate those images automatically for you.
Or another solution would be to use another div with opacity and position it absolutely behind your content, so that div wouldn't contain your content but anyway would be behind.
Opacity affects whole element, so there is no way to do that just using "opacity".
You may set RGBA color to background (last argument is opacity), use transparent BG image or create another div (wrapper) with opacity.
If you need support old browsers, see fiddle with wrapper:
http://jsfiddle.net/nick4fake/N78G8/
<div class="a"><div class="b b2"></div>My text example</div>
<div class="b">My text example</div>
Here b2 is wrapper class.
Also, check this link:
http://css-tricks.com/forums/topic/css-transparency-in-wrappers/
Two possibilities:
Use rgba colours:
background-color:rgba(255,255,255,0.6);
Though you'll want to check the compatibility of this, as it's CSS3. The only browsers that it doesn't work in are Internet Explorer 6, 7, and 8 (and less), so you might be ok using this - it works in all other major browsers.
Make a semi-transparent PNG in Paint.NET, Photoshop, or some other similar program, and use that as the background image:
background-image:url("./myTransparentImage.png");
This has the benefit of working on pretty much every browser, except probably IE6 and the like as it doesn't support alpha transparency.
You'd probably want to make it a 1px × 1px image, to keep the size down, and then that would tile across the whole element.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...