Animated Loading Effect, Hexagon Shape

Found another cool animated loading effect in hexagon shape.

Lets try it.

Read More

CSS3 cool animation for "Loading..." interface

Now a days we all uses HTML5 and CSS3 for any website.
So why use "loading..." image when CSS3 provides us many possibilities for the same.

Here is an example:

Here is the HTML Part :

<div class="loading-container">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored">
                            </div>
                            <div class="rotator">
                            </div>
                        </div>
                        <div class="rotator colored">
                        </div>
                    </div>
                    <div class="rotator">
                    </div>
                </div>
                <div class="rotator">
                </div>
            </div>
            <div class="rotator">
            </div>
        </div>
        <div class="rotator">
        </div>
    </div>
</div>

Here is the CSS3 part :

.loading-container{z-index:2000;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55)}
.loading-container.loading-inactive{display:none}
.loading-container.loading-inactive .loading-progress{display:none}
.loading-container .loading-progress{z-index:2000;position:fixed;height:10px;width:10px;margin:auto;top:0;left:0;right:0;bottom:0}
.loading-container .loading-progress .rotator{-webkit-animation:spin 30s infinite linear;-moz-animation:spin 30s infinite linear;-o-animation:spin 30s infinite linear;animation:spin 30s infinite linear}
.loading-container .loading-progress>.rotator{left:-100px}
.loading-container .rotator{-webkit-background-origin:border-box;-moz-background-origin:border-box;background-origin:border-box;background-color:#fff;width:200px;height:7px;opacity:.75;position:absolute;top:0;left:0}
.loading-container .colored{background-color:#2dc3e8!important}
        
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}
@-o-keyframes spin{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

Click here to download GitHub to see the example.

Read More

Animated Recycle with Open Close Style using CSS3

CSS3 has some awesome techniques, let have do some form using transition property.

Have a look

Mouse hover on Recile Bin

Another example in table format mouse hover on last bin icon to see the cool animated effect

Language Name	How to say hello	Delete
Assamese	নমস্কাৰ (nomoskaar)
Bengali	নমস্কার (nômoshkar)
Gujarati	નમસ્તે (namaste)
Hindi	नमस्ते (namaste) नमस्कार (namaskār)
Kannada	ನಮಸ್ತೆ (namaste)
Malayalam	നമസ്തെ (namaste)
Oriya	ନମସ୍କର (namascara)
Punjabi	ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ। / ست سِری اَکال (sat srī akāl)
Tamil	வணக்கம் (vaṇakkam)

How it works:

Basically there are 3 div tag, A parent div tag will hold 2 child div.

1. Parent div for trash holder
2. Can div
3. Lid div

See the below to check with with border style, you can get more idea by this

So lets create CSS3 to get the animated recile bin icon.
See the Below Code :

<div class="trash" title="Remove"><span class="lid"></span><span class="can"></span></div>

You can see that there is a div tag with "trash", and two child div tag one with has "lid" class and second has "can" class
Now apply below CSS3 code to make it animated

.trash{transition:opacity 200ms;width:128px;height:128px;opacity:0.8;position:relative;right:0;top:3px;vertical-align:middle;cursor:pointer;margin:50px auto 10px}  
 .trash > .lid{transform-origin:19% 100%;transition:transform 150ms;height:28px;width:128px;-webkit-transform-origin:-7% 100%}  
 .trash > .can{background-position:0 -30px!important;width:128px;height:97px;margin:30px 0 0;padding:0!important}  
 .trash > .can,.trash > .lid{background:url(img/RecycleBin.png) 0 0 no-repeat;position:absolute;right:8px;top:2px;-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 250ms}  
 .trash > .can:hover{border:none!important;box-shadow:none!important}  
 .trash > span{display:inline-block}  
 .trash:focus > .lid,.trash:hover > .lid{transform:rotate(-45deg);transition:transform 250ms;-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 250ms}  

I have tested with Chrome, Firefox, Internet Explorer 11

Click here to download source file from GitHub.

enjoy!
saAction

Read More

How to use @font-face in CSS3?

I have already posted before about sIFR technology but now its time to use CSS3. No more requirement for SIFR.

Now in web technology CSS3 is a have many exciting new functions and features available.
And almost @font-face font comes with :

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT (OpenType) fonts for Internet Explorer 4+
• WOFF (Web Open Font Format) fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+

@font-face is able to download Font typography in client's browser from the server its "Web Embedding Fonts". and its extance will be EOT that means OpenType for Internet Explorer's embedded font support. All other browser support embedded font via "TTF" TrueType file format.

Here is the syntax to embedded font in CSS3

@font-face
{ 
   /*Give a tempeorary Name*/
    font-family: "MyFontName";

   /* Below line is for IE Only */ 
    src: url( /location_of_font_Folder/FontFileName.eot );

    /* Below line is for other browser (non-IE) */ 
    src: local("Correct Font Name in Real File"), url( /location_of_font_Folder/FontFileName.ttf ) format("truetype");
} 
/* Now we can us that Font name jsut linke any other font name */ 
.customTitle { font-family:"MyFontName", verdana, helvetica, sans-serif; }

And in HTML it will same as existing code…

<p class="customTitle">Welcome CSS3</p>

This is very easy think, just remember that you have to write down IE syntax first in @font-face style. and you need to convert TTF to EOT for IE support. here are some online tool which are doing this.

• http://www.fontsquirrel.com/fontface Download hundreds of EOT, WOFF fonts.
• TTF to EOT Font converter
• Web Embedding Fonts Tool (WEFT)

This is very easy to cool. isn’t it.

Read More