18 Cool Things You Won’t Believe Were Built Using CSS

Contrary to popular belief, CSS is not only used to provide basic style for a web page in order to make it look more attractive. There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML and Javascript allow web developers the opportunity to play around and experiment with different methods.

It is as if the web browser is like an empty canvas that they can play around with. Featured here are just 18 examples of the cool and creative things that people have built using CSS. From original characters to interesting animations, there’s plenty to inspire you to mess around with CSS on your own.

Recommended Reading: Create CSS 3D Shape With Ease Using Tridiv

The Simpsons

Chris Pattle created the members of the Simpsons family using only CSS. He took each character’s face, broke it up into smaller shapes then pieced them back together. He even animated the eyes to breathe some life into the characters.

Minions With Pure CSS

If you can’t get over the Minion craze (courtesy of the ‘Despicable Me‘ movies), you’ll be going bananas for this. Amr Zakaria has created Minions using pure CSS. The Minions come complete with blinking eyes and a friendly wave.

Broken neon sign

This is an amazing example of text-shadow implementation to achieve the broken neon signage effect with CSS. Mouse over to see the lights on the letters ‘c’, ‘n’ and ‘i ‘dim slightly.

Mmm… Cheese

It’s a simple block of cheese, or is it? Hugo Giraduel created this 3D cheese block using CSS. I don’t know about you but it kind of looks like a certain household item too.

Single Element CSS character

Another one of Hugo Giraudel’s work. This time, he created an 8-bit character using only one element.

Viking Shield

This is a Viking shield created by LukyVj. It’s so well done that you can hardly tell that it was formed with CSS and not with a graphics editor.

Fluid menu with transparent icon

This is a unique see-through menu with a colored slider that puts an active menu icon in color when you mouse over it. Play with the slider and be awed by how fluidly it glides across the menu.

CSS Creatures

CSS Creatures are made by @bennettfeely and can smile, laugh, or carry an emotionless expression if you like. You can play around with the teeth, moustache, color, eyes or mouths of the characters to create your very own via Twitter.

Long Cat

Resize your browser window and the cat’s body will stretch or compress accordingly with the browser window’s width. How far do you think you can stretch or squash the CSS-kitty?

Rolling coke Can

Here’s another fun one. When you scroll to the right, slowly, it looks as though you are spinning or rotating the Coke can. An awesome effect done purely with CSS.

Calculator

This calculator’s design is simple and clean but when combined with Javascript, it gives you a more fun and approachable way to take your calculations further.

Grid Animation Effect

Applying any sort of animation effect is hard enough, let alone doing it via CSS. Here, the grid animation effect is worked in beautifully.

Smooth iOS 7 toogle

This toggle button made by Dan Eden was inspired by the iOS7 toogle. If you try it out for yourself, you’ll be able to see how similiar this is to the original iOS7 toogle button.

Animated checkmark button

Sascha Michael Trinkaus made this checkmark button that’s surrounded by a gradient color. The particular effect runs when you click on the checkmark.

Minion

This is another adorable Minion done in the style of a drawing crafted from CSS.

Menu toogle SVG animation

Take a look at the animation’s demo and you will see the smooth transition of the menu shape into another shape.

Shape masking

CSSMuse used CSS to apply circle, pentagonal and hexagonal shape masking to an image. On top of that, it expands into a zoom as well.

Loaders Kit

Here, we have several loaders created using only CSS. If you’re looking to reduce the use of your bandwith, CSS-based loaders can come in quite handy.

No related posts.

18 Cool Things You Won’t Believe Were Built Using CSS