Amazing CSS Demos
Last updated on January 9, 2013 in Development
Since my previous post covered some cool JavaScript visualizations, I also wanted to talk about some amazing CSS demos. I am focusing on CSS only, especially CSS3, where you really have the power to create interesting experiments and animations. Just take a look at these CSS shadow experiments or how about some CSS patterns? Simurai also has some awesome CSS experiments. Below you will find a list of some amazing pure CSS demos:
- Shapes created with CSS
- CSS Blur and Skew
- Circular Menu Tooltip with pure CSS
- iPhone 4 in pure CSS3
- Stopwatch with just CSS
- Rising Sun in CSS
- CSS3 Loading Bars
- CSS only Movement Control
- Gaussian Blur and CSS3/SVG
- CSS3 3D Transform
- Animated Loading Bar in CSS
- Text effects with CSS
- CSS3 Dropdown Menu
- Feature Table in CSS
- awesome text effect!
- star wars scrolling text effect with only css
- Pie Chart Spinner
- CSSDrop Shadows
- CSS Glow Tabs with drop-shadow
- CSS 3D text effects
- CSS Angled Split Images
- Multiple CSS Background Images
- CSS3 Social Sign In Buttons
- Progress Bars in CSS
- CSS Icons via Fonts
- Amazing CSS only Charts
- CSS Ribbon Menu
- Move in a circle with CSS
- Multi-direction Hover Detection in pure CSS
- Solar System in CSS3
- More CSS3 transforms
- Creating CSS3 Image Ribbon Tags
- Pure CSS Clickable Events Without :target
- CSS Arrow Generator
- CSS Flip Effect
- More box-shadow examples
- Flexbox example
- CSS filter playground
- CSS only slider
- Pure CSS 3D graph
- Drawing with CSS box shadow
- Pure CSS under construction animation
- Animated 3D Bar Chart
- CSS Thumbnail Navigation
- CSS Navigation Gallery
- CSS Collapsing Site Navigation
- Background Image Navigation
- CSS 3D hover effects
- Animated Buttons with CSS3
- Typography Effects with CSS3
- Menu Effect with CSS
- Sliding Image Panels with CSS
- CSS only on and off buttons
- CSS3 and Fonts, examples from TypeKit
- Drawing shapes with CSS
- Cross Browser Rounded Corner Solution with only CSS3
- Position, zindex, and background fixed example
- Awesome UI Form Elements CSS Example
- CSS3 Globe Animation Demo
- CSS3 Geometry Demos and Code
- Rotating iPhone with pure CSS
Related Links:
38 Inspiring CSS3 Animation Demos
Smooth Scroll to Top Using CSS3 Animations
Sass CSS Spinner
Scriptless slideshow
Peel me CSS Example
Hyperspace animation with CSS3 transformations
CSS Balls