Things I Learned This Week :-
This week, I dived into some exciting CSS concepts that enhance the visual appeal and interactivity of web pages. Here's a quick rundown of what I learned:
CSS Transforms – Explored how
translate(),rotate(),scale(), andskew()can manipulate elements, making them dynamic and visually engaging. Want to know more? Head over to my keynotes.CSS Transition Property – Learned how to create smooth animations by transitioning between property changes over time using
transition-property,transition-duration,transition-timing-function, andtransition-delay. For more details, refer to my keynotes.CSS Animations – Discovered how
@keyframesallows for complex animations, enabling elements to move, change colors, and transform over a set duration. Curious to explore them further? Refer to my keynotes.CSS Object-fit, Object-cover & Background Properties – Understood how
object-fitandobject-covercontrol the way images fit inside containers, whilebackground-size,background-position, andbackground-repeathelp in optimizing background images. Check out my keynotes for more details.CSS Filters – Experimented with
blur(),brightness(),contrast(),grayscale(), and other filter effects to enhance images and elements creatively. For more on this, check out my keynotes.
Steps That I Did :-
This week, I focused on making web pages more interactive and visually appealing using advanced CSS techniques. Here’s how I approached each topic:
Practiced CSS Transforms – Experimented with
translate(),rotate(),scale(), andskew()to understand how elements can be moved, resized, and rotated in 2D and 3D space.Worked with CSS Transitions – Applied
transitionproperties to buttons and divs to create smooth hover and state-change effects. Tested different easing functions likeease-in,ease-out, andlinear.Explored CSS Animations – Created keyframe animations using
@keyframesto make elements change colors, move across the screen, and fade in/out over time.Used Object-fit & Background Properties – Played around with
object-fit: cover/containto ensure images fit well inside their containers. Experimented withbackground-size,background-position, andbackground-repeatto optimize backgrounds.Implemented CSS Filters – Applied filters like
blur(),brightness(), andgrayscale()on images to enhance their appearance and create stylish effects.
Challenges I Faced and How I Overcame Them :-
Understanding the Difference Between Transforms and Animations
Challenge: I was confused about when to usetransformand when to use@keyframesanimations.
How I Overcame It: I experimented with both—usingtransformfor simple changes like scaling and rotating, while using@keyframesfor continuous animations like bouncing and pulsing.Keeping Animations Responsive
Challenge: Animations looked great on larger screens but broke on smaller devices.
How I Overcame It: I used media queries to adjust animation speed and disabled some animations for smaller screens to ensure better usability.Combining Multiple Transforms Without Issues
Challenge: When applying multiple transforms (like rotate and scale), they didn’t work as expected.
How I Overcame It: I realized the order of transforms matters, so I carefully structured them (scalebeforerotategives different results thanrotatebeforescale).
Resources I Used :-
Documentation :- MDN Web Docs
Conclusion :-
This week has been an exciting journey into the world of CSS animations and visual enhancements. From exploring transforms and transitions to creating stunning animations, I’ve seen firsthand how small tweaks can bring web pages to life. Each challenge pushed me to experiment, learn, and refine my approach, making animations not just visually appealing but also smooth and performant.
CSS isn’t just about styling—it’s about crafting an engaging user experience. As I move forward, I’m excited to explore more advanced techniques and continue pushing the boundaries of creative web design. On to the next week of learning! 🚀✨