Unit 5: CSS Effects, Animations & Responsive Design

5.1 Columns, Images, Gradients & Transforms

CSS Columns:

column-count - Number of columns
column-gap - Space between columns
column-rule-style - Border style between columns

Image Styling:

Rounded Images: border-radius
Thumbnail: border, padding, background
Responsive Images: max-width: 100%, height: auto
Transparent Images: opacity

Gradients:

Linear Gradient: from one direction to another
Radial Gradient: circular or elliptical
Conic Gradient: rotational gradient

Transformations:

rotate() - Rotate element
scale(), scaleX(), scaleY() - Resize
translate(), translateX(), translateY() - Move
skew(), skewX(), skewY() - Distort
3D transforms: rotateX, rotateY, etc.

Transitions:

transition-property - Which property to animate
transition-duration - How long (seconds)
transition-timing-function - ease, linear, ease-in, ease-out, ease-in-out
transition-delay - Delay before animation starts

Animations:

@keyframes - Define animation steps (from to, 0% to 100%)
animation-name - Name of animation
animation-duration - Duration in seconds
animation-timing-function - Speed curve
animation-iteration-count - How many times (number or infinite)
animation-direction - normal, reverse, alternate, etc.
animation-fill-mode - forwards, backwards, both

5.2 CSS Variables & Media Queries

CSS Variables:

:root selector for global variables
Define with -- prefix: --main-color: #123abc;
Use with var() function: color: var(--main-color);
Can change dynamically with JavaScript

Media Queries:

Syntax: @media (condition) { CSS rules }
Media Types: screen, print, speech, all
Common Features: (max-width), (min-width), (orientation)
Responsive Breakpoints: 576px (mobile), 768px (tablet), 992px (desktop)
Mobile-first approach: Start with mobile styles, add for larger screens

Practice Problems (Practical 10-13)

Practical 10: Create animation that changes background color (red→yellow→green→blue) at 25%, 50%, 75%, 100%. Add 2-second delay, play backwards then forwards, and repeat forever.

Practical 11: Create button that changes background color (blue→orange) on hover in 2 seconds using transition-property, transition-duration, transition-timing-function (ease-in-out), and 1-second delay.

Practical 12: Create linear gradient (left to right) with rainbow colors and display "Rainbow" text.

Practical 13: Use media query to change background color to blue if viewport ≥ 250px, else pink.

Q1: Explain the difference between Transform and Transition in CSS.

Q2: What is animation-fill-mode? Explain forwards, backwards, and both.

Q3: How do you create a responsive image gallery using media queries?

Q4: Explain CSS variables and their advantages over hardcoded values.

Q5: Create a 3D transform effect (like a card flip animation).

Q6: How would you make a website responsive for mobile, tablet, and desktop?

Q7: Explain the difference between linear and radial gradients.

Q8: Create a pulse animation using @keyframes and animation properties.