Introduction:
In the realm of web design, adding captivating text effects can significantly enhance the visual appeal of a website. In this tutorial, we’ll explore the creation of an outline animation using HTML and CSS. By the end, you’ll be able to craft an eye-catching text effect that can elevate the aesthetics of your web projects.
Things You Will Learn:
- Implementing outline animation with CSS
- Creating a stylish text effect using HTML
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS.Â
The files used are:
- index.html
- style.css
- image
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Outline Animation</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Kanit:wght@800&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>NIKE</h1>
<img src="nike-shoe.png" />
<h1>NIKE</h1>
</div>
</body>
</html>
Â
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container {
height: 11.25em;
width: 25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
h1 {
position: absolute;
margin: auto;
left: 0;
right: 0;
text-align: center;
font-family: "Kanit", sans-serif;
font-size: 10em;
color: #000000;
line-height: 1;
cursor: pointer;
}
img {
position: absolute;
width: 43em;
transform: translate(30%, -50%) rotate(0);
left: 50%;
top: 50%;
transition: 1s;
opacity: 0;
}
.container:hover img {
opacity: 1;
transform: translate(-50%, -50%) rotate(-20deg);
}
h1:nth-child(3) {
color: transparent;
-webkit-text-stroke: 4px #000000;
}
Â
Conclusion:
You’ve now learned how to create a stunning outline animation text effect using CSS. This effect adds a dynamic touch to your website’s typography, making it visually appealing and engaging for your audience.
Feel free to download the source code or watch the video tutorial on my YouTube channel for a more detailed walkthrough. Experiment with different colors, sizes, and animations to customize the text effect further. Incorporate this technique into your projects to make your text stand out and leave a lasting impression on your visitors!
Enhance your web design skills by exploring more CSS text effects and animations. Keep experimenting, stay creative, and unleash the potential of CSS to craft visually captivating websites!
