Lesson 10: Advanced CSS Techniques - Interactive Examples

CSS Animations & Keyframes

Create dynamic visual effects with CSS animations and keyframe sequences.

Basic Animation Examples

Fade In

Slide In

Scale In

Rotate In

Bounce In

CSS Code Examples
                                
/* Fade In Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 2s ease-in-out;
}

/* Slide In Animation */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide-in {
    animation: slideIn 1.5s ease-out;
}

/* Scale In Animation */
@keyframes scaleIn {
    from { 
        transform: scale(0); 
        opacity: 0;
    }
    to { 
        transform: scale(1); 
        opacity: 1;
    }
}

.scale-in {
    animation: scaleIn 1s ease-back;
}
                                
                            

Complex Keyframe Sequences

Floating Element

Rainbow Text

Advanced Keyframes
                                
/* Floating Animation */
@keyframes float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-20px) rotate(5deg); 
    }
    50% { 
        transform: translateY(-10px) rotate(0deg); 
    }
    75% { 
        transform: translateY(-15px) rotate(-5deg); 
    }
}

/* Pulsing Circle */
@keyframes pulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 0 20px rgba(52, 152, 219, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
}

/* Morphing Shape */
@keyframes morph {
    0% { 
        border-radius: 50%; 
        transform: rotate(0deg);
        background: #e74c3c;
    }
    25% { 
        border-radius: 0; 
        transform: rotate(90deg);
        background: #f39c12;
    }
    50% { 
        border-radius: 50% 0; 
        transform: rotate(180deg);
        background: #2ecc71;
    }
    75% { 
        border-radius: 0 50%; 
        transform: rotate(270deg);
        background: #9b59b6;
    }
    100% { 
        border-radius: 50%; 
        transform: rotate(360deg);
        background: #e74c3c;
    }
}
                                
                            

Animation Property Controls

Test Element

Duration: 2s

Delay: 0s

Timing Function:

Iterations:

Direction:

Fill Mode:

Generated CSS:

animation: slideScale 2s ease 0s 1 normal none;

Interactive Animation Triggers

Hover Animations

Click Animations

Scroll-triggered Animations

Slide Up

Slide Right

Fade In

Scale In

Rotate In

CSS Transforms & 3D Effects

Master 2D and 3D transformations for advanced visual effects.

2D Transforms

Translate

Rotate

Scale

Skew

3D Transforms

Front

Back

Right

Left

Top

Bottom

Transform Playground

Transform Me!

Translation

X: 0px

Y: 0px

Rotation

Angle: 0deg

Scale

Scale: 1

Skew

X: 0deg

Y: 0deg

Generated Transform:

transform: none;

CSS Custom Properties (Variables)

Create dynamic, maintainable stylesheets with CSS custom properties.

Live Theme Customizer

Preview Card

This card updates in real-time as you adjust the custom properties.

Primary Color:

Secondary Color:

Accent Color:

Font Size: 16px

Border Radius: 8px

Spacing: 16px

Preset Themes

Generated CSS Variables

                                
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  --font-size: 16px;
  --border-radius: 8px;
  --spacing: 16px;
}
                                
                            

Advanced Variable Techniques

Calculating Values

Width: calc(var(--base-width) * 2)

                                
:root {
  --base-width: 100px;
}

.element {
  width: calc(var(--base-width) * 2);
  height: calc(var(--base-width) / 2);
}
                                
                            

Fallback Values

Uses fallback when --custom-color is undefined

                                
.element {
  background: var(--custom-color, #ff6b6b);
  color: var(--text-color, white);
}

Dynamic Inheritance

Parent (--local-color: blue)

Child (inherits --local-color)

                                
.parent {
  --local-color: blue;
}

.child {
  background: var(--local-color);
}
                                
                            

Modern CSS Features

Explore cutting-edge CSS features for modern web development.

CSS Container Queries

Responsive Component

This component changes layout based on its container size, not viewport size.

                        
.container {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .content { flex-direction: column; }
}

@container (min-width: 400px) {
  .content { flex-direction: row; }
}
                        
                    

CSS Subgrid

Card 1

Content that aligns with subgrid

Card 2 with Longer Title

This card has more content but buttons align perfectly

Card 3

Short content

                        
.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
}

.grid-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
                        
                    

CSS :has() Selector

Email Please enter a valid email

Password Password is required

Try focusing inputs or making them invalid to see :has() in action

                        
/* Style parent based on child state */
.form-field:has(:invalid) {
  border-color: red;
}

.form-field:has(:focus) {
  background: lightblue;
}

.form-field:has(:invalid) .error-message {
  display: block;
}
                        
                    

CSS Logical Properties

Horizontal (English)

This text flows horizontally with logical properties

Vertical (Japanese)

This text flows vertically with the same logical properties

                        
.element {
  margin-inline-start: 20px;    /* left in LTR, right in RTL */
  margin-inline-end: 20px;      /* right in LTR, left in RTL */
  margin-block-start: 10px;     /* top */
  margin-block-end: 10px;       /* bottom */
  
  inline-size: 200px;           /* width */
  block-size: 100px;            /* height */
}
                        
                    

CSS Performance & Best Practices

Optimize your CSS for better performance and maintainability.

🚀 Selector Performance

✅ Efficient Selectors


.btn { } /* Class selector - Fast */
#header { } /* ID selector - Fast */
[data-state="active"] { } /* Attribute - Moderate */

❌ Inefficient Selectors


* { } /* Universal - Slow */
.nav ul li a { } /* Deep nesting - Slow */
div > div > div { } /* Complex - Slow */

🎨 Animation Performance

Efficient Animation (Transform)

Inefficient Animation (Layout)

Animation Best Practices:

Use transform and opacity
Avoid animating width, height, top, left
Use will-change property for complex animations
Prefer transform3d() for hardware acceleration

📱 Responsive Performance

CSS Size: ~45KB

Load Time: ~120ms

Render Blocks: 3

Optimization Strategies:

Minimize and compress CSS files
Use critical CSS for above-the-fold content
Load non-critical CSS asynchronously
Remove unused CSS with tools like PurgeCSS

🏗️ CSS Architecture Patterns

BEM Methodology

This demonstrates BEM naming convention.

                                
/* Block */
.card { }

/* Element */
.card__header { }
.card__title { }
.card__button { }

/* Modifier */
.card--featured { }
.card__button--primary { }
                                
                            

Utility-First CSS

Utility Classes

Built with utility classes for rapid development.

                                
/* Utility classes */
.p-4 { padding: 1rem; }
.bg-blue-500 { background-color: #3b82f6; }
.text-white { color: white; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
                                
                            

🎯 Final Challenge: Complete CSS Showcase

Apply everything you've learned to create an advanced, interactive component.

Challenge: Advanced Card Component

Requirements:

Use CSS Custom Properties for theming
Implement smooth hover animations (transform + opacity only)
Add 3D transform effects
Include responsive behavior without media queries (container queries or clamp())
Use modern CSS features like :has(), logical properties, or subgrid
Follow BEM methodology for class names

Your CSS Solution

Live Preview

This card demonstrates advanced CSS techniques including custom properties, transforms, and modern features.

Apply your CSS to see the results and get feedback!

CSS Animations & Keyframes

Basic Animation Examples

CSS Code Examples

Complex Keyframe Sequences

Advanced Keyframes

Animation Property Controls

Generated CSS:

Interactive Animation Triggers

Hover Animations

Click Animations

Scroll-triggered Animations

CSS Transforms & 3D Effects

2D Transforms

3D Transforms

Transform Playground

Translation

Rotation

Scale

Skew

Generated Transform:

CSS Custom Properties (Variables)

Live Theme Customizer

Preview Card

Preset Themes

Generated CSS Variables

Advanced Variable Techniques

Calculating Values

Fallback Values

Dynamic Inheritance

Modern CSS Features

CSS Container Queries

Responsive Component

CSS Subgrid

Card 1

Card 2 with Longer Title

Card 3

CSS :has() Selector

CSS Logical Properties

Horizontal (English)

Vertical (Japanese)

CSS Performance & Best Practices

🚀 Selector Performance

✅ Efficient Selectors

❌ Inefficient Selectors

🎨 Animation Performance

Animation Best Practices:

📱 Responsive Performance

Optimization Strategies:

🏗️ CSS Architecture Patterns

BEM Methodology

Featured Card

Utility-First CSS

Utility Classes

🎯 Final Challenge: Complete CSS Showcase

Challenge: Advanced Card Component

Requirements:

Your CSS Solution

Live Preview

Advanced Card