This component demonstrates the use of modern CSS features such as clamp(), min(), max(), CSS variables, container queries, animations, and interactive elements using JavaScript.
🔥 Description
This component demonstrates the use of modern CSS features such as clamp(), min(), max(), CSS variables, container queries, animations, and interactive elements using JavaScript. It is themed around a futuristic space aesthetic, including glowing planetary visuals, a starfield background, floating effects, and responsive design behavior. The component helps users understand how CSS modern functions behave visually and interactively inside a UI.
🧠 How the Component Works
📄 HTML Code
1<!DOCTYPE html>2<htmllang="en">34<head>5<metacharset="UTF-8">6<title>CSS Modern Functions Space Demo</title>7<linkrel="stylesheet"href="./style.css">89</head>1011<body>12<divclass="container">13<h1>🚀 CSS Modern Functions Space Demo</h1>1415<divclass="grid">16<divclass="card">17<h2class="card-title">⭐ clamp() Function</h2>18<divclass="card-content">19 Responsive sizing otomatis tanpa media queries
20</div>21<divclass="function-demo">22<divclass="planet"></div>23<divclass="code-block">24 font-size: clamp(1rem, 5vw, 3rem);</div>25</div>26</div>2728<divclass="card">29<h2class="card-title">🌍 min() & max() Functions</h2>30<divclass="card-content">31 Pilih nilai minimum atau maksimum secara dinamis
32</div>33<divclass="function-demo">34<divclass="slider-container">35<inputtype="range"min="50"max="300"value="150"class="slider"id="minMaxSlider">36<divclass="output"id="minMaxOutput">150px</div>37</div>38<divclass="code-block">39 width: min(300px, 90vw);</div>40</div>41</div>4243<divclass="card">44<h2class="card-title">🪐 CSS Variables</h2>45<divclass="card-content">46 Custom properties untuk theming dinamis
47</div>48<divclass="function-demo">49<buttonclass="space-button"id="colorBtn">Change Theme</button>50<divclass="code-block">51 --space-color: #4a9eff;
52 color: var(--space-color);</div>53</div>54</div>5556<divclass="card">57<h2class="card-title">🌌 Container Queries</h2>58<divclass="card-content">59 Styling berdasarkan ukuran container
60</div>61<divclass="container-demo">62<divclass="responsive-box">63 Resize untuk melihat efeknya
64</div>65</div>66<divclass="code-block">67 @container (min-width: 400px) {
68 font-size: 1.5rem;
69 }</div>70</div>71</div>72</div>73<scriptsrc="./script.js"></script>7475</body>7677</html>78
🌐 1️⃣ HTML Explanation
The HTML structure acts as the foundation of the UI. It contains the main wrapper that holds all visual and interactive elements. The HTML includes:
A full-page container with a star-themed background.
A heading element that uses CSS functions like clamp() to demonstrate responsive text resizing.
A glowing planet element positioned near the center to support the space theme.
A theme selector that allows users to switch between different glow color presets.
A live interactive slider demo that visually changes the width of a demonstration box, showing how min(), max(), and clamp() behave.
A card container used to demonstrate container queries, where the internal layout adjusts based on container size.
The HTML is kept minimal. All stylings and animations are handled via CSS, while interactivity is controlled by JavaScript. The HTML only provides semantic and structural elements.
The CSS is the core of this modern demo, showcasing advanced features in a futuristic space-like visual style.
Key CSS features used:
✔ CSS Variables
The component defines multiple global color variables for glow, stars, and gradients. Changing the theme updates the variables, instantly transforming the entire page.
✔ clamp(), min(), max()
The heading uses clamp(min, preferred, max) to scale fluidly between small and large screens.
The demo width box uses min() and max() to restrict resizing so that the slider cannot break the layout.
Multiple elements use max() for padding and spacing on larger layouts.
✔ Gradients & Glows
The background uses layered gradients and blur filters to create a galaxy-like atmosphere.
The planet uses radial gradients and subtle animations to simulate glowing energy.
✔ Space Animations
A starfield effect is created using repeating radial gradients and keyframe animations that move the stars slowly to mimic depth and motion.
✔ Container Queries
Inside cards, text size and padding change depending on container width, not viewport width.
This demonstrates modern responsive design techniques.
✔ Responsive Layout
The CSS ensures everything fits elegantly on phones, tablets, and desktops. No content overflows because min(), max(), and clamp() restrict dynamic sizing.
Overall, the CSS delivers both education and aesthetics — a perfect showcase of modern features inside an attractive theme.
JavaScript adds the interactive and dynamic behavior to the component.
✔ Theme Switching
The script listens for theme changes and updates CSS variables in real time.
Switching themes instantly modifies glow colors, background, and highlights.
✔ Slider Width Demo
When users move the slider, JavaScript updates the target box width.
Although JS sets the raw width, CSS clamps it using min() and max(), visually demonstrating how the functions override script-driven sizing.
✔ Parallax Motion
JavaScript tracks mouse movement and applies small transform shifts to elements like cards and headings.
This creates a smooth parallax effect, adding depth to the UI.
✔ Responsive Recalculation
When the window resizes, JavaScript re-reads container sizes so that container query adjustments update instantly.
✔ UI Glow Pulses
The script triggers certain animations at intervals, causing the planet and background glows to subtly pulse, making the design feel alive.
Overall, the JavaScript enhances interaction, movement, theme control, and responsiveness, making this demo both educational and visually stunning.
