Menu
I have two fonts, Cooper Black and Cooper Hilite. I would like to place them on top of each other, as in this image: http://viewerslikeu.squarespace.com/storage/720x360_1.png
Any takers?
316
Well, one way of doing it purely with CSS is by using the :after pseudo element.
Check this fiddle: http://jsfiddle.net/4xgdv/
The original element is relative and its pseudo child is absolute at 0, 0 to ensure that it properly overlays the original element.
HTML
<div class="doublefont">HELLO</div>
CSS You can remove the div. part to make it applicable to all elements
div.doublefont {
position: relative;
color: red;
font-family: arial;
}
div.doublefont:after {
content: "HELLO";
color: blue;
font-family: tahoma;
position: absolute;
top: 0;
left: 0;
}
Making it generic
You can add a little bit of JS to automatically have all elements on your page with a class doublefont to show up with superimposed fonts. That is, you need to simply put in elements like <div class="doublefont">My text..</div> and the following JS in combination with the above CSS will do the rest. You can place the following JS into the <head> of your page.
$('.doublefont').each(function() {
$(this).attr('content', $(this).html());
});
Updated Fiddle: http://jsfiddle.net/4xgdv/1/
Also, take a look at this related answer. This is from where I got the attr(content) hint.
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
116
Add position:relative to your first and the second font and add top:-20px or whatever (value should be negative) is the size of the font and specify z-index:2 to the font you want to be above and z-index:1 to the font you want below...
Example
.first {
font-size:20px;
position:relative;
z-index:2;
}
.second {
position:relative;
top:-20px;
z-index:1;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
