Tag Archives: css

Make a simple cloud in CSS3

Its a Simple Logic in CSS3, Just you can copy paste.

here you can seen HTML and CSS.


<div id = "cloud"><span class='shadow'></span></div>


body {
background: #ccc;
#cloud {
width: 350px; height: 120px;

background: #f2f9fe;
background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);

border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;

position: relative;
margin: 120px auto 20px;

#cloud:after, #cloud:before {
content: '';
position: absolute;
background: #f2f9fe;
z-index: -1

#cloud:after {
width: 100px; height: 100px;
top: -50px; left: 50px;

border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;

#cloud:before {
width: 180px; height: 180px;
top: -90px; right: 50px;

border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;

.shadow {
width: 350px;
position: absolute; bottom: -10px;
background: #000;
z-index: -1;

box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;

How to use Color in CSS?

CSS Color Property is used for defining the color of the text, background and border.

Color Value can be specified in below formats We will see these formats in more detail.These formats are explained in more detail within the following sections:

CSS Color – Hex Codes

The hex number is prefixed with a hash character (#). It is a six digit notation of a color value( #RRGGBB)
For eg. Hex code for Magenta is #FF00FF

CSS Colors – Short Hex Codes

This is a compressed version of the six-digit notation(#RGB)
For eg. Short Hex code for Magenta now becomes #F0F

CSS color – RGB Values

rgb() property is used to define RGB value. It is denoted by 3 values respectively for Red, Green and Blue. And the value is an integer between 0 to 255. 0 being the lowest and 255 is highest value. It can also be in percentage format
For eg. Magenta is written as rgb(255,0,255) and also can be denoted as rgb(100%,0%,100%)

RGB & hexadecimal values can be taken using any graphical tool like adobe photoshop, advanced paint brush or any color picker like ColorZilla.

While designing colors can be applied to elements by using properties like color, background-color and border-color.

A paragraph with red background with white text and black border could look like this:

  color: #FFFFFF;
  background-color: #FF0000;

Please note all browsers does not support rgb() property, hence it is recommended not to use it.