Cara menggunakan can css do animations?
Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d share some tips on how to do it! In this article, we’re going to take a look at how to add glowing effects to text. We’ll also take a look at various ways to animate the neon signs, all using CSS and keyframes. Show Here’s what we’ll be making: Adding a glow effect to textFirst, let’s make the text glow. This can be done in CSS with the 5 property. What’s neat about 5 is that we can apply multiple shadows on it just by comma-separating them:
5 requires four values, the first two of which represent the horizontal and vertical position of the shadow, respectively. The third value represents the size of the blur radius while the last value represents the color of the shadow. To increase the size of the glow effect, we would increase the third value, which represents the blur radius. Or, expressed another way:
Here’s what we get with that small bit of CSS: CodePen Embed Fallback The next thing you might be wondering is what’s up with all of those values? How did I get those and why are there so many? First, we added white glow effects to the outer edges of the text’s letters with a small blur radius.
The last five values are wider text shadows of a larger blur radius that forms the green glow.
It’d be great if we could accomplish this with fewer than five shadows, but we need all these shadows so that they can be stacked over one another to add more depth to the glow. If we had used a single 5 instead, the effect would not have the depth required to make it look realistic.CodePen Embed Fallback Go ahead and experiment with various hues and colors as well as blur radius sizes! There’s a huge variety of cool glow effects you can make, so try different variations — you can even mix and match colors where one color blends into another. The “flickering” effectOne thing you might notice about neon signs is that some of them — particularly older ones — tend to flicker. The light kind of goes in and out. We can do the same sort of thing with CSS animations! Let’s reach for 9 to make an animation that flickers the light on and off in quick, seemingly random flashes.
That’s really it! We’ve taken the exact same 5 property and values we had before, wrapped them in a 9 animation called 2, and chose points in the timeline to apply the shadows, as well as points that completely remove the shadows.All that’s left is to call the animation where we want the light to flicker. In this particular case, let’s only add it to the 3 element. Having one part of the entire sign flicker feels a little more realistic than if we applied the flicker to all of the text.
Note that if we did want the entire sign to flicker, then we could technically remove the 5 values on the 5 class, add the animation to it, and let the 9 apply the shadows instead.CodePen Embed Fallback It’s quite a cool effect, and adds more realism to our neon text! Of course, there are other effects you could try out too, which will also be explored further in this article. For example, how about more of a pulsating animation or a more subtle flicker? CodePen Embed Fallback Let’s explore those and other effects! Pulsating glowWe just got a quick peek at this. It uses keyframes, just as the previous example does, where we specify the size of the blur radius at the start and end of the animation. We want the size of the blur radius to be smallest at the end of the animation, so we simply decrease the blur radius values for each 5 value in the 8 keyframe. This way, the size of the blur gradually ebbs and flows, creating a pulsating effect.
Once again, we add the animation to some element. We’ll go with 3 again:
Here it is with it all put together: CodePen Embed Fallback Subtle flickerWe can tone things down a bit and make the flickering action super subtle. All we need to do is slightly decrease the size of the blur radius in the 8 keyframe, just not to the extent as seen in the previous example.
Since the flickering is more subtle and the reduction of the blur radius is not as large, we should increase the number of times this animation occurs per second in order to emulate more frequent flickering. This can be done by decreasing the animation’s duration, say to a mere 1:
CodePen Embed Fallback Using a background imageIt would be really neat if our sign was hanging on a wall instead of empty space. Let’s grab a background image for that, maybe some sort of brick texture from Unsplash or something: 0CodePen Embed Fallback Adding a borderOne last detail we can add is some sort of circular or rectangular border around the sign. It’s just a nice way to frame the text and make it look like, you know, an actual sign. By adding a shadow to the border, we can give it the same neon effect as the text! Whatever element is the container for the text is what needs a border. Let’s say we’re only working with an 3 element. That’s what gets the border. We call the 3 shorthand property to make a solid white border around the heading, plus a little padding to give the text some room to breathe: 1We can round the corners of the border a bit so things aren’t so sharp by applying a 4 on the heading. You can use whatever value works best for you to get the exact roundness you want. 2The last piece is the glow! Now, 5 won’t work for the border here but that’s okay because that’s what the 6 property is designed to do. The syntax is extremely similar, so we can even pull exactly what we have for 5 and tweak the values slightly: 3Notice that 8 keyword? That’s something 5 is unable to do but adding it to the border’s 6 allows us to get some of the glow on both sides of the border for some realistic depth.CodePen Embed Fallback What about accessibility?If users have a preference for reduced motion, we’ll need to accommodate for this using the 1 media query. This allows us to remove our animation effects in order to make our text more accessible to those with a preference for reduced motion.For example, we could modify the flashing animation from the Pen above so that users who have 1 enabled don’t see the animation. Recall that we applied the flashing effect to the 3 element only, so we’ll switch off the animation for this element: 4It’s incredibly important to ensure that users’ preferences are catered for, and making use of this media query is a great way to make the effect more accessible for those with a preference for reduced motion. ConclusionHopefully this has shown you how to create cool neon text for your next project! Make sure to experiment with various fonts, blur radius sizes and colors and don’t forget to try out different animations, too — there’s a world of possibilities out there. And add a comment if you’ve created a neat shadow effect you want to share. Thanks for reading! |