Exploring the Boundaries of Static Web Technology
Animated gradient text using CSS keyframes and background-clip properties.
Combined CSS animations with rotation and pulse effects.
Dynamic particle system created with pure CSS animations. Check the hero section!
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-100px); }
}
Click a color to change the theme! ? This uses CSS custom properties (variables) for dynamic theming
Modern button styles with hover effects and gradients.
Click and drag to draw on the canvas below!
SVG animations using the <animate> element for smooth, scalable graphics.
Hover over the question mark to see a tooltip in action: ? This is a pure CSS tooltip using pseudo-classes!
This card demonstrates the glassmorphism effect using backdrop-filter and semi-transparent backgrounds.
Loading spinner animation
This entire page uses CSS Grid and Flexbox for responsive layouts that adapt to any screen size.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}