Showing posts with label CSS3. Show all posts
Showing posts with label CSS3. Show all posts

Wednesday, 30 October 2013

Make CSS3 Creatures

Something really amazing with css3 is one of here. You can see below.

 



So here you go for Html page code
 
Style for it

For reference link
http://bennettfeely.com/csscreatures/
Posted by at 1 comment:
Labels:

Thursday, 11 July 2013

Css3 Image Loader

Such Amazing CSS3 loader

Its  pure css based loader. Here is the code for it.



Here is html code

<div id="pbOverlay" class="thumbs hasArrows hasCounter hasAutoplay show on prev pbLoading">
        <div class="pbLoader">
            <b></b><b></b><b></b>
        </div>
    </div>


Here is Style (css) code

 <style type="text/css">
      /* PICBOX */
#pbOverlay.show{ opacity:1; pointer-events:auto; }
#pbOverlay{
    opacity:0; overflow:hidden; width:100%; height:100%; position:fixed; z-index:9999; left:0; top:0; text-align:center; pointer-events:none;
    -moz-user-select:none;
    background:rgba(0,0,0,0.85);
    background:radial-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%);
    -webkit-transform:translate3d(0px, 0px, 0px);
    -webkit-transition:opacity 300ms ease;
    -ms-transition:opacity 300ms ease;
    transition:opacity 300ms ease;
}
#pbOverlay.msie{ background-color:rgba(0,0,0,.6); }
#pbOverlay.msie.pbLoading .wrapper{ background:url('../images/loading.gif') no-repeat center center; }

@keyframes pbLoaderFrames{ 50%{ height:5px; } }
@-webkit-keyframes pbLoaderFrames{ 50%{ height:5px; } }

#pbOverlay .pbLoader{ visibility:hidden; opacity:0; pointer-events:none; -webkit-transform:scale(.2); transform:scale(.2); position:absolute; z-index:999; top:50%; left:50%; margin:-50px 0 0 -50px; text-align:center; border-radius:100%; box-shadow:15px 32px 60px -20px #FFF inset, 1px 1px 3px 1px #FFF inset, 0 0 20px; width:100px; height:100px; transition:0.3s; -webkit-transition:0.2s; }
#pbOverlay.thumbs .pbLoader{ margin-top:-100px; }
#pbOverlay.pbLoading:not(.msie):not(.error) .pbLoader{ visibility:visible; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
    #pbOverlay .pbLoader b{ display:inline-block; vertical-align:middle; margin:0 2px; width:8px; height:60px; border-radius:5px; background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-animation:.9s pbLoaderFrames infinite linear; animation:.9s pbLoaderFrames infinite linear; }
    #pbOverlay .pbLoader b:nth-child(2){ -webkit-animation-delay:.3s; animation-delay:.3s; }
    #pbOverlay .pbLoader b:nth-child(3){ -webkit-animation-delay:.6s; animation-delay:.6s; }
#pbOverlay .pbLoader:before{ content:""; display:inline-block; height:100%; margin-right:-0.25em; vertical-align:middle; }

    </style>
Posted by at 3 comments:
Labels:

Friday, 19 April 2013

CREATING FANCY CSS3 FADE IN ANIMATIONS ON PAGE LOAD


WHAT WE WILL DO

We will create 3 boxes and they will fade in one after another. Here are our steps to accomplish this: Create a div in our html that we want to animate Create keyframes in our css file (these basically will define how things change ) Create div tag in our css, define our animation (duration, start delay etc) and link it to our keyframes So let’s get started
This CSS3 code will only work on Firefox, Chrome, Safari and maybe newer versions of IE (after version 9)
Ok let’s make some basic boxes 

 


       look at me fade in




       Oh hi! i can fade too!




       Oh hi! i can fade three!
Ok so the above basically makes 3 boxes, we named them box , the fade-in is going to be our animation class and the number after is just there so we can have them load in an order we want. And now for the magic code. 
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
 
/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
 
}

See demo 

 http://graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/
Posted by at 1 comment:
Labels:
Subscribe to: Posts (Atom)