Make a simple cloud in CSS3

View code Play Walkthrough

Description

Soothing clouds made purely in CSS3. The whole cloud shape is formed using just one tag and is created with the help of :after and :before pseudo classes. The base of the cloud has given a very subtle gradient to give it a soothing look.

Add New Comment

11 Comments

(close)
Ahmad Alfy

Ahmad Alfy

Interesting, I really love it :) Just a small notice…
Best practice recommend that you place your rules with the -vendor-prefix before the real rule (border radius, shadows, background … etc)

andrew wooldridge

andrew wooldridge

Nice! Learned some things not only about the cloud but how to order what I show in my own demos first.

Hassan Moaiery

Hassan Moaiery

very nice , i want use this post to my personal website …
thanks <3

sureshsavage

sureshsavage

Does this … work in the IE9 (Internet Explorer)… i am having trouble in viewing it work….

Joanne Owens

Joanne Owens

what can the *average* geek-like person do with these codes if they don’t have a website…anything?

Deepak

Deepak

Hi,

really excellent practice but one think Please stop watch coding html and css js doing practice not complied.

thanks

Joe

Joe

Interesting,thx

Dan

Dan

Bravo! Simple but cool!

Andrey

Andrey

Hey, is there a way to make a border around without the border inside?

srujan raghavendra

srujan raghavendra

I am stunned to watch all this stuff. thank you for taking to new possibilities in css

5x 10x 15x 20x

11 Comments

Description