CSS Atoms | CSS3 Tutorials, Tips, and Articles » Positioning http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 All You Want to Know About CSS Static Positioning http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/ http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/#comments Mon, 02 May 2011 10:02:58 +0000 http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/ CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, […]

The post All You Want to Know About CSS Static Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Static Positioning. All the elements by default are Static Positioned. When an element is static, it ignores any placement declarations. By default, Static Positioning place elements relative to the sides of the page.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>

<div class="header">
<!-- end .header --></div>

<div class="container">

<div class="content">

<!-- end .content --></div>

<!-- end .container --></div>

<div class="footer">
<!-- end .footer --></div>

</body>

</html>

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

STEP TWO:

Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.

<div class="content">
    
    <div id="CheckMark">
    <img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>

    <!-- end .content --></div>

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

STEP THREE:

Notice that our image was directly positioned at the left side of our page (traditional layout).
We don’t need a CSS rule to specify Static Positioning. If we add top, bottom, left, right declarations, they will be ignored.

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image is right where we put it. If we don’t change its position to Absolute, Fixed, or Relative, the element is not going to move. Therefore, it will be always positioned according to the layout of the page.

STEP FIVE:

To conclude, let’s learn some facts about Static Positioning:

  • There is no need to declare Static Positioning.
  • Static Positioning is the default behavior for any element.
  • Unless you apply an Absolute, Fixed, or Relative declaration, elements will appear in the order they occur in the HTML markup.
  • It avoids top, bottom, left, right placement declarations.

That’s all! You learned how Static Positioning is initially declared.

Download Source Files

The post All You Want to Know About CSS Static Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/all-you-want-to-know-about-css-static-positioning/feed/ 0
All You Want to Know About CSS Relative Positioning http://cssatoms.com/basic/all-you-want-to-know-about-css-relative-positioning/ http://cssatoms.com/basic/all-you-want-to-know-about-css-relative-positioning/#comments Fri, 29 Apr 2011 10:02:25 +0000 http://cssatoms.com/basic/all-you-want-to-know-about-css-relative-positioning/ CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, […]

The post All You Want to Know About CSS Relative Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Relative Positioning. Thanks to CSS Relative Positioning we can generally place elements anywhere in the page and leave empty the space where they were positioned at first.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>

<div class="header">
<!-- end .header --></div>

<div class="container">

<div class="content">

<!-- end .content --></div>

<!-- end .container --></div>

<div class="footer">
<!-- end .footer --></div>

</body>

</html>

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

 

STEP TWO:

Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.

<div class="content">
<!-- end .content --></div>

<div id="CheckMark">
    <img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

STEP THREE:

Our image will appear at the left side of our page. Let’s offset our element to the middle of our container.
The first thing we need to do is to create a New CSS Rule to specify the position of our <div>.

#CheckMark {
}

Then, we are going to add some properties for our CheckMark <div>.

#CheckMark {

	position: relative;

	left: 200px;

	top: 50px;
}

The first thing we did was to set the Position Property to Relative. The check mark image moves, but since it is no longer part of the container the rest of the page stays underneath. Next, we set left and top properties. Keep in mind the offset is from the position where was originally placed. Here we are specifying that the image must be displayed 200 pixels from the left and 50 pixel from the top; starting where the div was placed in our page (Inside the content <div>).

 

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image moved to overlap the content, but its original space is reserved. Just before the image is displayed the browser offset its position to the one we specified.

STEP FIVE:

To conclude, let’s learn some facts about Relative Positioning:

  • Keeps elements inside any container.
  • Allows elements to have their own space reserved.
  • The offset is from the position where it is placed in the page. (In this case under the content <div>.
  • Browsers place a Relative Positioned element in any position we specify. Use top, or bottom, and left or right. Keep in mind the element will move relative to where it was originally placed.
  • The <div> where we placed our image is going to occupy its original space.
  • A Relative Positioned element can overlap other elements.

That’s all! You learned how to use Relative Positioning to move an element out of its container without moving the entire page’s elements out of their place.

Download Source Files

The post All You Want to Know About CSS Relative Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/all-you-want-to-know-about-css-relative-positioning/feed/ 0
All You Want to Know About CSS Fixed Positioning http://cssatoms.com/basic/all-you-want-to-know-about-css-fixed-positioning/ http://cssatoms.com/basic/all-you-want-to-know-about-css-fixed-positioning/#comments Thu, 28 Apr 2011 10:02:32 +0000 http://cssatoms.com/basic/all-you-want-to-know-about-css-fixed-positioning/ CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, […]

The post All You Want to Know About CSS Fixed Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Fixed Positioning. Thanks to CSS Fixed Positioning we can make an element stay right where we put it. The element is not going to move, even if we scroll the page.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
  <div class="header">
    <!-- end .header --></div>
 
<div class="container">
 
  <div class="content">
    <!-- end .content --></div>
 
<!-- end .container --></div>
 
<div class="footer">
    <!-- end .footer --></div>
 
</body>
</html>

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

STEP TWO:

Let’s add an image into the body of our HTML. Under our header <div> create a <div id> for it.

<div class="header">
<!-- end .header --></div>

<div id="CheckMark">
    <img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
<!-- end #CheckMark --></div>

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

 

STEP THREE:

Our image will appear at the left side of our page. Let’s make our image stay at the middle of the page forever! Beware this technique makes any user unhappy.
The first thing we need to do is to create a New CSS Rule to specify the position of our <div>.

#CheckMark {
}

Then, we are going to add some properties for our CheckMark <div>.

#CheckMark {

	position: fixed;

	top: 300px;

	left: 400px;
}


The first thing we did was to set the Position Property to Fixed. Next, we set left and top properties.

 

Debug in your favorite browser the HTML page. You’ll see your image appear right where we positioned it. Resize or scroll the window the image wouldn’t move!
This can be annoying, right? Think about how this property can be useful: Ads, coupons, promotions, etc.; great methods to make the user unhappy.

STEP FIVE:

To conclude, let’s learn some facts about Fixed Positioning:

  • Make sure to create a <div> first. You can Fixed Positioned any inline or block elements, but it isn’t that common.
  • For Fixed Positioning we need to specify the position of the element. Left, Top, Right, or Bottom.
  • The position is going to offset from the browser’s window.
  • Fixed Position elements don’t move.
  • Internet Explorer 6 and earlier versions doesn’t support Fixed Positioning.

That’s all! You learned how to use Fixed Positioning to make an image stay right where we put it. Remember, the element is not going to move, even if we scroll the page.

Download Source Files

The post All You Want to Know About CSS Fixed Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/all-you-want-to-know-about-css-fixed-positioning/feed/ 0
All You Want to Know About CSS Absolute Positioning http://cssatoms.com/basic/all-you-want-to-know-about-css-absolute-positioning/ http://cssatoms.com/basic/all-you-want-to-know-about-css-absolute-positioning/#comments Wed, 27 Apr 2011 10:04:34 +0000 http://cssatoms.com/basic/all-you-want-to-know-about-css-absolute-positioning/ CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, […]

The post All You Want to Know About CSS Absolute Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS Position Property is the method that web designers use when they want to place any element on their page. This property has four different types of positioning: Absolute, Fixed, Relative, and Static. In this tutorial we are going to learn all about Absolute Positioning. Thanks to CSS Absolute Positioning we can remove an element from the entire page layout and place it exactly where we want it to go.

The other three types of positioning will be explained on other tutorials.

NOTE: This tutorial was completed using XHTML 1.0 Transitional with CSS. It is assumed you have basic knowledge of HTML and CSS principles.

STEP ONE:

I created a XHTML document with different <div>s tags: One for the header, one for a container that includes a <div> for the content, and one for the footer.

Let’s have a look at the initial HTML setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
  <div class="header">
    <!-- end .header --></div>
 
<div class="container">
 
  <div class="content">
    <!-- end .content --></div>
 
<!-- end .container --></div>
 
<div class="footer">
    <!-- end .footer --></div>
 
</body>
</html>

Also, I added a Cascading Styling Sheet to it. Download the source files to obtain the entire code for this tutorial.

 

STEP TWO:

Let’s add an image into our content <div>. Wait! We don’t want our image to be part of the content. Easy! Let’s create a <div> for it.

<div class="content">
   
  <div id="CheckMark">
    <img src="images/CheckMark.gif" width="39" height="36" alt="Check Mark" />
  <!-- end #CheckMark --></div>
    
<!-- end .content --></div>

Why a <div>?  A <div > outlines a separation in an HTML page. It also makes the process of styling elements with CSS easier.

 

STEP THREE:

Our image will appear at the left side of our content container. Let’s move it to the middle of our page using Absolute Positioning.
The first thing we need to do is to create a New CSS Rule to specify the position of our <div>.

#CheckMark {
}


Then, we are going to add some properties for our CheckMark <div>.

#CheckMark {
 
            position: absolute;
 
            left: 500px;
 
            top: 300px;
 
            width: 39px;
 
}

The first thing we did was to set the Position Property to Absolute. Next, we set left and top properties, and finally the state the width of our image.

 

STEP FOUR:

Debug in your favorite browser the HTML page. You’ll see your image appear right where we wanted it.
Notice how our image is removed from the entire flow and positioned according to the properties we specified. It’s like the other elements were ignoring our CheckMark <div>.

STEP FIVE:

To conclude, let’s learn some facts about Absolute Positioning:

  • Make sure to create a <div> first. You can Absolutely Positioned any inline or block elements, but it isn’t that common.
  • Allows to precisely position elements.
  • Browsers place an Absolute Positioned element in any position we specify. Top and right, top and left, bottom and left, bottom and right.
  • Absolute Positioned elements does not affect whatsoever other elements.
  • We need to specify the width of our image or box. If not width is specified the element or box will take up the entire width of the browser.
  • Keep in mind that the position of our element is going to be relative to the closest ancestor element. In this case, the content <div>.
  • Absolutely Positioned elements can be layered on top of each other. Just use the z-index property to specify their placement.

That’s all! You learned how to use Absolute Positioning to place an element anywhere on the page without affecting other elements.

Download Source Files

The post All You Want to Know About CSS Absolute Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/all-you-want-to-know-about-css-absolute-positioning/feed/ 0
Fundamentals of CSS Positioning http://cssatoms.com/basic/fundamentals-of-css-positioning/ http://cssatoms.com/basic/fundamentals-of-css-positioning/#comments Wed, 30 Mar 2011 19:45:07 +0000 http://cssatoms.com/basic/fundamentals-of-css-positioning/ CSS positioning properties allow you to determine where on your page certain elements will appear. Elements can be positioned using the top, right, bottom and left properties, however to set […]

The post Fundamentals of CSS Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
CSS positioning properties allow you to determine where on your page certain elements will appear. Elements can be positioned using the top, right, bottom and left properties, however to set these properties the elements position property needs to be set first. Let’s dive in and see what position properties are available to us.

PART ONE:

Static Positioning
Static positioning is the default positioning for all elements. A statically positioned element is always positioned according to the normal flow of the document. Even if you never declare the position of an element, it’s static. That’s truly all there is to know about static positioning.

PART TWO:
Fixed Positioning
An element with fixed positioning is positioned relative to the browser window. An element with fixed positioning will not move even if the window is scrolled. Let’s have a look at an example. The HTML page will contain 3 div elements, each with a class that will correspond to the type of positioning we will apply. In our CSS file, we’ll specify that the element needs to have fixed positioning. First, here’s what the HTML file looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="fixed">
</div>
 
</body>

Next, to make our fixed div more visible, we’ll add a bit of CSS. Let’s add some height and width, a background color, and the fixed positioning to our element. Here’s what the CSS looks like:

.fixed {
	background-color: #06C;
	height: 200px;
	width: 200px;
	position: fixed;
}

Now, when we view this div in the browser, no matter how hard we try and scroll away from it, it will remain positioned in the top left corner. This is the default location, but we could use top, right, bottom, and left properties to move the element wherever we’d like to. Fixed positioning is used often for top menu bars or ads that need to remain in view no matter where a user is on a page.

Fixed Position

PART THREE:

Relative Positioning
Relative positioning refers to positioning an element relative to its normal flow in the document. This is a good way to position elements; however you have to be aware that the space the element was occupying generally is still there as space. So, let’s say you had an element that was causing your page to have a scrollbar because it’s too far down in the window. If you position it relatively and move it up, you’ll still see the scrollbar as if the element was still there. However, it does come in handy when elements need a small shove in the right direction. Here’s how you use relative positioning:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Relative Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="relative">
</div>
 
</body>
</html>

body {
	border: thin dashed #999;
	margin: 100px;
}
 
.relative {
	background-color: #06C;
	height: 200px;
	width: 200px;
	position: relative;
}

Ralative Position

PART FOUR:

Absolute Positioning
Absolute positioning takes an element out of the normal flow, and puts it into the position you specify. It will always (absolutely) be the specified distance away from the side that you declare. So for instance, right: 200px would always ensure that an element was 200 pixels away from the right side of the browser window if its position was defined as absolute. Try changing the previous example to absolute and see what happens!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="absolute">
</div>
 
</body>
</html>

body {
	border: thin dashed #999;
	margin: 100px;
}
 
.absolute {
	background-color: #06C;
	height: 200px;
	width: 200px;
	position: absolute;
}

Absolute Position

Positioning is a fundamental part of CSS, and learning to use these positions properly will greatly enhance your ability to create page layouts. Join us in our next tutorial when we’ll talk about ID’s versus classes and how to use them properly. Until next time!

Download Source Files

The post Fundamentals of CSS Positioning appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/fundamentals-of-css-positioning/feed/ 1
Creating a Parallax Effect in CSS3 http://cssatoms.com/basic/creating-a-parallax-effect-in-css3-2/ http://cssatoms.com/basic/creating-a-parallax-effect-in-css3-2/#comments Wed, 30 Mar 2011 19:42:58 +0000 http://cssatoms.com/basic/creating-a-parallax-effect-in-css3-2/ A Brief Introduction In the ancient video game days, although you may have assumed you were actually moving a character around, you probably weren’t. Games like Sonic the Hedgehog and […]

The post Creating a Parallax Effect in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
A Brief Introduction

In the ancient video game days, although you may have assumed you were actually moving a character around, you probably weren’t. Games like Sonic the Hedgehog and Mario World used a technique known as parallax scrolling. This is a method used to achieve a “movement” effect, when really all that is happening is the background is scrolling from right to left. Today, we’ll see how to achieve a similar effect using some clever positioning and some CSS3 transitions.

Step 1: The HTML

The HTML setup is extremely simple. It will consist of a wrapper, and a few divs to hold the different elements on our page. Our example today will be a pretty easy one. We’ll create the effect of a stick figure “flying” through the air. We’ll need 2 divs for the 2 sets of clouds in our scene, as well as a div to hold the stick figure. The HTML page should be setup like so:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Parallax Example </title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="clouds"></div>
    <div class="clouds2"></div>
    <div id="guy"></div>
</body>
</html>

Actually, that’s all the HTML that will be required in this project, as all of the real magic happens in the CSS file. Let’s take a look at that now:

body 
{
    background-color: #a3e6fa;
}
#clouds
{
     background:url("clouds.png");
     background-position: 0px 0px;
     background-repeat: repeat-x;
     height: 300px;
     position: absolute;
      -webkit-transition: all 6s linear;
     width: 98%;    
}
.clouds2
{
    background:url("clouds2.png");
    background-repeat: repeat-x;
    height: 300px;
    position: absolute;
    top: 25px;
    left: -30px;
    -webkit-transition: all 6s linear;
    width: 98%;
    z-index: -1;
}
#guy
{
    background:url("flying-guy.png");
    bottom: 10px;
    height: 300px;
    position: absolute;
    -webkit-transition: all 6s linear;
    width: 200px;    
}
#guy:hover
{
    border: 1px dashed;
    -webkit-transform: translate(600px,-600px) rotate(90deg);  
}
body:hover #clouds
{
    -webkit-transform:translate(-150px);    
}

Ok, there’s a lot going on here so I’ll be breaking each declaration down for you step by step. Let’s start with the first one, the body declaration. The only thing we’ve done to the body is added a nice, sky-blue background color to set off our scene nicely.
The next declaration is the #clouds declaration. The first thing we’ve done is set the background image to our clouds.png file. We then positioned the clouds at the top-left corner of the div using the background-position property. Next, we make sure that the background repeats using the background-repeat property. We then added a height definition to get some dimensional constraint. Then, we set the position to absolute to allow for positioning within the #cloud div and added a 6 second linear transition to the clouds.
Moving down the line we come to our .clouds2 class. This class of clouds sits behind the #clouds div, and is positioned slightly lower. The main difference in this declaration is that we’ve given it a z-index property of -1. Remember I said it sits behind the #cloud div? Well, z-index is how we make that happen. The #cloud div has a default z-index of 0, and the lower the z-index the “further back” into a page an element will fall. This will allow our main clouds to overlap our other ones. 
Next up is the #guy div. There’s not much going on at all here, but we’ve given the div a background image, positioned it absolutely near the bottom, and added a 6 second linear transition to him. We added the width and height, again, just to have some dimensional constraints.
The next two declarations are the most important ones, and we’ll take a look at them again to reinforce that. Here they are:

#guy:hover
{
    border: 1px dashed;
    -webkit-transform: translate(600px,-600px) rotate(90deg);  
}
body:hover #clouds
{
    -webkit-transform:translate(-150px);    
}

The first one is the #guy:hover declaration. The code here calls a transformation of the “guy” when we hover over him. The first transformation value is translate. Translate takes the position of an element, and moves it to the x and y location that you pass into it. In our case, we’re moving the guy on the x-axis 600 pixels, and taking away 600 pixels from the y value. This will cause him to “fly” to the right of the screen and up. We also passed in a rotation of 90 degrees as well so our guy will lay horizontally when he’s “flying”.
Last but not least is the body:hover #clouds declaration. What we have here is yet another transform translate property. This moves the clouds from the left to the right by 150 pixels when we hover over the body of the clouds. Now, when you load the page in the browser and hover over the guy, you’ll see quite the awesome effect. Although it appears that the guy is flying, he’s not. The clouds are moving behind him, giving the effect of flying. Congratulations! You’ve created your first (super simple) parallax effect in CSS3.

A Few Last Words

This tutorial has been brought to you in full effect by the marvelous CSS3. Any attempt to recreate this effect in other technologies is futile and unnecessary. No, not really. But using CSS can really speed up your site if you’re doing a similar thing in JavaScript or Flash. Keeping things compact and simple is what CSS3 is all about when it comes to the likes of animations and things. Join us next time for another awesome CSS3 project. See you then!

Download Source Files

The post Creating a Parallax Effect in CSS3 appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/creating-a-parallax-effect-in-css3-2/feed/ 0