Hi there!!! Glad to see you and welcome to the first chapter on Advanced CSS.
Please Note That: While I've written this tutorial for anyone willing to learn something new in CSS. A very basic understanding of CSS may help. 😄
In this tutorial you'll learn how to make use of a Few Advanced CSS Properties and Elements to Gradually create Two Simple but aesthetic hover effects, Namely:
-webkit-background-clip (Property) - Using this to clip the background with text acting as a mask.
text-shadow (Property) - Used to add shadow to the text.
-webkit-text-stroke (Property) - We'll use this to create an outline for our text.
::after (Pseudo Element) - Used to add a pseudo-element as the last-child of the selected element.
So Let's get started without further ado. 😊
1. Skew on hover with a solid gradient as the text color.
Play with it on Codepen.
<!-- HTML -->
<div class="container">
<h2 class="heading-secondary">
Follow For More
</h2>
</div>
Note: We will use the same ☝️ HTML for all the Examples.
/* CSS */
.container{
width:30rem;
background-color:#eee;
margin: 0 auto;
text-align:center;
}
.heading-secondary{
font-size: 2rem;
text-transform: uppercase;
font-weight: 700;
background-image: linear-gradient(to right, lightgreen, green); /* Step 1 */
display: inline-block;
-webkit-background-clip: text; /* Step 2 */
color: transparent; /* Step 3 */
letter-spacing: 2px;
transition: all .2s;
}
.heading-secondary:hover {
transform: skewY(2deg) scale(1.1);
text-shadow: 0.5rem 1rem 2rem rgba(0,0,0, 0.2); /* Step 4 */
}
Step 1: We start by giving a background-image to the h2 Element(i.e. the heading secondary class) and thereby we have an image in the background but it stretches the complete element box.
Step 2: We then set the -webkit-background-clip property to the text which specifies mask as the text which then clips the background. Note that the background image will now seem to disappear completely, but it hides behind the text due to clipping.
Step 3: Now to make the clipped background visible which is behind the text we set the color of the text to transparent.
Step 4: We write a selector for the hover state in which we skew the heading element and set its text-shadow property. Note that the text-shadow property take four values x-offset, y-offset, blur-radius and color.
2. Fill box on Hover with Outlined Text.
Play with it on Codepen.
/* CSS */
.container{
width:30rem;
background-color:#eee;
margin: 0 auto;
text-align:center;
}
.heading-secondary{
font-family:impact;
font-size: 2.5rem;
text-transform: uppercase;
font-weight: 700;
display: inline-block;
width:100%; /* Step 1 */
letter-spacing: 2px;
-webkit-text-stroke:1.5px #000; /* Step 2 */
color: transparent;
position: relative; /* Step 3 */
z-index: 100;
transition: all 1s;
}
.heading-secondary::after{ /* Step 4 */
content: "";
display: inline-block;
height: 50%;
width: 100%;
background-color: green;
position: absolute; /* Step 5 */
top: 50%; /* Step 6 */
z-index:-100;
left: 0;
transition: all 1s;
}
.heading-secondary:hover::after{ /* Step 7 */
top: 0%;
height: 100%;
}
.heading-secondary:hover{ /* Step 8 */
color:black;
-webkit-text-stroke:0px ;
}
Step 1: We start by setting the width of the box in which we'll want to observe the fill effect, we set it's size to 100% which will be 100% of the container holding the heading element.
Step 2: We set the -webkit-text-stroke property on the heading element which will then create a stroke(outline) around the text. It takes two parameters stroke-width and stroke-color;
Step 3: We set the position of the main heading element to relative so that we can then position the pseudo child elements with respect to the main heading element.
Step 4: We made use of the ::after pseudo element selector to manipulate the always present pseudo element (This child pseudo element is always there but invisible/hidden and can be accessed using the ::after to select it on an element explicitly) on the heading element.
Note:
We always need to specify the content and display property on a pseudo element.
It's best to use:
content:""; display:inline-block;for our usecase.
Step 5: We set the position of the child pseudo element(::after) to absolute so that we can position it as per our needs, in sync with the Step 3.
Step 6: Note that we have set the height of pseudo element to 50% but its now covering the upper half of the text. To position it so that it covers the lower half of the text we set the top to 50%.
Step 7: Now we start adding the hover effect. For the fill effect(i.e. to increase the height of the pseudo element from 50% to 100% so that it covers the entire text) we select the heading element's after pseudo element on hovering the heading element. 👇
.heading-secondary:hover::after { /* CSS Properties */ }
Step 8: Finally to make the original text appear we remove the stroke by setting it to 0.
Conclusion:
Set the -webkit-background-clip property to text and don't forget to set the color of the text transparent in order to see the clipped background.
Select the "::after" pseudo element for an HTML element and don't forget to set it's content and display property.
What's there for you in the next article?
- I'll introduce a few new CSS properties.
- We'll create a more sophisticated CSS Hover Effect based heading, and learn how to make use of the ::after and ::before pseudo elements.
To stay notified make sure you subscribe to my newsletter.
Other articles I'll recommend you to read:
Thank you, for reading till the end, make sure to share it if you find it useful, and keep learning, you're a genius.