Cool Hover Effects that Use CSS Text Shadow

Cool Hover Effects that Use CSS Text Shadow

css-tricks.com css-tricks.com3 months ago in #Dev Love23

In my closing article we noticed how CSS background houses let us create cool hover results. This time, we can focal point at the CSS text-shadow assets to discover much more fascinating hovers. You are more than likely questioning how including shadow to textual content can in all probability give us a groovy impact, however right here’s the catch: we’re now not if truth be told going to make any shadows for those textual content hover results. text-shadow however no textual content shadows? Let me transparent the confusion by way of appearing the hover results we’re going to construct within the following demo: Without taking a look on the code lots of you’re going to, intuitively, suppose that for every hover impact we’re duplicating the textual content after which independently animating them. Now, if you happen to take a look at the code you’re going to see that not one of the textual content is if truth be told duplicated within the HTML. And did you understand that there is not any use of content material: “textual content” within the CSS? The textual content layers are utterly made with text-shadow! Hover impact #1 Let’s pick out aside the CSS: .hover-1 { line-height: 1.2em; colour: #0000; text-shadow: Zero 0 #000, Zero 1.2em #1095c1; overflow: hidden; transition: .3s; } .hover-1:hover { text-shadow: 0 -1.2em #000, Zero 0 #1095c1; } The very first thing to note is that I’m making the colour of the particular textual content clear (the use of #0000) so as to cover it. After that, I’m the use of text-shadow to create two shadows the place I’m defining handiest two duration values for every one. That approach there’s no blur radius, making for a pointy, crisp shadow that successfully produces a duplicate of the textual content with the required colour. That’s why I used to be ready to assert within the creation that there aren’t any shadows in right here. What we’re doing is much less of a “vintage” shadow than this is a easy strategy to replica the textual content. We have two textual content layers that we transfer on hover. If we cover the overflow, then the duplicated textual content is out of view and the motion makes it seem as despite the fact that the true textual content is being changed by way of different textual content. This is the principle trick that that makes all the examples on this article paintings. Let’s optimize our code. I’m the use of the price 1.2em so much to outline the peak and the offset of the shadows, making it a really perfect candidate for a CSS customized assets (which we’re calling –h): .hover-1 { –h: 1.2em; line-height: var(–h); colour: #0000; text-shadow: Zero 0 #000, Zero var(–h) #1095c1; overflow: hidden; transition: .3s; } .hover-1:hover { text-shadow: Zero calc(-1 * var(–h)) #000, Zero 0 #1095c1; } We can nonetheless pass additional and practice extra calc()-ulations to streamline issues to the place we handiest use the text-shadow as soon as. (We did the similar within the earlier article.) .hover-1 { –h: 1.2em; line-height: var(–h); colour: #0000; text-shadow: Zero calc(-1*var(–_t, 0em)) #000, Zero calc(var(–h) – var(–_t, 0em)) #1095c1; overflow: hidden; transition: .3s; } .hover-1:hover { –_t: var(–h); } In case you might be questioning why I’m including an underscore to the –_t variable, it’s only a naming conference I’m the use of to differentiate between the variables we use to keep watch over the impact that the consumer can replace (like –h) and the inner variables that are handiest used for optimization functions that we don’t want to alternate (like –_t )….

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply