40 Advanced CSS Tutorials
1. CSS Grid Layout
CSS Grid Layout is a two-dimensional layout system for creating complex, responsive layouts.
Example: Grid layout with auto-fit columns.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.grid-item {
background: #e5e7eb;
padding: 1rem;
}Note: Use minmax for responsive column sizing.
2. Flexbox Advanced
Flexbox allows precise control over alignment, order, and spacing of elements.
Example: Centered flex items with order.
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.flex-item:nth-child(2) {
order: -1;
}Note: Use order to reorder flex items.
3. Custom Properties (Variables)
CSS custom properties allow reusable values for consistent styling.
Example: Themed colors with variables.
:root {
--main-bg: #1e40af;
--text-color: #ffffff;
}
.element {
background: var(--main-bg);
color: var(--text-color);
}Note: Update variables dynamically with JavaScript.
4. CSS Animations
CSS animations create smooth, keyframe-based transitions for elements.
Example: Fade animation.
.fade {
animation: fadeIn 2s ease-in-out infinite;
}
@keyframes fadeIn {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}Note: Optimize animations for performance.
5. CSS Transitions
Transitions smoothly interpolate property changes over time.
Example: Hover transition.
.box {
width: 100px;
height: 100px;
background: #1e40af;
transition: transform 0.3s ease, background 0.3s ease;
}
.box:hover {
transform: scale(1.2);
background: #2563eb;
}Note: Use transform for better performance.
6. CSS Filters
Filters apply graphical effects like blur, brightness, or grayscale to elements.
Example: Image blur effect.
.image {
filter: blur(5px);
transition: filter 0.3s ease;
}
.image:hover {
filter: none;
}Note: Combine filters for complex effects.
7. Blend Modes
Blend modes control how an element's colors blend with its background.
Example: Multiply blend mode.
.blend {
background: #1e40af;
mix-blend-mode: multiply;
}Note: Test blend modes for visual compatibility.
8. Clip Path
Clip-path creates custom shapes by clipping an element’s visible area.
Example: Polygon clip-path.
.clipped {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
background: #1e40af;
padding: 1rem;
}Note: Use clip-path for creative layouts.
9. CSS Shapes
Shapes allow text to wrap around custom paths or images.
Example: Circle shape with text wrap.
.shape {
float: left;
shape-outside: circle(50%);
width: 150px;
height: 150px;
background: #1e40af;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Note: Ensure sufficient contrast for readability.
10. Scroll Snap
Scroll snap aligns content to specific points during scrolling.
Example: Vertical scroll snap.
.snap-container {
scroll-snap-type: y mandatory;
overflow-y: auto;
height: 200px;
}
.snap-item {
scroll-snap-align: start;
height: 200px;
}Note: Test on touch devices for smooth snapping.
11. CSS Counters
CSS counters automatically number elements, like lists or sections.
Example: Auto-numbered sections.
body {
counter-reset: section;
}
.section::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Note: Use for dynamic numbering without JavaScript.
12. Advanced Selectors
Advanced selectors like :where and :is simplify complex targeting.
Example: Using :is for multiple selectors.
:is(h1, h2, h3) {
color: #1e40af;
}Heading 1
Heading 2
Heading 3
Note: Reduces CSS repetition.
13. CSS Grid Areas
Grid areas allow named regions for precise layout control.
Example: Named grid areas.
.grid {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }Note: Use for intuitive layout naming.
14. Sticky Positioning
Sticky positioning keeps elements fixed within a scrolling container.
Example: Sticky header.
.sticky {
position: sticky;
top: 0;
background: #1e40af;
color: white;
padding: 1rem;
}Scroll down...
Content
Note: Ensure parent has overflow for sticky to work.
15. CSS Variables in Media Queries
CSS variables can be redefined within media queries for responsive designs.
Example: Responsive font size.
:root {
--font-size: 16px;
}
@media (max-width: 600px) {
:root {
--font-size: 14px;
}
}
.element {
font-size: var(--font-size);
}Note: Simplifies responsive styling.
16. CSS Houdini
Houdini APIs extend CSS with custom paint, layout, and animations.
Example: Custom paint worklet (requires worklet file).
.houdini {
--custom-prop: 10;
background: paint(my-paint);
}Note: Requires browser support and external worklet.
17. Subgrid
Subgrid allows child grids to inherit parent grid tracks.
Example: Nested grid with subgrid.
.parent-grid {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child-grid {
display: grid;
grid-template-columns: subgrid;
}Note: Check browser support for subgrid.
18. Aspect Ratio
The aspect-ratio property maintains element proportions.
Example: Fixed aspect ratio box.
.box {
aspect-ratio: 16 / 9;
width: 200px;
background: #1e40af;
}Note: Fallback with padding for older browsers.
19. CSS Logical Properties
Logical properties adapt to writing modes and directions.
Example: Logical margin.
.logical {
margin-inline: 1rem;
padding-block: 1rem;
background: #e5e7eb;
}Note: Ideal for multilingual layouts.
20. Scroll Behavior
Smooth scrolling enhances navigation with scroll-behavior.
Example: Smooth scroll to anchor.
html {
scroll-behavior: smooth;
}
a[href="#section"] {
display: block;
padding: 1rem;
}Note: Not supported in all browsers.
21. CSS Container Queries
Container queries style elements based on their container’s size.
Example: Responsive container styling.
.container {
container-type: inline-size;
}
@container (min-width: 300px) {
.container-item {
font-size: 1.2rem;
}
}Note: Requires modern browser support.
22. Gradient Animations
Animated gradients create dynamic backgrounds using keyframes.
Example: Moving gradient.
.gradient {
background: linear-gradient(45deg, #1e40af, #2563eb);
background-size: 200%;
animation: gradientMove 5s linear infinite;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}Note: Optimize for performance with GPU acceleration.
23. CSS Masks
Masks control element visibility with images or gradients.
Example: Gradient mask.
.masked {
mask-image: linear-gradient(to right, transparent, black);
background: #1e40af;
padding: 1rem;
}Note: Check browser support for masks.
24. Custom Scrollbars
Custom scrollbars style the appearance of scrollable areas.
Example: Styled scrollbar.
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #1e40af #e5e7eb;
}
.scrollbar::-webkit-scrollbar {
width: 8px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #1e40af;
}Note: Use both standard and WebKit for compatibility.
25. CSS Overscroll Behavior
Overscroll behavior controls scroll chaining and bounce effects.
Example: Prevent overscroll.
.no-overscroll {
overscroll-behavior: contain;
height: 200px;
overflow-y: auto;
}Scroll without overscroll...
Note: Improves UX in nested scrollable areas.
26. Advanced Pseudo-Elements
Pseudo-elements like ::marker style specific parts of elements.
Example: Custom list markers.
ul {
list-style: none;
}
li::marker {
content: "→";
color: #1e40af;
}- Item 1
- Item 2
Note: Limited to specific elements like lists.
27. CSS Feature Queries
Feature queries (@supports) apply styles based on browser support.
Example: Fallback for grid.
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@supports not (display: grid) {
.grid {
display: flex;
flex-wrap: wrap;
}
}Note: Provides graceful degradation.
28. CSS Backdrop Filter
Backdrop filter applies effects like blur to the area behind an element.
Example: Blurred backdrop.
.backdrop {
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.2);
padding: 1rem;
}Note: Check browser support for backdrop-filter.
29. CSS Color Functions
Color functions like hsl and rgb allow dynamic color manipulation.
Example: HSL color adjustment.
.color {
background: hsl(220, 80%, 50%);
padding: 1rem;
color: white;
}Note: HSL is intuitive for hue adjustments.
30. CSS Grid Auto Flow
Auto-flow controls how grid items are placed automatically.
Example: Dense grid flow.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}Note: Dense flow fills gaps efficiently.
31. Transform 3D
3D transforms create perspective-based animations.
Example: 3D rotation.
.transform {
transform: perspective(500px) rotateY(45deg);
transition: transform 0.5s ease;
}
.transform:hover {
transform: perspective(500px) rotateY(0deg);
}Note: Use perspective for depth.
32. CSS Custom Cursors
Custom cursors enhance UX with unique pointer styles.
Example: Custom cursor image.
.cursor {
cursor: url('cursor.png'), auto;
}Note: Use fallback cursors for compatibility.
33. CSS Writing Modes
Writing modes control text direction for multilingual layouts.
Example: Vertical text.
.vertical {
writing-mode: vertical-rl;
background: #e5e7eb;
padding: 1rem;
}Note: Ideal for East Asian scripts.
34. CSS Blend Isolation
Isolation controls blending context for child elements.
Example: Isolated blending.
.isolated {
isolation: isolate;
background: #1e40af;
padding: 1rem;
}Note: Useful with blend modes.
35. CSS Content Visibility
Content visibility optimizes rendering for off-screen content.
Example: Auto visibility.
.content {
content-visibility: auto;
contain-intrinsic-size: 500px;
}Note: Improves page load performance.
36. CSS Gap Property
Gap sets spacing between grid or flex items.
Example: Grid with gap.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}Note: Replaces margin-based spacing.
37. CSS Object Fit
Object-fit controls how images or videos fit within their containers.
Example: Cover fit image.
.image {
width: 200px;
height: 100px;
object-fit: cover;
}Note: Use with object-position for alignment.
38. CSS Will Change
Will-change hints browsers about upcoming animations for optimization.
Example: Optimize transform.
.animate {
will-change: transform;
transition: transform 0.3s ease;
}
.animate:hover {
transform: scale(1.1);
}Note: Use sparingly to avoid memory issues.
39. CSS Containment
Containment optimizes rendering by isolating elements.
Example: Strict containment.
.contained {
contain: strict;
width: 200px;
height: 100px;
background: #e5e7eb;
}Note: Improves rendering performance.
40. CSS Motion Path
Motion path animates elements along a custom path.
Example: Path animation.
.motion {
offset-path: path('M0,100 Q100,0 200,100');
animation: move 3s linear infinite;
}
@keyframes move {
100% { offset-distance: 100%; }
}Note: Limited browser support; use fallbacks.