An interactive showcase of CSS capabilities - from fundamentals to cutting-edge features. Pure CSS, no frameworks.
✨ Version 1.1 Released! - Enhanced UX, search functionality, accessibility improvements, and micro-interactions.
Write CSS code and see live results instantly. Perfect for learning and experimentation.
Explore the latest CSS features including:
:has()selector - The parent selector we've been waiting for- Container Queries - Responsive components based on container size
- CSS Nesting - Native nesting without preprocessors
- Scroll Animations - Scroll-driven effects without JavaScript
- Anchor Positioning - Position elements relative to others
- New Colour Spaces - OKLCH, LAB, and more vibrant colours
- CSS Subgrid - Align nested grids perfectly
- Icons - No icon fonts needed, pure CSS icons with animations
- Buttons - 50+ button styles from simple to spectacular
- Forms - Beautiful, accessible form designs
- Cards - Versatile card layouts and effects
- Tables - Data presentation that's both functional and beautiful
Fully themed with CSS custom properties. Respects system preferences.
Mobile-first design that looks brilliant on every device.
Semantic HTML, ARIA labels, keyboard navigation, and focus states throughout.
Properly spelt with a dash of British charm and personality!
-
Clone the repository
git clone https://github.com/ThomasJButler/css-showcase.git cd css-showcase -
Open in browser
# Open directly open index.html # Or serve with any static server python -m http.server 8000 # Visit http://localhost:8000
That's it! No build process, no dependencies, just pure web technologies.
- Fundamentals - Selectors, cascade, specificity, units
- Box Model - Padding, margins, borders explained visually
- Typography - Beautiful text styling techniques
- Layout - Flexbox, Grid, positioning, floats
- Gradients - Linear, radial, conic gradients
- Transitions - Smooth state changes
- Animations - Keyframe animations and effects
- Filters & Blend Modes - Instagram-worthy effects
- 3D Transforms - Add depth to your designs
- Custom Properties - CSS variables and theming
- Shapes & Clips - Break free from rectangles
- Modern Functions - min(), max(), clamp(), calc()
- Progressive Enhancement - Fallbacks and feature detection
Every concept includes:
- Live, interactive examples
- Colour-coded syntax highlighting
- Copy-to-clipboard functionality
- Browser support indicators
css-showcase/
├── index.html # Landing page with feature grid
├── playground.html # Interactive CSS editor
├──
├── 📁 Modern CSS Features
│ ├── has-selector.html # :has() selector demos
│ ├── container-queries.html # Container query examples
│ ├── css-nesting.html # Native CSS nesting
│ └── ...more
├──
├── 📁 Components
│ ├── buttons.html # Button showcase
│ ├── forms.html # Form styling
│ ├── icons.html # Pure CSS icons
│ └── ...more
├──
├── 📁 styles/
│ ├── main.css # Global styles & theming
│ ├── playground.css # Playground specific
│ ├── modern-features.css # Modern CSS demos
│ └── ...component styles
└──
└── 📁 scripts/
├── main.js # Core functionality
├── playground.js # Editor functionality
└── ...component scripts
- Pure HTML, CSS, and JavaScript
- No frameworks or libraries
- No compilation or bundling required
- Just open and edit!
- CSS Custom Properties for theming
- BEM-inspired naming conventions
- Mobile-first responsive approach
- Progressive enhancement
- ✅ Chrome/Edge 106+
- ✅ Firefox 110+
- ✅ Safari 16+
- ✅ Mobile browsers
- Graceful fallbacks for older browsers
- Minimal JavaScript (enhancement only)
- Lazy loading for interactive demos
- Optimised for fast initial load
- Zero runtime dependencies
- 🔍 Global Search (Cmd/Ctrl + K) - Instantly find any CSS feature
- 🍞 Breadcrumb Navigation - Better orientation on all pages
- ✨ Syntax Highlighting - Custom lightweight code highlighting
- 📋 Copy Code Buttons - One-click copying for all examples
- 🎭 Micro-interactions - Subtle animations throughout
- ♿ Accessibility Overhaul - WCAG compliant with full keyboard support
- Enhanced mobile navigation with backdrop and smooth animations
- Improved header with auto-hide on scroll
- Better spacing and typography for readability
- Refined card designs with hover effects
- Ripple effects on interactive elements
- Parallax effects in hero sections
- Reveal animations on scroll
- Performance optimizations for smooth 60fps
- Initial release with 20+ showcase pages
- Interactive playgrounds for Flexbox, Grid, and Filters
- Dark mode support
- Responsive design
Start with Basic CSS → Box Model → Typography → Flexbox
Explore Grid → Transitions → Custom Properties → Responsive Design
Dive into Modern CSS → Container Queries → :has() selector → 3D Transforms
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
See CONTRIBUTING.md for more details.
This project is licensed under the MIT License - see the LICENSE file for details. Feel free to use any code or techniques from this showcase in your own projects!
- Inspired by the amazing CSS community
- Built with passion and far too much tea ☕
- Special thanks to all who provided feedback and suggestions
Try the Konami Code (↑↑↓↓←→←→BA) on any page for a surprise!
Crafted with passion by Thomas Butler
GitHub • Twitter • MIT License
