sometimes web designer doesn't pay attention to style his text and this can be a disadvantage to the final result. the major content of the web is text so it's important to style his text and make it look beautiful and clear, so it can attract the user and it will increase your traffic.
in this small tutorial, I will show you how to make a floating letter in a paragraph like what we see in old books using only HTML and CSS.
for this tutorial we will use the float property in CSS, to make that cool effect we will write a simple paragraph ( i will not write a full paragraph, of course, we will just copy a generated paragraph from Lorem ipsum ) and we will put the first letter of the paragraph inside a <span> with class name
" first " for example then we will apply float left to this span and the effect will be great.
now let's see the full source code
HTML CODE :
<!DOCTYPE HTML>
<html>
<head>
<title>Float Letter</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>
<span class="first">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper scelerisque mauris id fermentum. Morbi in risus eu ligula efficitur mattis. Nulla ac nibh eros. Aliquam eu mauris tempus, malesuada lectus quis, lacinia purus. Nam efficitur luctus commodo. Cras leo lorem, consectetur vitae porta at, dictum et leo. Morbi mi arcu, tempor ac placerat vulputate, vestibulum eu dui. Vestibulum et luctus ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</body>
</html>
CSS CODE:
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #fafafa;
}
p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 30%;
font-size: 1.8rem;
line-height: 2.3rem;
}
.first{
font-size: 5rem;
float: left;
}
and that's it, you can now use this effect in your web sites and you will see that this simple thing can do a very huge difference to your web site.
Make a floating letter in HTML and CSS
Reviewed by Medics
on
March 26, 2019
Rating:
Reviewed by Medics
on
March 26, 2019
Rating:
No comments: