Hello friend, today I will try a new type of text shadow effect. Today's tutorial will include Rendon google fonts, css text effect, and a little JS. We have created today's tutorials by combining all of these. So without wasting time, let us get started.
Before starting the tutorial, I want to tell you that this type of Text effect is not used anywhere in reality or can also be used on the loading page of a website. I have made this tutorial here to have fun with CSS properties with you. So let's explore some new aspects of CSS properties.
What you will learn in this tutorial:- Link Google font used Javascript
- Change font family of any text randomly using JS.
- How to create cool text effects using CSS Text-shadow property.
Live demo:
Below is a live demo that will help you understand how the look text effect.
HTML:
In this tutorial we have used google fonts which will help us to get the font family of the heading. To do this we will simply add the code given below to the "head" section of our HTML file.
<link href="https://fonts.googleapis.com/css2family=Roboto&family=Playfair+Display&family=Lobster&family=Montserrat&family=Pacifico&family=Raleway&family=Shadows+Into+Light&display=swap" rel="stylesheet">In html we will create an <h1> element like in the previous GSAP Text Animation tutorial. We have given the heading id myText to set the event in Javascript. Just this piece of html code you need to write.
<h1 id="myText">Click Me!</h1>StyleSheet (CSS):
Centering the headingLet us start by setting a linear gradient background that blends two colors. These colors are hot pink (hex code #ff027f) and deep magenta (hex code #b4327a).
The next step is to center our heading both vertically and horizontally. We use the Flexbox method in every tutorial to center, but today we used the Grid method. In this method, we will first set the css display property to grid. Then we will set the place-items propriety to center, which will center our heading vertically and horizontally. Still, our heading is not in the middle of the screen, because we did not set any height. So we set the height to 100vh.
Finally we set the margin to 0 to remove the default margin of the document body.
body {
background: linear-gradient(#ff027f, #b4327a);
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
Moving on to our heading element in CSS. We begin by giving it a large font size of 5em so that the title stands out boldly on the page. We set the text color to a soft off white shade (hex code #dddef2). And for a modern look we choose a clean sans-serif typeface.
To make the heading interactive, we add a pointer to the cursor so that it changes to a pointer when the mouse is hovered over. We set the css user-selection property to none to prevent the text from being highlighted on click.
For the animation effect we apply a transition. We set the transition to the value all so that the changes to the property will animate beautifully in 1 second.
Finally this is the most interesting part of the text style, which we have been waiting for. That is the multi-layered text shadow effect.
We create this text shadow effect using different colors and offsets:
- vibrant pink (#ee5da8)
- bright sky blue (#4e9fdb)
- deep navy (#425294)
- purple accent (#8f54ce)
- fresh green highlight (#42f0a3)
- gray shadow (#6a6a6a8f)
Together these shadows create a colorful and almost 3D style typography effect.
h1 {
font-size: 5em;
color: #dddef2;
font-family: sans-serif;
transition: all 1s;
cursor: pointer;
user-select: none;
text-shadow: 4px 4px 0px #ee5da8,
6px 6px 0px #4e9fdb,
8px 8px 0px #425294,
10px 10px 0px #8f54ce,
12px 12px 0px #42f0a3,
20px 20px 10px #6a6a6a8f;
}Now let us add a hover effect to our title. We want to create an interaction when the user hovers over the text. For this we remove all layered text-shadows by setting text-shadow to none.
h1:hover {
text-shadow: none;
}Javascript:
Now the most exciting part is changing the fonts of our title. Once you understand this JavaScript code, you can create interactive titles that respond to the user in real time. So let us talk more.
First we select our title element by its id:
const text = document.getElementById("myText");This allows us to access the element and change its style whenever we need.
We then create an array of fonts where each font is represented as an object with two properties.
- "name": The name of the font that will be displayed as text.
- "family": The correct CSS font-family string to apply when selecting the font.
const fonts = [
{ name: "Roboto", family: "'Roboto', sans-serif" },
{ name: "Playfair Display", family: "'Playfair Display', serif" },
{ name: "Lobster", family: "'Lobster', cursive" },
{ name: "Montserrat", family: "'Montserrat', sans-serif" },
{ name: "Pacifico", family: "'Pacifico', cursive" },
{ name: "Raleway", family: "'Raleway', sans-serif" },
{ name: "Shadows Into Light", family: "'Shadows Into Light', cursive" }
];This array is a bunch of font names that we can choose randomly.
Now we attach a click event listener to our heading:
text.addEventListener("click", () => {
const randomFont = fonts[Math.floor(Math.random() * fonts.length)];
text.style.fontFamily = randomFont.family;
text.textContent = randomFont.name;
});Here is what happens in JavaScript step by step:
- When the heading is clicked, the function inside the addEventListener is called.
- We use
Math.random()andMath.floor()to set a random font from the font array. - We apply the selected font to the heading fontfamily style.
- We also update the heading text to display the font name so the user knows which font is active.
Must Popular Text Effects:
- Neon Typography with CSS Only
- Candy Cane Text Effect Using CSS
- CSS Neon Signs Text Effect
Today we are ending the Text Effect tutorial here, and if you have any questions about the text effect, you can share your feelings in the comments. You can follow our YouTube channel to get more updates about the CODEHEMU tutorial. I ended the tutorial Namaste🙏
Post a Comment