Do you remember your childhood? I loved eating candy back then. Anyway, today's tutorial is about creating a candy cane text effect.
New types of text effects make web design more interesting. So let's try something different from the plain and boring text. CSS Text effects allow you to convert your regular text into some eye-catching typography. Today we explore one such text effect.
We use a powerful CSS function called ‘linear-gradient()’ to create a Candy Cane Text Effect. This CSS text effect not only looks super cool but is also easy to create.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below.
Let us start by adding the Audiowide CDN to our HTML document. For that copy and paste the code below in between the <head> tag of your HTML document.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">HTML:
Now let us move on to the actual coding. For HTML code, we just need to add a span element with the text of your choice.
<span>Candy Cane</span>StyleSheet (CSS):
Styling Body:We now need to add some styles with CSS. For the document body, I have chosen a light pink color. There is no need for margin or padding here. So set them to 0. Now we use the Google Fonts Audiowide font here, which will give a bold look to the texture.
body {
margin: 0;
padding: 0;
background: #eab7be;
font-family: "Audiowide", sans-serif;
}Next, we style the span element. We begin by centering the text. Here, I have used the Transform Method to center the text. You can choose any font-size and font-weight for this effect. Next, we add the linear-gradient function.
Before we even start placing the stops or choosing a color, we must add the direction of the gradient. In this case, we set the gradient at an angle of -45 degrees. We start the gradient with a red with hex code ‘#e41c23’. The color ends all the way to the next color stop at ‘25%’. This color transitions into next color with hex code ‘#f7f7f7’.
Red color will be up to 25%. 25% to 50% white color will be there. 50% to 75% red color again. 75% to 100% white color again. The red and white stripes are repeated over and over again.
Insert the gradient inside the text using the background clip property. We use a text fill color to hide the original color of the text. Most important, set the background size (50px 50px). We will also add an animation that will change the background position.
span {
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
text-align: center;
font-size: 8em;
font-weight: bold;
background: linear-gradient(-45deg,
#e41c23 25%,
#f7f7f7 25%,
#f7f7f7 50%,
#e41c23 50%,
#e41c23 75%,
#f7f7f7 75%,
#f7f7f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 50px 50px;
background-position: 0 0;
animation: stripes 1s linear infinite;
}Keyframes are where the magic happens. We need Keyframes to change the position of the text background. For this, let us add a background position at 100%, which results in the stripes gradually moving to the right. And Ta-da your CSS candy cane text effect is now ready.
@keyframes stripes {
100% {
background-position: 50px 0, 50px 0, 50px 0;
}
}I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also to stay updated with the latest tutorial subscribe to me on Youtube.
Post a Comment