CSS Tricks : Creating Rotating globe with html5 and css3.

Css-tricks

creating a rotating globe with css3 and html5 by applying some css tricks.

css tricks can be used to make our web page more attractive, rotating globe is a small attempt to teach students about the css tricks power. css tricks tutorial are available in a very few numbers online so we have tried to make you understand by how a small css tricks can make your webpage attractive.
css tricks: tricks which we will apply in css.
In this tutorial. We will learn about applying css tricks and make a rotating globe by simply using html5 and css3.

As the name suggests we will create a globe using css tricks. After the use of css3 (extended version of css), we can do many sorts of activity like creating effective effect like 2D/3D, we can  create animations, transforms effects etc.

Applying CSS tricks can give a new life to our css coding, we can make possible many things as in this tutorial by applying a simple css trick, we have made a rotating globe.
CLICK for live demo
 

What we need for this rotating globe?

knowledge of css (css tricks).

We need knowledge to these topics.

  • html5
  • css
  • css3 animation effects.

If you don’t have many ideas you can visit any of the website which provide you these tutorials (Read about css tricks). Below we have listed a few of them.

 

So let’s start creating a rotating globe using css tricks.

 

First, start with a basic html5 layout than we will use css than apply tricks (basic css tricks) so here is the code.

<!doctype html>

<html>

<head>

<style>

 

</style>

</head>

<body>

<div class=”full-width”>

<div class=”Main-Container”>

<div id=”earth”></div>

</div>

</div>

</body>

</html>

Now we will apply a background image in the given ID earth. Here is the image

 

Css-tricks-earth-image

 

Now some style ( css tricks)

<style>

*{

margin:0;

padding:0;

}

body {

background-color: #000;

width:100%;

}

 

.full-width{width:1000px; margin:auto; top 200px;}

.Main-Container{ width:100%; height: auto; margin: auto; float:left; position:relative; padding-bottom:50px; padding-top:15%; }

#earth {

position: relative;

<!– top:20%;

left:25%; –>

margin:auto;

width: 300px;

height: 300px;

background: url(images/earth.jpg);

border-radius: 50%;

background-size: 600px;}

 

</style>

by applying thes styles, we get this look for our page.

css-tricks-rotate

Now, after that we will apply some shadow effect to this globe so that it gives a globe like effect, this is what comes under css tricks, it is what we are using so that it give a real look to the globe.

 

now the style becomes.

<style>

*{

margin:0;

padding:0;

}

body {

background-color: #000;

width:100%;

}

 

.full-width{width:1000px; margin:auto; top 200px;}

.Main-Container{ width:100%; height: auto; margin: auto; float:left; position:relative; padding-bottom:50px; padding-top:15%; }

#earth {

position: relative;

<!– top:20%;

left:25%; –>

margin:auto;

width: 300px;

height: 300px;

background: url(images/earth.jpg);

border-radius: 50%;

background-size: 600px;}

-webkit-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),                 inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);

-moz-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),           inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);

-ms-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),             inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);

-0-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),                inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);

box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0),          inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);

</style>

 

And we get this by this new css tricks.

css-tricks-html5-tutorials

Now we will apply prefix to the box shadow as it is supported by all major browsers, so we need to apply the prefixes as such :

-Moz-: for Mozilla Firefox browser-ms- : IE9+-webkit- for chrome and safari

-o- for opera .

now, again we will use some css tricks so that it look alive and give a rotating globe effect.

 

lets apply some css3 animations to it.

now our code in the stylesheet becomes as given below

*{
margin:0;
padding:0;
}
body {
background-color: #000;background: url(images/space_bg.gif);
width:100%;
}.full-width{width:1000px; margin:auto; top 200px;}
.Main-Container{ width:100%; height: auto; margin: auto; float:left; position:relative; padding-bottom:50px; padding-top:15%; }
#earth {
position: relative;
<!– top:20%;
left:25%; –>
margin:auto;
width: 300px;
height: 300px;
background: url(images/earth.jpg);
border-radius: 50%;
background-size: 600px;
-webkit-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-ms-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-0-box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-0-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
background-position: 10%;

}

@-webkit-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 600px; }
}
@-moz-keyframes rotate {
from { background-position: (0px 0px); }
to { background-position: (600px 0px); }
}
@-ms-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 600px; }
}
@-o-keyframes rotate {
from { background-position-x: 0px; }
to { background-position-x: 600px; }
}
@keyframes rotate {
from { background-position: 0px 0px; }
to { background-position: 600px 0px; }
}

Now css tricks part
What we are doing here is moving the image in a manner so that it just looks like rotating (this is css tricks). now  adding these animations, we get this as our rotating globe. also we added some twinkling star to our webpage to make it more attractive.

which just give a beautiful and attractive look, here our rotating globe is ready with some basic css tricks added in our stylesheet.

rotating-globe-tutorials

You can check out the demo here (css tricks example)

CLICK for live demo

You Might Also Like

20 Comments

  1. 2
  2. 3

    I liked your blog, i am basically a blogger and use to do blog, the information you shared will help me provide a good knowledge. Thanks for sharing.

  3. 6

    Excellent post. I was checking constantly this blog and I am impressed! Very helpful info particularly the closing phase 🙂 I deal with such info much. I was seeking this certain information for a very lengthy time. Thank you and best of luck.

  4. 7
  5. 8
  6. 9

    I have read some just right stuff here. Definitely worth bookmarking for revisiting. I surprise how a lot effort you put to make such a great informative web site.

  7. 10
  8. 11
  9. 12
  10. 13

    I simply want to mention I am just very new to blogging and seriously enjoyed your website. Most likely I’m going to bookmark your blog . You really have impressive article content. Regards for sharing your website.

  11. 14
  12. 15
  13. 16

    great publish, very informative. I wonder why the other experts of this sector don’t
    realize this. You must continue your writing. I am sure, you have a huge readers’ base already!

  14. 17
  15. 18

    Hello there, You have done a fantastic job. I will certainly digg
    it and personally recommend to my friends. I’m confident they’ll be benefited from this website.

  16. 19
  17. Pingback: online

Comments are closed.