Want to make a word stand out in your website layout? Well, a thick 3D look text effect might do the trick for you.
Preview
Hello
Use the following markup and CSS code for this effect. The code below over-ride the current font to ‘Verdana’ and the font size is bumped up to ‘300px’. You can make these changes in the code including font colour and weight depending on your requirements.
Markup
<div class="vc-text-15">Hello</div>CSS Code
.vc-text-15 {
font-family: verdana;
font-size: 200px;
font-weight: 700;
color: #fafafa;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}Preview: Headline Block
Hello
Above is the preview within Gutenberg blocks editor It has a headline block within a cover block (that has a background colour set).
- Add cover block and set background colour.
- Then add headline block within color block.
- Assign class vc-text-15 to the headline block.
- Add the following CSS code to render effect.
h2.vc-text-15 {
font-family: verdana;
font-size: 200px;
font-weight: 700;
color: #fafafa;
text-shadow: 1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}The code above over-ride the current font to ‘Verdana’ and the font size is bumped up to ‘300px’. You can make these changes in the code including font colour and weight depending on your requirements.
💬 Subscribe for Free, for more CSS magic.
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login
For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login