DEV Community

Cover image for 12. Introduction to effects and typography (Day 10)
Manoj Kumar
Manoj Kumar

Posted on • Originally published at emanoj.hashnode.dev

12. Introduction to effects and typography (Day 10)

In today's live lecture, we delved into the captivating world of Effects and Animations, as well as Typography. While this might sound intricate at first, rest assured that with a bit of practice, it can become a skill you can comfortably add to your web design toolkit.

The tutor showed us:

Hover-Activated Resizing: We witnessed a simple yet eye-catching effect - a red box that gracefully expanded in size when the cursor hovered over it. This not only adds a touch of interactivity but also provides an elegant way to engage visitors.

Image Pop-Out with Shadows: Three images lined up side by side came to life as we hovered our cursor over them. They gracefully popped out with a subtle dark shadow, imparting depth and dimension to the page. It's a clever way to draw attention to important visuals.

Auto-elongating Element: Another intriguing animation involved a red box that elongated on its own over time. This effect offers a dynamic feel to your website, making it less static and more engaging.

Typing Effect: The lecture also showcased a cursor diligently typing out a sentence, word by word, mimicking the typing effect often seen on blogs and apps. This subtle animation can bring your text content to life.

One of the most exciting aspects of this lecture was the opportunity to glimpse "behind the scenes" of these effects. Many of us have encountered these animations on websites and applications and wondered, "How did they do that?" Well, now we have the answers.

So, what's next? In the coming days, I'm excited to dive into the world of web design and put into practice what we've learned. I look forward to sharing the results with you.

In conclusion, our exploration of Effects and Animations and Typography today was both insightful and inspiring. Web design is a dynamic field, and mastering these skills will undoubtedly enhance your ability to create visually stunning and interactive websites. Stay tuned for more updates as I put my newfound knowledge to the test in the days ahead.

Top comments (0)