Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Making Clouds using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 498
    Comment on it

    Hello, readers Today in my blog I have tried to create something different as we all see clouds in the sky , while looking over the clouds an idea to create them came in my mind and therefore I have penned it out in the blog.

     

    In my blog, I have created four clouds with a shinning sun. For creating this I need to create a div with the class name as cloud. For the other three clouds, I had named them as cloud1, cloud2, cloud3.

     

    Below is the HTMLcode for it :-

     

    <div class="cloud">
    
    </div>
    
    <div class="cloud1">
    
    </div>
    
    <div class="cloud2">
    
    </div>
    
    <div class="cloud3">
    
    </div>

    The main work of creating clouds starts in the CSS. For creating the clouds I have used CSS3 box-shadow property which contains the horizontal ,vertical and blur shadow values with the required color. I have adjusted them according to my use and had also created a shinning sun.

     

    I need to set the position to absolute , adjusted the height and the width.

    I have taken border-radius to 50% and given the background color as white of the clouds.

    For each cloud I have adjusted its position , height, width and the margin.

     

    Below is the CSS code for it :-

     

    body{
    
    background:blue;
    
    }
    
    .cloud{
    
    position: absolute;
    
    top: 10px;
    
    left:500px;
    
    margin:50px auto;
    
    background:#fff;
    
    width:90px;
    
    height:90px;
    
    border-radius:50%;
    
    box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
    
    }
    
    .cloud1{
    
    position: absolute;
    
    top: 90px;
    
    left:200px;
    
    margin:50px auto;
    
    background:#fff;
    
    width:90px;
    
    height:90px;
    
    border-radius:50%;
    
    box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
    
    }
    
    .cloud2{
    
    position: absolute;
    
    top: 50px;
    
    left:800px;
    
    margin:50px auto;
    
    background:#fff;
    
    width:90px;
    
    height:90px;
    
    border-radius:50%;
    
    box-shadow:46px 19px 0 -4px #fff,-49px 20px 0 -4px #fff,82px 34px 0 -4px #fff,68px 64px 0 -4px #fff,-80px 59px 0 -9px #fff,-64px 86px 0 -12px #fff,-7px 67px 0 -4px #fff,26px 86px 0 -9px #fff;
    
    }
    
    .cloud3{
    
    position: absolute;
    
    top: 0px;
    
    left:1200px;
    
    margin:50px auto;
    
    background:#fff;
    
    width:90px;
    
    height:90px;
    
    border-radius:50%;
    
    box-shadow:46px -21px 11px 21px yellow,-49px 20px 0 14px #fff,88px 27px 0 5px #fff,79px 71px 0 -4px #fff,-96px 45px 0 -3px #fff,-77px 85px 0 -4px #fff,-7px 67px 0 24px #fff,26px 86px 0 -9px #fff;
    
    }

    Conclusion :-

    Hence, I have created Clouds using CSS3 property which was easy to create and understand.

    Note :- The above example will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: