Hello everyone,
I hope you have a good weekend. So here is new for people who want to learn in HTML.
Cascading Style Sheet also commonly known as CSS is code web blog which is used in editing the themes of blogs. Expert webmasters use the CSS to design separate themes.This is also used in re-designing the fonts of the blogs. In this digital age one can think of having colorful attractive fonts, but the fact is not exactly the same. Previously the chromatic style which made the shades, outlines, and several colors were actually made of two or more sets which were kept one over the other and printed in order to get the desired color effect.
Even today, the digital descendants of the old form are designed to be used in just the similar way. A combinations of several complementary styles are combined together to form a specific layer font family. Most commonly there is a regular style which is used independently as a base and above it there are several supplementary styles such as decorations and outlines are kept in the top. These supplementary styles cannot be used as a base, and hence are used as in collaborating them with one of the other style so as to keep that font readable.
Use of Layer fonts in Browsers
In programs like Illustrator, Photoshop or any of the graphic elements that uses the layers, the layering can be done simply but when it comes to the browsers, how is it done there?
Layering of the fonts using<div>s
There is one way to creates many <div>s and pin them all at one point as shown below:
<!– HTML–>
<div id=”first”>
<h1>Using Layer Fonts In CSS</h1>
</div>
<div id=”second”>
<h1>Using Layer Fonts In CSS</h1>
</div>
<div id=”third”>
<h1>Using Layer Fonts In CSS</h1>
</div>
/* CSS */
#first, #second, #third{
display: block;
position:absolute;
top:10px;
left:5px;
}
h1 {
font:5em ‘One’;
color:rgba(200,0,0,.85);
}
#second h1 {
font-family:’Two’;
color:rgba(0,200,0,.85);
}
#third h1 {
font-family:’Three’;
color:rgba(0,0,200,.85);
}
This is a tested method and it involves the creation of a div for every layer of the fonts and then the repetition of the same content again in every div. This results into a semantic mess which fails completely in separating the content and the information of the style used.
Pseudo Elements used in layering fonts
Another simple technique used which do not have a interface with the mark up and uses the ∷before and ∷after the pseudo elements, the text can be easily be layered without disturbing the html. This is something it looks like when built up completely.
