Master advanced CSS functions and mathematical calculations to create dynamic, responsive designs with calc(), clamp(), min(), max(), and custom functions.
CSS functions and calculations represent one of the most powerful features in modern CSS, enabling dynamic, responsive designs that adapt intelligently to different contexts. Unlike static values, CSS functions can perform real-time calculations, create conditional logic, and generate values based on viewport dimensions, user preferences, and design constraints.
These mathematical capabilities transform CSS from a simple styling language into a sophisticated design system that can respond dynamically to changing conditions. From fluid typography that scales perfectly across devices to spacing systems that maintain visual harmony at any screen size, CSS functions enable precision and flexibility that would be impossible with static values.
In this lesson, you'll master the full spectrum of CSS calculation functions, learning to create sophisticated responsive designs that adapt intelligently to any context while maintaining perfect visual consistency.
CSS mathematical functions enable dynamic calculations that respond to changing conditions, creating more flexible and intelligent designs.
The calc() Function:
1/* Basic arithmetic operations */
2.responsive-width {
3 width: calc(100% - 2rem); /* Subtract fixed margins */
4 max-width: calc(800px + 4rem); /* Add padding to max-width */
5}
6
7/* Complex calculations */
8.dynamic-spacing {
9 margin-top: calc(2rem + 5vh); /* Combine fixed and viewport units */
10 padding: calc(1rem + 2vw) calc(1.5rem + 1vw);
11}
12
13/* Responsive font sizing */
14.fluid-text {
15 font-size: calc(1rem + 1.5vw); /* Base size + viewport scaling */
16 line-height: calc(1.2em + 0.5vw);
17}
18
19/* Grid calculations */
20.dynamic-grid {
21 --columns: 4;
22 --gap: 1rem;
23 width: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
24}
25
26/* Angle and time calculations */
27.rotating-element {
28 transform: rotate(calc(var(--progress) * 360deg));
29 animation-duration: calc(var(--speed) * 1s);
30}The min() and max() Functions:
1/* Responsive constraints */
2.constrained-width {
3 width: min(90vw, 1200px); /* Never wider than viewport or max-width */
4 height: max(400px, 50vh); /* At least 400px or half viewport */
5}
6
7/* Fluid typography bounds */
8.responsive-heading {
9 font-size: max(1.5rem, min(4vw, 3rem));
10 /* At least 1.5rem, at most 3rem, scales with viewport */
11}
12
13/* Dynamic spacing with limits */
14.flexible-padding {
15 padding: min(5vw, 3rem) min(4vw, 2rem);
16 /* Padding scales but never exceeds maximums */
17}
18
19/* Multiple constraints */
20.complex-sizing {
21 width: min(
22 calc(100vw - 2rem), /* Full width minus margins */
23 max(300px, 50%), /* At least 300px or half parent */
24 800px /* Never more than 800px */
25 );
26}
27
28/* Grid column sizing */
29.adaptive-columns {
30 grid-template-columns: repeat(auto-fit,
31 minmax(min(250px, 100%), 1fr)
32 );
33}The clamp() Function - The Ultimate Responsive Tool:
1/* Perfect fluid typography */
2.fluid-title {
3 font-size: clamp(1.5rem, 4vw, 3rem);
4 /* minimum: 1.5rem, preferred: 4vw, maximum: 3rem */
5}
6
7.fluid-body {
8 font-size: clamp(1rem, 2.5vw, 1.25rem);
9 line-height: clamp(1.4, 1.5 + 0.5vw, 1.8);
10}
11
12/* Responsive spacing */
13.section-spacing {
14 padding: clamp(2rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem);
15 margin-bottom: clamp(3rem, 10vh, 12rem);
16}
17
18/* Container sizing */
19.fluid-container {
20 width: clamp(320px, 90vw, 1400px);
21 padding: clamp(1rem, 5vw, 5rem);
22}
23
24/* Component dimensions */
25.card {
26 width: clamp(280px, 45vw, 400px);
27 height: clamp(200px, 30vw, 300px);
28 border-radius: clamp(8px, 2vw, 24px);
29}
30
31/* Animation values */
32.animated-element {
33 animation-duration: clamp(0.3s, 1vw, 2s);
34 transform: scale(clamp(0.8, 0.5 + 0.5vw, 1.2));
35}Advanced Calculation Patterns:
1/* Golden ratio calculations */
2:root {
3 --golden-ratio: 1.618;
4 --base-size: 1rem;
5}
6
7.golden-proportions {
8 width: calc(var(--base-size) * var(--golden-ratio));
9 height: var(--base-size);
10 padding: calc(var(--base-size) / var(--golden-ratio));
11}
12
13/* Modular scale */
14.type-scale {
15 --ratio: 1.25;
16 --base: 1rem;
17}
18
19.heading-1 { font-size: calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio)); }
20.heading-2 { font-size: calc(var(--base) * var(--ratio) * var(--ratio)); }
21.heading-3 { font-size: calc(var(--base) * var(--ratio)); }
22.body { font-size: var(--base); }
23.small { font-size: calc(var(--base) / var(--ratio)); }
24
25/* Responsive grid system */
26.grid-system {
27 --columns: 12;
28 --gutter: 1rem;
29 --container-padding: 1rem;
30
31 display: grid;
32 grid-template-columns: repeat(var(--columns), 1fr);
33 gap: var(--gutter);
34 padding: var(--container-padding);
35 max-width: calc(
36 (var(--columns) * 60px) + /* Base column width */
37 (var(--columns) - 1) * var(--gutter) + /* Gutters */
38 (var(--container-padding) * 2) /* Container padding */
39 );
40}
41
42/* Aspect ratio calculations */
43.aspect-ratio-box {
44 --aspect-ratio: calc(16 / 9);
45 width: 100%;
46 height: calc(100% / var(--aspect-ratio));
47 /* Creates a 16:9 aspect ratio container */
48}Performance and Browser Support:
1/* Fallbacks for older browsers */
2.progressive-enhancement {
3 font-size: 1.5rem; /* Fallback */
4 font-size: clamp(1rem, 4vw, 2rem); /* Modern browsers */
5}
6
7/* Efficient calculations */
8.optimized-calc {
9 /* Good: Simple calculation */
10 width: calc(100% - 2rem);
11
12 /* Avoid: Complex nested calculations */
13 /* width: calc(calc(100vw - 2rem) - calc(2rem + 1vw)); */
14
15 /* Better: Use custom properties */
16 --container-padding: calc(2rem + 1vw);
17 width: calc(100vw - var(--container-padding));
18}This foundation of mathematical functions enables sophisticated responsive designs that adapt intelligently to any context while maintaining visual consistency and performance.
CSS color functions enable dynamic color generation, manipulation, and sophisticated theming systems that respond to user preferences and design requirements.
Modern Color Space Functions:
1/* HSL function for intuitive color control */
2:root {
3 --primary-hue: 220;
4 --primary-saturation: 100%;
5 --primary-lightness: 50%;
6}
7
8.color-variations {
9 --primary: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
10 --primary-light: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 20%));
11 --primary-dark: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 20%));
12 --primary-desaturated: hsl(var(--primary-hue) calc(var(--primary-saturation) - 30%) var(--primary-lightness));
13}
14
15/* Dynamic color adjustments */
16.interactive-element {
17 background: var(--primary);
18 transition: background 0.3s ease;
19}
20
21.interactive-element:hover {
22 background: hsl(
23 var(--primary-hue)
24 var(--primary-saturation)
25 calc(var(--primary-lightness) + 10%)
26 );
27}
28
29.interactive-element:active {
30 background: hsl(
31 var(--primary-hue)
32 var(--primary-saturation)
33 calc(var(--primary-lightness) - 10%)
34 );
35}Advanced Color Manipulation:
1/* Complementary color generation */
2.complementary-scheme {
3 --base-hue: 220;
4 --primary: hsl(var(--base-hue) 70% 50%);
5 --complementary: hsl(calc(var(--base-hue) + 180) 70% 50%);
6 --triadic-1: hsl(calc(var(--base-hue) + 120) 70% 50%);
7 --triadic-2: hsl(calc(var(--base-hue) + 240) 70% 50%);
8}
9
10/* Analogous color harmonies */
11.analogous-colors {
12 --center-hue: 200;
13 --color-1: hsl(calc(var(--center-hue) - 30) 60% 60%);
14 --color-2: hsl(var(--center-hue) 60% 60%);
15 --color-3: hsl(calc(var(--center-hue) + 30) 60% 60%);
16}
17
18/* Monochromatic variations */
19.monochromatic-palette {
20 --base-hue: 240;
21 --base-saturation: 80%;
22
23 --color-100: hsl(var(--base-hue) var(--base-saturation) 95%);
24 --color-200: hsl(var(--base-hue) var(--base-saturation) 85%);
25 --color-300: hsl(var(--base-hue) var(--base-saturation) 75%);
26 --color-400: hsl(var(--base-hue) var(--base-saturation) 65%);
27 --color-500: hsl(var(--base-hue) var(--base-saturation) 50%);
28 --color-600: hsl(var(--base-hue) var(--base-saturation) 40%);
29 --color-700: hsl(var(--base-hue) var(--base-saturation) 30%);
30 --color-800: hsl(var(--base-hue) var(--base-saturation) 20%);
31 --color-900: hsl(var(--base-hue) var(--base-saturation) 10%);
32}Color Functions with Calculations:
1/* Responsive opacity based on scroll or interaction */
2.fade-element {
3 --scroll-progress: 0; /* Set via JavaScript */
4 opacity: calc(1 - var(--scroll-progress));
5 background: hsl(220 100% 50% / calc(0.1 + var(--scroll-progress) * 0.9));
6}
7
8/* Dynamic color temperature */
9.temperature-color {
10 --temperature: 50; /* 0-100 scale */
11 background: hsl(
12 calc(240 - var(--temperature) * 1.8) /* Blue to red transition */
13 calc(70% + var(--temperature) * 0.3%) /* Increase saturation */
14 50%
15 );
16}
17
18/* Contrast-aware text colors */
19.adaptive-text {
20 --bg-lightness: 20%;
21 background: hsl(220 30% var(--bg-lightness));
22 color: hsl(220 15% calc(
23 (var(--bg-lightness) < 50%) * 90% + /* Light text on dark bg */
24 (var(--bg-lightness) >= 50%) * 10% /* Dark text on light bg */
25 ));
26}Modern Color-Mix Function:
1/* Color mixing for advanced effects */
2.color-mixing {
3 --primary: #3b82f6;
4 --secondary: #ef4444;
5
6 /* Mix colors with different ratios */
7 --mixed-50: color-mix(in srgb, var(--primary), var(--secondary));
8 --mixed-25: color-mix(in srgb, var(--primary) 25%, var(--secondary));
9 --mixed-75: color-mix(in srgb, var(--primary) 75%, var(--secondary));
10
11 /* Mix with transparency */
12 --transparent-mix: color-mix(in srgb, var(--primary), transparent 50%);
13}
14
15/* Dynamic color mixing based on state */
16.interactive-mix {
17 --mix-amount: 0; /* Controlled by JavaScript */
18 background: color-mix(
19 in srgb,
20 var(--primary),
21 var(--secondary) calc(var(--mix-amount) * 100%)
22 );
23}Advanced Gradient Functions:
1/* Calculated gradient stops */
2.dynamic-gradient {
3 --color-1: hsl(220 100% 60%);
4 --color-2: hsl(280 100% 60%);
5 --color-3: hsl(340 100% 60%);
6
7 background: linear-gradient(
8 calc(var(--angle, 45) * 1deg),
9 var(--color-1) 0%,
10 var(--color-2) calc(var(--mid-point, 50) * 1%),
11 var(--color-3) 100%
12 );
13}
14
15/* Responsive gradient patterns */
16.responsive-pattern {
17 background:
18 linear-gradient(
19 90deg,
20 transparent calc(50% - 1px),
21 hsl(0 0% 0% / 0.1) 50%,
22 transparent calc(50% + 1px)
23 ),
24 linear-gradient(
25 0deg,
26 transparent calc(50% - 1px),
27 hsl(0 0% 0% / 0.1) 50%,
28 transparent calc(50% + 1px)
29 );
30 background-size:
31 clamp(20px, 5vw, 100px)
32 clamp(20px, 5vw, 100px);
33}
34
35/* Animated gradient calculations */
36.animated-colors {
37 --hue-offset: 0; /* Animated via CSS or JS */
38 background: linear-gradient(
39 45deg,
40 hsl(calc(220 + var(--hue-offset)) 70% 60%),
41 hsl(calc(280 + var(--hue-offset)) 70% 60%),
42 hsl(calc(340 + var(--hue-offset)) 70% 60%)
43 );
44 animation: hue-shift 10s infinite linear;
45}
46
47@keyframes hue-shift {
48 0% { --hue-offset: 0; }
49 100% { --hue-offset: 360; }
50}Accessibility-Aware Color Functions:
1/* High contrast mode adaptations */
2@media (prefers-contrast: high) {
3 .adaptive-contrast {
4 --primary: hsl(220 100% 30%); /* Darker for higher contrast */
5 --background: hsl(0 0% 100%);
6 --text: hsl(0 0% 0%);
7 }
8}
9
10/* Reduced motion color changes */
11@media (prefers-reduced-motion: reduce) {
12 .motion-sensitive {
13 --transition-duration: 0s; /* No color transitions */
14 }
15}
16
17/* Light/dark mode color calculations */
18@media (prefers-color-scheme: dark) {
19 .theme-adaptive {
20 --lightness-offset: -70%; /* Invert lightness for dark mode */
21 background: hsl(
22 var(--hue)
23 var(--saturation)
24 calc(var(--base-lightness) + var(--lightness-offset))
25 );
26 }
27}These advanced color functions enable sophisticated theming systems, dynamic visual feedback, and accessibility-aware designs that adapt intelligently to user preferences and environmental conditions.
CSS transform and filter functions enable sophisticated visual effects, animations, and image processing directly in the browser, creating rich interactive experiences without external graphics.
Advanced Transform Functions:
1/* 3D Transform System */
2.transform-3d {
3 /* Perspective for 3D space */
4 perspective: 1000px;
5 perspective-origin: center center;
6}
7
8.transform-card {
9 transform-style: preserve-3d;
10 transform:
11 translateZ(0) /* Hardware acceleration */
12 rotateX(calc(var(--mouse-y) * 0.1deg))
13 rotateY(calc(var(--mouse-x) * 0.1deg))
14 scale(calc(1 + var(--hover-intensity) * 0.05));
15 transition: transform 0.3s ease;
16}
17
18/* Matrix transformations for complex effects */
19.matrix-transform {
20 /* Equivalent to: translateX(50px) scale(1.2) rotate(45deg) */
21 transform: matrix(
22 0.848, /* scaleX * cos(angle) - skewY * sin(angle) */
23 1.061, /* scaleX * sin(angle) + skewY * cos(angle) */
24 -1.061, /* skewX * cos(angle) - scaleY * sin(angle) */
25 0.848, /* skewX * sin(angle) + scaleY * cos(angle) */
26 50, /* translateX */
27 0 /* translateY */
28 );
29}
30
31/* Calculated transform origins */
32.dynamic-origin {
33 --origin-x: 50%;
34 --origin-y: 50%;
35 transform-origin:
36 calc(var(--origin-x) + var(--offset-x, 0px))
37 calc(var(--origin-y) + var(--offset-y, 0px));
38 transform: rotate(calc(var(--rotation) * 1deg));
39}
40
41/* Responsive transform scaling */
42.responsive-transforms {
43 transform:
44 scale(clamp(0.8, 1 + 0.5vw, 1.5))
45 rotate(calc(var(--progress) * 360deg))
46 translateX(clamp(-50px, 10vw, 100px));
47}Advanced Filter Functions:
1/* Dynamic filter adjustments */
2.image-effects {
3 --brightness: 1;
4 --contrast: 1;
5 --saturation: 1;
6 --hue-shift: 0deg;
7 --blur: 0px;
8
9 filter:
10 brightness(calc(var(--brightness) * 100%))
11 contrast(calc(var(--contrast) * 100%))
12 saturate(calc(var(--saturation) * 100%))
13 hue-rotate(var(--hue-shift))
14 blur(var(--blur))
15 drop-shadow(
16 calc(var(--shadow-x, 0) * 1px)
17 calc(var(--shadow-y, 0) * 1px)
18 calc(var(--shadow-blur, 10) * 1px)
19 hsl(0 0% 0% / calc(var(--shadow-opacity, 0.3)))
20 );
21}
22
23/* Interactive hover effects */
24.filter-hover:hover {
25 --brightness: 1.1;
26 --contrast: 1.2;
27 --saturation: 1.3;
28 --shadow-y: 10;
29 --shadow-blur: 20;
30 --shadow-opacity: 0.5;
31}
32
33/* Scroll-based filter effects */
34.scroll-effects {
35 --scroll-progress: 0; /* Updated via JavaScript */
36 filter:
37 blur(calc(var(--scroll-progress) * 5px))
38 opacity(calc(1 - var(--scroll-progress) * 0.7))
39 scale(calc(1 - var(--scroll-progress) * 0.1));
40}Combined Transform and Filter Effects:
1/* Glassmorphism effect */
2.glass-card {
3 background: hsl(0 0% 100% / 0.1);
4 backdrop-filter:
5 blur(10px)
6 saturate(180%)
7 brightness(110%);
8 border: 1px solid hsl(0 0% 100% / 0.2);
9 transform:
10 translateZ(0) /* Force hardware acceleration */
11 perspective(1000px)
12 rotateX(calc(var(--tilt-x, 0) * 1deg))
13 rotateY(calc(var(--tilt-y, 0) * 1deg));
14}
15
16/* Morphing shapes with calculations */
17.morphing-shape {
18 --morph-progress: 0; /* 0-1 animation progress */
19 clip-path: polygon(
20 calc(50% - var(--morph-progress) * 30%) calc(0% + var(--morph-progress) * 10%),
21 calc(100% - var(--morph-progress) * 20%) calc(50% - var(--morph-progress) * 10%),
22 calc(50% + var(--morph-progress) * 30%) calc(100% - var(--morph-progress) * 10%),
23 calc(0% + var(--morph-progress) * 20%) calc(50% + var(--morph-progress) * 10%)
24 );
25 transform:
26 scale(calc(1 + var(--morph-progress) * 0.2))
27 rotate(calc(var(--morph-progress) * 180deg));
28 filter: hue-rotate(calc(var(--morph-progress) * 360deg));
29}
30
31/* Parallax scrolling effects */
32.parallax-layer {
33 --parallax-speed: 0.5;
34 --scroll-y: 0px; /* Updated via JavaScript */
35 transform:
36 translateY(calc(var(--scroll-y) * var(--parallax-speed)))
37 translateZ(0);
38 filter:
39 blur(calc(abs(var(--scroll-y)) * 0.01px))
40 opacity(calc(1 - abs(var(--scroll-y)) * 0.001));
41}Performance-Optimized Effects:
1/* Hardware acceleration triggers */
2.gpu-accelerated {
3 transform: translateZ(0); /* Forces GPU layer */
4 will-change: transform, filter; /* Hints for optimization */
5 backface-visibility: hidden; /* Prevents flickering */
6}
7
8/* Efficient filter combinations */
9.optimized-filters {
10 /* Combine similar operations */
11 filter:
12 brightness(1.1) contrast(1.1) /* Visual adjustments */
13 blur(2px) /* Separate blur operation */
14 drop-shadow(0 4px 8px hsl(0 0% 0% / 0.2)); /* Shadow last */
15}
16
17/* Conditional effects based on performance */
18@media (prefers-reduced-motion: reduce) {
19 .motion-sensitive {
20 transform: none !important;
21 filter: none !important;
22 transition: none !important;
23 }
24}
25
26/* Device-specific optimizations */
27@media (hover: none) {
28 .touch-optimized {
29 /* Disable hover-based transforms on touch devices */
30 transform: scale(1) !important;
31 }
32}Advanced Animation Integration:
1/* Transform-based keyframe animations */
2@keyframes complex-transform {
3 0% {
4 transform:
5 scale(1)
6 rotate(0deg)
7 translateX(0);
8 filter:
9 hue-rotate(0deg)
10 brightness(100%);
11 }
12 50% {
13 transform:
14 scale(1.2)
15 rotate(180deg)
16 translateX(50px);
17 filter:
18 hue-rotate(180deg)
19 brightness(150%);
20 }
21 100% {
22 transform:
23 scale(1)
24 rotate(360deg)
25 translateX(0);
26 filter:
27 hue-rotate(360deg)
28 brightness(100%);
29 }
30}
31
32.animated-element {
33 animation: complex-transform 3s ease-in-out infinite;
34 animation-duration: calc(var(--speed, 1) * 3s);
35}
36
37/* Staggered animation calculations */
38.stagger-item {
39 --item-index: 0; /* Set per item */
40 animation-delay: calc(var(--item-index) * 0.1s);
41 transform-origin:
42 calc(50% + var(--item-index) * 10%)
43 calc(50% - var(--item-index) * 5%);
44}These transform and filter functions enable sophisticated visual effects that enhance user experience while maintaining performance and accessibility considerations.
Creating systematic approaches to CSS calculations enables consistent, maintainable designs that scale across projects and adapt to changing requirements.
Systematic Design Token Architecture:
1/* Base calculation system */
2:root {
3 /* Core mathematical constants */
4 --golden-ratio: 1.618;
5 --major-third: 1.25;
6 --perfect-fourth: 1.333;
7 --minor-third: 1.2;
8
9 /* Base units */
10 --base-unit: 1rem;
11 --base-spacing: var(--base-unit);
12 --base-radius: calc(var(--base-unit) * 0.5);
13
14 /* Scaling factors */
15 --scale-xs: 0.75;
16 --scale-sm: 0.875;
17 --scale-md: 1;
18 --scale-lg: 1.125;
19 --scale-xl: 1.25;
20 --scale-2xl: 1.5;
21 --scale-3xl: 1.75;
22 --scale-4xl: 2;
23
24 /* Responsive modifiers */
25 --mobile-modifier: 0.8;
26 --tablet-modifier: 0.9;
27 --desktop-modifier: 1;
28 --large-modifier: 1.1;
29}
30
31/* Modular spacing system */
32.spacing-system {
33 --space-3xs: calc(var(--base-spacing) * 0.25); /* 4px */
34 --space-2xs: calc(var(--base-spacing) * 0.5); /* 8px */
35 --space-xs: calc(var(--base-spacing) * 0.75); /* 12px */
36 --space-sm: var(--base-spacing); /* 16px */
37 --space-md: calc(var(--base-spacing) * 1.5); /* 24px */
38 --space-lg: calc(var(--base-spacing) * 2); /* 32px */
39 --space-xl: calc(var(--base-spacing) * 3); /* 48px */
40 --space-2xl: calc(var(--base-spacing) * 4); /* 64px */
41 --space-3xl: calc(var(--base-spacing) * 6); /* 96px */
42 --space-4xl: calc(var(--base-spacing) * 8); /* 128px */
43}
44
45/* Typography scale system */
46.type-system {
47 --text-xs: calc(var(--base-unit) * var(--scale-xs)); /* 12px */
48 --text-sm: calc(var(--base-unit) * var(--scale-sm)); /* 14px */
49 --text-base: var(--base-unit); /* 16px */
50 --text-lg: calc(var(--base-unit) * var(--scale-lg)); /* 18px */
51 --text-xl: calc(var(--base-unit) * var(--scale-xl)); /* 20px */
52 --text-2xl: calc(var(--base-unit) * var(--scale-2xl)); /* 24px */
53 --text-3xl: calc(var(--base-unit) * var(--scale-3xl)); /* 28px */
54 --text-4xl: calc(var(--base-unit) * var(--scale-4xl)); /* 32px */
55
56 /* Responsive typography with golden ratio */
57 --heading-1: calc(var(--text-base) * var(--golden-ratio) * var(--golden-ratio));
58 --heading-2: calc(var(--text-base) * var(--golden-ratio));
59 --heading-3: calc(var(--text-base) * var(--major-third));
60 --heading-4: calc(var(--text-base) * var(--minor-third));
61 --heading-5: var(--text-base);
62 --heading-6: calc(var(--text-base) * var(--scale-sm));
63}Responsive Grid Calculation System:
1/* Flexible grid system */
2.grid-system {
3 --grid-columns: 12;
4 --grid-gutter: var(--space-md);
5 --grid-margin: var(--space-lg);
6
7 /* Container calculations */
8 --container-sm: 640px;
9 --container-md: 768px;
10 --container-lg: 1024px;
11 --container-xl: 1280px;
12 --container-2xl: 1536px;
13
14 /* Column width calculations */
15 --col-width: calc(
16 (100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns)
17 );
18}
19
20/* Column span calculations */
21.col-1 { width: calc(var(--col-width)); }
22.col-2 { width: calc(var(--col-width) * 2 + var(--grid-gutter)); }
23.col-3 { width: calc(var(--col-width) * 3 + var(--grid-gutter) * 2); }
24.col-4 { width: calc(var(--col-width) * 4 + var(--grid-gutter) * 3); }
25.col-6 { width: calc(var(--col-width) * 6 + var(--grid-gutter) * 5); }
26.col-12 { width: 100%; }
27
28/* Responsive grid modifications */
29@media (max-width: 768px) {
30 .grid-system {
31 --grid-gutter: var(--space-sm);
32 --grid-margin: var(--space-md);
33 }
34}
35
36@media (min-width: 1200px) {
37 .grid-system {
38 --grid-gutter: var(--space-lg);
39 --grid-margin: var(--space-xl);
40 }
41}Component Scaling Systems:
1/* Button sizing system */
2.button-system {
3 --button-height-sm: calc(var(--base-unit) * 2); /* 32px */
4 --button-height-md: calc(var(--base-unit) * 2.5); /* 40px */
5 --button-height-lg: calc(var(--base-unit) * 3); /* 48px */
6 --button-height-xl: calc(var(--base-unit) * 3.5); /* 56px */
7
8 --button-padding-x: calc(var(--base-unit) * 1);
9 --button-padding-y: calc(var(--base-unit) * 0.5);
10
11 --button-font-sm: var(--text-sm);
12 --button-font-md: var(--text-base);
13 --button-font-lg: var(--text-lg);
14 --button-font-xl: var(--text-xl);
15}
16
17.btn {
18 height: var(--button-height-md);
19 padding: var(--button-padding-y) var(--button-padding-x);
20 font-size: var(--button-font-md);
21 border-radius: calc(var(--base-radius) * 0.5);
22}
23
24.btn--sm {
25 height: var(--button-height-sm);
26 font-size: var(--button-font-sm);
27 padding: calc(var(--button-padding-y) * 0.75) calc(var(--button-padding-x) * 0.75);
28}
29
30.btn--lg {
31 height: var(--button-height-lg);
32 font-size: var(--button-font-lg);
33 padding: calc(var(--button-padding-y) * 1.25) calc(var(--button-padding-x) * 1.5);
34}Animation and Timing Systems:
1/* Timing system */
2:root {
3 --duration-instant: 0s;
4 --duration-fast: 0.15s;
5 --duration-normal: 0.3s;
6 --duration-slow: 0.45s;
7 --duration-slower: 0.6s;
8
9 /* Easing functions */
10 --ease-linear: cubic-bezier(0, 0, 1, 1);
11 --ease-in: cubic-bezier(0.4, 0, 1, 1);
12 --ease-out: cubic-bezier(0, 0, 0.2, 1);
13 --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
14 --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
15
16 /* Animation delays */
17 --delay-0: 0s;
18 --delay-1: calc(var(--duration-fast) * 1);
19 --delay-2: calc(var(--duration-fast) * 2);
20 --delay-3: calc(var(--duration-fast) * 3);
21}
22
23/* Staggered animation system */
24.stagger-container > * {
25 --stagger-index: 0; /* Set via CSS counter or JS */
26 animation-delay: calc(var(--stagger-index) * var(--duration-fast));
27}
28
29/* Performance-conscious animations */
30.smooth-animation {
31 transition:
32 transform var(--duration-normal) var(--ease-out),
33 opacity var(--duration-fast) var(--ease-out);
34 will-change: transform, opacity;
35}Theme Calculation Systems:
1/* Dynamic theme system */
2:root {
3 --theme-hue: 220;
4 --theme-saturation: 100%;
5
6 /* Light theme calculations */
7 --color-50: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.1) 98%);
8 --color-100: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.2) 95%);
9 --color-200: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.3) 90%);
10 --color-300: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.4) 82%);
11 --color-400: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.5) 70%);
12 --color-500: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.6) 56%);
13 --color-600: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.7) 45%);
14 --color-700: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.8) 35%);
15 --color-800: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.9) 25%);
16 --color-900: hsl(var(--theme-hue) var(--theme-saturation) 15%);
17}
18
19/* Dark theme adjustments */
20@media (prefers-color-scheme: dark) {
21 :root {
22 --color-50: hsl(var(--theme-hue) var(--theme-saturation) 8%);
23 --color-100: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.9) 12%);
24 --color-200: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.8) 18%);
25 --color-300: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.7) 25%);
26 --color-400: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.6) 35%);
27 --color-500: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.5) 50%);
28 --color-600: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.4) 65%);
29 --color-700: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.3) 75%);
30 --color-800: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.2) 85%);
31 --color-900: hsl(var(--theme-hue) calc(var(--theme-saturation) * 0.1) 95%);
32 }
33}
34
35/* Utility classes from calculation system */
36.text-primary { color: var(--color-600); }
37.bg-primary { background: var(--color-500); }
38.border-primary { border-color: var(--color-400); }
39
40.text-primary-light { color: var(--color-400); }
41.text-primary-dark { color: var(--color-700); }Maintainable Architecture Patterns:
1/* Component-level calculations */
2.card {
3 /* Local calculation scope */
4 --card-padding: var(--space-md);
5 --card-radius: calc(var(--base-radius) * 2);
6 --card-shadow-offset: calc(var(--base-unit) * 0.25);
7
8 padding: var(--card-padding);
9 border-radius: var(--card-radius);
10 box-shadow:
11 0 var(--card-shadow-offset) calc(var(--card-shadow-offset) * 2)
12 hsl(0 0% 0% / 0.1);
13}
14
15/* Responsive component modifications */
16@media (min-width: 768px) {
17 .card {
18 --card-padding: var(--space-lg);
19 --card-radius: calc(var(--base-radius) * 3);
20 }
21}
22
23/* Calculation utilities */
24.calculate-aspect-ratio {
25 --width: 16;
26 --height: 9;
27 aspect-ratio: var(--width) / var(--height);
28}
29
30.calculate-golden-section {
31 --section-width: 100%;
32 --golden-width: calc(var(--section-width) / var(--golden-ratio));
33 --golden-height: calc(var(--golden-width) / var(--golden-ratio));
34}This systematic approach to CSS calculations creates maintainable, scalable design systems that adapt intelligently to different contexts while maintaining visual consistency and mathematical precision.
Build a comprehensive calculation system featuring mathematical functions, color manipulations, transforms, and reusable calculation patterns for professional-grade responsive design.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Functions & Calculations Mastery</title>
7 <style>
8 /* CALCULATION SYSTEM FOUNDATION */
9 :root {
10 /* Mathematical Constants */
11 --golden-ratio: 1.618;
12 --major-third: 1.25;
13 --perfect-fourth: 1.333;
14
15 /* Base Units & Scaling */
16 --base-unit: 1rem;
17 --scale-ratio: var(--major-third);
18
19 /* Typography Scale with Calculations */
20 --text-xs: calc(var(--base-unit) / var(--scale-ratio));
21 --text-sm: calc(var(--text-xs) * var(--scale-ratio));
22 --text-base: var(--base-unit);
23 --text-lg: calc(var(--base-unit) * var(--scale-ratio));
24 --text-xl: calc(var(--text-lg) * var(--scale-ratio));
25 --text-2xl: calc(var(--text-xl) * var(--scale-ratio));
26 --text-3xl: calc(var(--text-2xl) * var(--scale-ratio));
27
28 /* Spacing System */
29 --space-unit: var(--base-unit);
30 --space-xs: calc(var(--space-unit) * 0.25);
31 --space-sm: calc(var(--space-unit) * 0.5);
32 --space-md: var(--space-unit);
33 --space-lg: calc(var(--space-unit) * 1.5);
34 --space-xl: calc(var(--space-unit) * 2);
35 --space-2xl: calc(var(--space-unit) * 3);
36 --space-3xl: calc(var(--space-unit) * 4);
37
38 /* Color System with HSL Calculations */
39 --primary-hue: 220;
40 --primary-saturation: 100%;
41 --primary-lightness: 50%;
42
43 --primary: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
44 --primary-light: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + 20%));
45 --primary-dark: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) - 20%));
46 --complementary: hsl(calc(var(--primary-hue) + 180) var(--primary-saturation) var(--primary-lightness));
47
48 /* Animation Timing */
49 --duration-fast: 0.15s;
50 --duration-normal: 0.3s;
51 --duration-slow: 0.6s;
52 --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
53 }
54
55 /* RESET & BASE */
56 * {
57 margin: 0;
58 padding: 0;
59 box-sizing: border-box;
60 }
61
62 body {
63 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
64 font-size: var(--text-base);
65 line-height: calc(1.4 + 0.5vw);
66 color: #333;
67 background: linear-gradient(135deg,
68 hsl(var(--primary-hue) 20% 97%),
69 hsl(calc(var(--primary-hue) + 30) 25% 95%)
70 );
71 min-height: 100vh;
72 }
73
74 /* FLUID CONTAINER SYSTEM */
75 .container {
76 width: clamp(320px, 90vw, 1200px);
77 margin: 0 auto;
78 padding: clamp(var(--space-md), 4vw, var(--space-2xl));
79 }
80
81 /* CALCULATED TYPOGRAPHY */
82 .hero-title {
83 font-size: clamp(var(--text-2xl), 6vw, calc(var(--text-3xl) * 1.2));
84 font-weight: 700;
85 line-height: calc(1.1 + 0.2vw);
86 margin-bottom: clamp(var(--space-sm), 3vw, var(--space-lg));
87 color: var(--primary);
88 text-align: center;
89 }
90
91 .section-title {
92 font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
93 font-weight: 600;
94 margin-bottom: var(--space-md);
95 color: var(--primary-dark);
96 }
97
98 .description {
99 font-size: clamp(var(--text-sm), 2.5vw, var(--text-lg));
100 color: #666;
101 text-align: center;
102 margin-bottom: clamp(var(--space-lg), 6vw, var(--space-3xl));
103 max-width: calc(100% - var(--space-xl));
104 margin-left: auto;
105 margin-right: auto;
106 }
107
108 /* MATHEMATICAL GRID SYSTEM */
109 .demo-grid {
110 display: grid;
111 grid-template-columns: repeat(auto-fit, minmax(
112 clamp(280px, 30vw, 350px), 1fr
113 ));
114 gap: clamp(var(--space-md), 4vw, var(--space-xl));
115 margin-bottom: var(--space-3xl);
116 }
117
118 /* CARD SYSTEM WITH CALCULATIONS */
119 .demo-card {
120 background: white;
121 border-radius: clamp(8px, 2vw, 16px);
122 padding: clamp(var(--space-md), 4vw, var(--space-xl));
123 box-shadow:
124 0 calc(var(--space-xs) / 2) var(--space-sm) hsl(0 0% 0% / 0.1),
125 0 calc(var(--space-sm)) calc(var(--space-lg)) hsl(0 0% 0% / 0.05);
126 transition:
127 transform var(--duration-normal) var(--ease-bounce),
128 box-shadow var(--duration-normal) ease;
129 transform: translateZ(0); /* Hardware acceleration */
130 }
131
132 .demo-card:hover {
133 transform: translateY(calc(var(--space-xs) * -1)) scale(1.02);
134 box-shadow:
135 0 var(--space-sm) calc(var(--space-lg) * 1.5) hsl(0 0% 0% / 0.15),
136 0 var(--space-md) calc(var(--space-xl) * 1.2) hsl(0 0% 0% / 0.08);
137 }
138
139 .card-title {
140 font-size: var(--text-lg);
141 font-weight: 600;
142 margin-bottom: var(--space-sm);
143 color: var(--primary-dark);
144 }
145
146 /* INTERACTIVE CALCULATION DEMO */
147 .math-demo {
148 background: white;
149 border-radius: var(--space-md);
150 padding: var(--space-xl);
151 margin-bottom: var(--space-2xl);
152 box-shadow: 0 4px 24px hsl(0 0% 0% / 0.1);
153 }
154
155 .calculation-display {
156 background: #f8f9fa;
157 border-radius: var(--space-sm);
158 padding: var(--space-lg);
159 margin: var(--space-md) 0;
160 font-family: 'Monaco', 'Menlo', monospace;
161 font-size: var(--text-sm);
162 border-left: 4px solid var(--primary);
163 }
164
165 /* DYNAMIC COLOR FUNCTIONS */
166 .color-demo {
167 --demo-hue: 180;
168 --demo-saturation: 70%;
169 --demo-lightness: 60%;
170
171 background: hsl(var(--demo-hue) var(--demo-saturation) var(--demo-lightness));
172 color: hsl(var(--demo-hue) var(--demo-saturation) calc(
173 (var(--demo-lightness) > 50%) * 10% +
174 (var(--demo-lightness) <= 50%) * 90%
175 ));
176 padding: var(--space-lg);
177 border-radius: var(--space-sm);
178 margin-bottom: var(--space-md);
179 transition: all var(--duration-slow) ease;
180 }
181
182 .color-demo:hover {
183 --demo-lightness: calc(var(--demo-lightness) + 10%);
184 transform: scale(1.05);
185 }
186
187 /* TRANSFORM & FILTER FUNCTIONS */
188 .transform-demo {
189 width: clamp(100px, 20vw, 150px);
190 height: clamp(100px, 20vw, 150px);
191 background: linear-gradient(45deg, var(--primary), var(--complementary));
192 border-radius: 50%;
193 margin: var(--space-xl) auto;
194 position: relative;
195 overflow: hidden;
196 }
197
198 .transform-demo::before {
199 content: '';
200 position: absolute;
201 top: 50%;
202 left: 50%;
203 width: 80%;
204 height: 80%;
205 background: white;
206 border-radius: 50%;
207 transform: translate(-50%, -50%) scale(var(--inner-scale, 0.8));
208 transition: transform var(--duration-slow) var(--ease-bounce);
209 }
210
211 .transform-demo:hover::before {
212 --inner-scale: 1.1;
213 }
214
215 .transform-demo {
216 animation: rotate-hue 10s linear infinite;
217 }
218
219 @keyframes rotate-hue {
220 0% { filter: hue-rotate(0deg); }
221 100% { filter: hue-rotate(360deg); }
222 }
223
224 /* CONTROLS SYSTEM */
225 .controls {
226 display: flex;
227 flex-wrap: wrap;
228 gap: var(--space-md);
229 margin-bottom: var(--space-lg);
230 justify-content: center;
231 }
232
233 .control-group {
234 display: flex;
235 flex-direction: column;
236 gap: var(--space-xs);
237 min-width: calc(120px + 2vw);
238 }
239
240 .control-label {
241 font-size: var(--text-sm);
242 font-weight: 500;
243 color: var(--primary-dark);
244 }
245
246 .control-input {
247 padding: calc(var(--space-sm) * 0.75) var(--space-sm);
248 border: 2px solid #e2e8f0;
249 border-radius: calc(var(--space-sm) * 0.5);
250 font-size: var(--text-sm);
251 transition: border-color var(--duration-normal) ease;
252 }
253
254 .control-input:focus {
255 outline: none;
256 border-color: var(--primary);
257 box-shadow: 0 0 0 3px hsl(var(--primary-hue) var(--primary-saturation) 90%);
258 }
259
260 .control-range {
261 width: 100%;
262 height: 6px;
263 background: #e2e8f0;
264 border-radius: 3px;
265 outline: none;
266 -webkit-appearance: none;
267 }
268
269 .control-range::-webkit-slider-thumb {
270 -webkit-appearance: none;
271 appearance: none;
272 width: calc(var(--space-md) + 4px);
273 height: calc(var(--space-md) + 4px);
274 border-radius: 50%;
275 background: var(--primary);
276 cursor: pointer;
277 box-shadow: 0 2px 8px hsl(0 0% 0% / 0.2);
278 }
279
280 .control-range::-moz-range-thumb {
281 width: calc(var(--space-md) + 4px);
282 height: calc(var(--space-md) + 4px);
283 border-radius: 50%;
284 background: var(--primary);
285 cursor: pointer;
286 border: none;
287 box-shadow: 0 2px 8px hsl(0 0% 0% / 0.2);
288 }
289
290 /* BUTTON SYSTEM */
291 .btn {
292 display: inline-flex;
293 align-items: center;
294 justify-content: center;
295 padding: calc(var(--space-sm) * 0.75) var(--space-lg);
296 background: var(--primary);
297 color: white;
298 border: none;
299 border-radius: calc(var(--space-sm) * 0.5);
300 font-size: var(--text-base);
301 font-weight: 500;
302 cursor: pointer;
303 transition: all var(--duration-normal) ease;
304 text-decoration: none;
305 min-height: calc(var(--space-lg) * 2);
306 }
307
308 .btn:hover {
309 background: var(--primary-dark);
310 transform: translateY(-2px);
311 box-shadow: 0 4px 12px hsl(var(--primary-hue) var(--primary-saturation) 50% / 0.4);
312 }
313
314 .btn:active {
315 transform: translateY(0);
316 }
317
318 .btn--secondary {
319 background: white;
320 color: var(--primary);
321 border: 2px solid var(--primary);
322 }
323
324 .btn--secondary:hover {
325 background: var(--primary);
326 color: white;
327 }
328
329 /* RESPONSIVE CALCULATIONS */
330 @media (max-width: 768px) {
331 .demo-grid {
332 grid-template-columns: 1fr;
333 }
334
335 .controls {
336 flex-direction: column;
337 align-items: stretch;
338 }
339
340 .control-group {
341 min-width: auto;
342 }
343 }
344
345 /* ACCESSIBILITY */
346 @media (prefers-reduced-motion: reduce) {
347 * {
348 animation-duration: 0.01ms !important;
349 animation-iteration-count: 1 !important;
350 transition-duration: 0.01ms !important;
351 }
352 }
353
354 @media (prefers-color-scheme: dark) {
355 body {
356 background: linear-gradient(135deg, #1a1a2e, #16213e);
357 color: #e2e8f0;
358 }
359
360 .demo-card {
361 background: #2d3748;
362 color: #e2e8f0;
363 }
364
365 .math-demo {
366 background: #2d3748;
367 color: #e2e8f0;
368 }
369
370 .calculation-display {
371 background: #1a202c;
372 }
373 }
374
375 /* UTILITY CLASSES */
376 .text-center { text-align: center; }
377 .mb-lg { margin-bottom: var(--space-lg); }
378 .mb-xl { margin-bottom: var(--space-xl); }
379
380 /* ANIMATION SYSTEM */
381 .fade-in {
382 opacity: 0;
383 transform: translateY(var(--space-lg));
384 animation: fadeInUp var(--duration-slow) var(--ease-bounce) forwards;
385 }
386
387 @keyframes fadeInUp {
388 to {
389 opacity: 1;
390 transform: translateY(0);
391 }
392 }
393
394 .stagger-1 { animation-delay: calc(var(--duration-normal) * 0.5); }
395 .stagger-2 { animation-delay: calc(var(--duration-normal) * 1); }
396 .stagger-3 { animation-delay: calc(var(--duration-normal) * 1.5); }
397 .stagger-4 { animation-delay: calc(var(--duration-normal) * 2); }
398 </style>
399</head>
400<body>
401 <div class="container">
402 <header class="text-center mb-xl">
403 <h1 class="hero-title fade-in">🧮 CSS Functions & Calculations</h1>
404 <p class="description fade-in stagger-1">
405 Master mathematical functions, color manipulations, transforms, and systematic calculations for professional responsive design
406 </p>
407 </header>
408
409 <!-- Mathematical Functions Demo -->
410 <section class="math-demo fade-in stagger-2">
411 <h2 class="section-title">📐 Mathematical Functions</h2>
412 <p class="mb-lg">Experience calc(), min(), max(), and clamp() functions in action with interactive controls.</p>
413
414 <div class="controls">
415 <div class="control-group">
416 <label class="control-label">Base Size (rem)</label>
417 <input type="range" class="control-range" id="baseSize"
418 min="0.5" max="3" step="0.1" value="1">
419 <span id="baseSizeValue">1rem</span>
420 </div>
421 <div class="control-group">
422 <label class="control-label">Viewport Scale (%)</label>
423 <input type="range" class="control-range" id="viewportScale"
424 min="0" max="10" step="0.5" value="2">
425 <span id="viewportScaleValue">2vw</span>
426 </div>
427 <div class="control-group">
428 <label class="control-label">Max Size (rem)</label>
429 <input type="range" class="control-range" id="maxSize"
430 min="1" max="5" step="0.1" value="3">
431 <span id="maxSizeValue">3rem</span>
432 </div>
433 </div>
434
435 <div class="calculation-display" id="mathResult">
436 font-size: clamp(1rem, 2vw, 3rem);
437 </div>
438
439 <div style="font-size: var(--demo-font-size, clamp(1rem, 2vw, 3rem));
440 transition: font-size 0.3s ease; text-align: center;
441 padding: var(--space-lg); background: var(--primary-light);
442 color: white; border-radius: var(--space-sm);">
443 This text demonstrates fluid typography scaling!
444 </div>
445 </section>
446
447 <!-- Color Functions Demo -->
448 <section class="fade-in stagger-3">
449 <h2 class="section-title">🎨 Advanced Color Functions</h2>
450 <p class="mb-lg">Explore HSL calculations, color mixing, and dynamic color generation.</p>
451
452 <div class="controls">
453 <div class="control-group">
454 <label class="control-label">Hue (degrees)</label>
455 <input type="range" class="control-range" id="colorHue"
456 min="0" max="360" step="1" value="220">
457 <span id="colorHueValue">220°</span>
458 </div>
459 <div class="control-group">
460 <label class="control-label">Saturation (%)</label>
461 <input type="range" class="control-range" id="colorSaturation"
462 min="0" max="100" step="1" value="70">
463 <span id="colorSaturationValue">70%</span>
464 </div>
465 <div class="control-group">
466 <label class="control-label">Lightness (%)</label>
467 <input type="range" class="control-range" id="colorLightness"
468 min="10" max="90" step="1" value="50">
469 <span id="colorLightnessValue">50%</span>
470 </div>
471 </div>
472
473 <div class="demo-grid">
474 <div class="color-demo" id="primaryColor">
475 <strong>Primary Color</strong><br>
476 HSL calculated dynamically
477 </div>
478 <div class="color-demo" id="complementaryColor">
479 <strong>Complementary</strong><br>
480 Hue + 180°
481 </div>
482 <div class="color-demo" id="analogousColor">
483 <strong>Analogous</strong><br>
484 Hue + 30°
485 </div>
486 </div>
487 </section>
488
489 <!-- Transform & Filter Demo -->
490 <section class="fade-in stagger-4">
491 <h2 class="section-title">🔄 Transform & Filter Functions</h2>
492 <p class="mb-lg">Dynamic transforms and filters with mathematical precision.</p>
493
494 <div class="transform-demo" id="transformDemo"></div>
495
496 <div class="controls">
497 <div class="control-group">
498 <label class="control-label">Rotation (degrees)</label>
499 <input type="range" class="control-range" id="rotation"
500 min="0" max="360" step="1" value="0">
501 <span id="rotationValue">0°</span>
502 </div>
503 <div class="control-group">
504 <label class="control-label">Scale</label>
505 <input type="range" class="control-range" id="scale"
506 min="0.5" max="2" step="0.1" value="1">
507 <span id="scaleValue">1</span>
508 </div>
509 <div class="control-group">
510 <label class="control-label">Blur (px)</label>
511 <input type="range" class="control-range" id="blur"
512 min="0" max="20" step="1" value="0">
513 <span id="blurValue">0px</span>
514 </div>
515 </div>
516 </section>
517
518 <!-- Grid System Demo -->
519 <section class="fade-in">
520 <h2 class="section-title">📊 Calculation-Based Grid System</h2>
521 <p class="mb-lg">Responsive grid with mathematical precision and golden ratio proportions.</p>
522
523 <div class="demo-grid">
524 <div class="demo-card">
525 <h3 class="card-title">Golden Ratio Card</h3>
526 <p>Width and height calculated using the golden ratio (1.618) for perfect proportions.</p>
527 </div>
528 <div class="demo-card">
529 <h3 class="card-title">Fluid Spacing</h3>
530 <p>Padding and margins scale fluidly using clamp() functions for optimal spacing at any size.</p>
531 </div>
532 <div class="demo-card">
533 <h3 class="card-title">Calculated Shadows</h3>
534 <p>Box shadows use mathematical relationships for consistent depth and visual hierarchy.</p>
535 </div>
536 <div class="demo-card">
537 <h3 class="card-title">Responsive Typography</h3>
538 <p>Font sizes scale using mathematical progressions and viewport-based calculations.</p>
539 </div>
540 <div class="demo-card">
541 <h3 class="card-title">Dynamic Colors</h3>
542 <p>Color variations generated through HSL calculations and mathematical color theory.</p>
543 </div>
544 <div class="demo-card">
545 <h3 class="card-title">Systematic Design</h3>
546 <p>All values derived from base units and mathematical relationships for perfect consistency.</p>
547 </div>
548 </div>
549 </section>
550
551 <!-- Action Buttons -->
552 <div class="text-center">
553 <button class="btn" onclick="resetAllValues()">Reset All Values</button>
554 <button class="btn btn--secondary" onclick="randomizeValues()">Randomize</button>
555 </div>
556 </div>
557
558 <script>
559 // Interactive Controls System
560 class CalculationDemo {
561 constructor() {
562 this.initControls();
563 this.updateAllValues();
564 }
565
566 initControls() {
567 // Math function controls
568 document.getElementById('baseSize').addEventListener('input', this.updateMathFunctions.bind(this));
569 document.getElementById('viewportScale').addEventListener('input', this.updateMathFunctions.bind(this));
570 document.getElementById('maxSize').addEventListener('input', this.updateMathFunctions.bind(this));
571
572 // Color function controls
573 document.getElementById('colorHue').addEventListener('input', this.updateColorFunctions.bind(this));
574 document.getElementById('colorSaturation').addEventListener('input', this.updateColorFunctions.bind(this));
575 document.getElementById('colorLightness').addEventListener('input', this.updateColorFunctions.bind(this));
576
577 // Transform controls
578 document.getElementById('rotation').addEventListener('input', this.updateTransforms.bind(this));
579 document.getElementById('scale').addEventListener('input', this.updateTransforms.bind(this));
580 document.getElementById('blur').addEventListener('input', this.updateTransforms.bind(this));
581 }
582
583 updateMathFunctions() {
584 const baseSize = document.getElementById('baseSize').value;
585 const viewportScale = document.getElementById('viewportScale').value;
586 const maxSize = document.getElementById('maxSize').value;
587
588 // Update display values
589 document.getElementById('baseSizeValue').textContent = baseSize + 'rem';
590 document.getElementById('viewportScaleValue').textContent = viewportScale + 'vw';
591 document.getElementById('maxSizeValue').textContent = maxSize + 'rem';
592
593 // Update calculation display
594 const calculation = `clamp(${baseSize}rem, ${viewportScale}vw, ${maxSize}rem)`;
595 document.getElementById('mathResult').textContent = `font-size: ${calculation};`;
596
597 // Apply to demo element
598 document.documentElement.style.setProperty('--demo-font-size', calculation);
599 }
600
601 updateColorFunctions() {
602 const hue = document.getElementById('colorHue').value;
603 const saturation = document.getElementById('colorSaturation').value;
604 const lightness = document.getElementById('colorLightness').value;
605
606 // Update display values
607 document.getElementById('colorHueValue').textContent = hue + '°';
608 document.getElementById('colorSaturationValue').textContent = saturation + '%';
609 document.getElementById('colorLightnessValue').textContent = lightness + '%';
610
611 // Calculate colors
612 const primary = `hsl(${hue} ${saturation}% ${lightness}%)`;
613 const complementary = `hsl(${(parseInt(hue) + 180) % 360} ${saturation}% ${lightness}%)`;
614 const analogous = `hsl(${(parseInt(hue) + 30) % 360} ${saturation}% ${lightness}%)`;
615
616 // Apply colors
617 const primaryEl = document.getElementById('primaryColor');
618 const complementaryEl = document.getElementById('complementaryColor');
619 const analogousEl = document.getElementById('analogousColor');
620
621 primaryEl.style.setProperty('--demo-hue', hue);
622 primaryEl.style.setProperty('--demo-saturation', saturation + '%');
623 primaryEl.style.setProperty('--demo-lightness', lightness + '%');
624
625 complementaryEl.style.background = complementary;
626 analogousEl.style.background = analogous;
627
628 // Calculate appropriate text color
629 const textLightness = parseInt(lightness) > 50 ? '10%' : '90%';
630 complementaryEl.style.color = `hsl(${(parseInt(hue) + 180) % 360} ${saturation}% ${textLightness})`;
631 analogousEl.style.color = `hsl(${(parseInt(hue) + 30) % 360} ${saturation}% ${textLightness})`;
632 }
633
634 updateTransforms() {
635 const rotation = document.getElementById('rotation').value;
636 const scale = document.getElementById('scale').value;
637 const blur = document.getElementById('blur').value;
638
639 // Update display values
640 document.getElementById('rotationValue').textContent = rotation + '°';
641 document.getElementById('scaleValue').textContent = scale;
642 document.getElementById('blurValue').textContent = blur + 'px';
643
644 // Apply transforms
645 const transformDemo = document.getElementById('transformDemo');
646 transformDemo.style.transform = `rotate(${rotation}deg) scale(${scale})`;
647 transformDemo.style.filter = `blur(${blur}px)`;
648 }
649
650 updateAllValues() {
651 this.updateMathFunctions();
652 this.updateColorFunctions();
653 this.updateTransforms();
654 }
655 }
656
657 // Global functions
658 function resetAllValues() {
659 // Reset all inputs to default values
660 document.getElementById('baseSize').value = 1;
661 document.getElementById('viewportScale').value = 2;
662 document.getElementById('maxSize').value = 3;
663 document.getElementById('colorHue').value = 220;
664 document.getElementById('colorSaturation').value = 70;
665 document.getElementById('colorLightness').value = 50;
666 document.getElementById('rotation').value = 0;
667 document.getElementById('scale').value = 1;
668 document.getElementById('blur').value = 0;
669
670 // Update all displays
671 demo.updateAllValues();
672 }
673
674 function randomizeValues() {
675 // Randomize all values within reasonable ranges
676 document.getElementById('baseSize').value = (Math.random() * 2 + 0.5).toFixed(1);
677 document.getElementById('viewportScale').value = (Math.random() * 8 + 1).toFixed(1);
678 document.getElementById('maxSize').value = (Math.random() * 3 + 2).toFixed(1);
679 document.getElementById('colorHue').value = Math.floor(Math.random() * 360);
680 document.getElementById('colorSaturation').value = Math.floor(Math.random() * 60 + 40);
681 document.getElementById('colorLightness').value = Math.floor(Math.random() * 60 + 20);
682 document.getElementById('rotation').value = Math.floor(Math.random() * 360);
683 document.getElementById('scale').value = (Math.random() * 1.5 + 0.5).toFixed(1);
684 document.getElementById('blur').value = Math.floor(Math.random() * 15);
685
686 // Update all displays
687 demo.updateAllValues();
688 }
689
690 // Initialize the demo
691 const demo = new CalculationDemo();
692
693 // Add scroll-based animations
694 const observerOptions = {
695 threshold: 0.1,
696 rootMargin: '0px 0px -50px 0px'
697 };
698
699 const observer = new IntersectionObserver((entries) => {
700 entries.forEach(entry => {
701 if (entry.isIntersecting) {
702 entry.target.style.opacity = '1';
703 entry.target.style.transform = 'translateY(0)';
704 }
705 });
706 }, observerOptions);
707
708 // Observe all fade-in elements
709 document.querySelectorAll('.fade-in').forEach(el => {
710 observer.observe(el);
711 });
712 </script>
713</body>
714</html>This comprehensive CSS functions and calculations implementation demonstrates the full power of mathematical CSS for creating sophisticated, adaptive design systems.
🧮 Mathematical Functions Mastery:
1. Advanced calc() Applications:
clamp(1rem, 4vw, 3rem) for perfect scalingcalc(var(--base-unit) * var(--golden-ratio))2. min(), max(), and clamp() Integration:
width: min(90vw, 1200px)height: max(400px, 50vh)clamp(minimum, preferred, maximum)🎨 Advanced Color System:
3. HSL Mathematical Calculations:
hue + 180°) and analogous colors4. Color Function Applications:
🔄 Transform & Filter Mathematics:
5. 3D Transform Calculations:
6. Filter Function Systems:
📊 Systematic Design Implementation:
7. Design Token Architecture:
8. Grid and Layout Systems:
⚡ Performance and Accessibility:
9. Optimization Strategies:
translateZ(0) for GPU optimization10. Accessibility Integration:
🎯 Interactive Demonstration Features:
This implementation showcases how CSS functions and calculations can create sophisticated, maintainable design systems that adapt intelligently to any context while maintaining mathematical precision and visual harmony.
Exceptional work mastering CSS functions and calculations! You now understand how to create sophisticated mathematical design systems that adapt intelligently to any context. In our next lesson, we'll explore Modern CSS Architecture Patterns, where you'll learn to organize and structure large-scale CSS projects using methodologies like BEM, CUBE CSS, and modern component architectures. Get ready to master professional CSS organization and maintainability!
Your progress is saved in this browser, on this device only.