---

AnimationNotes1

This first animation is changing colors every 5 seconds. This is all with CSS but for this to work in CSS we must use the myfirst feature witch is explained in the code box below.

view code

     

<div id="animation_notes1"> </div>

Once you have successfully put in your code for your HTML document your site should look similar to the screenshot below.

     

/* This is the CSS3 rule without prefix. The name of this animation is myfirst. 
The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
*/
@keyframes myfirst 
{
	/*keyword 'from' same as 0% */
from {background: red;}
	/*keyword 'to' same as 100% */
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
} 

Once you have successfully put in your code for your HTML document your site should look similar to the screenshot below.

     

#animation_notes1{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

---

AnimationNotes2

It is now time to work on our CSS since he have completed our HTML. The first thing we are going to do is center our information. In order for us to do this we need to give our div with the ID of container some CSS properties as you see below in the code box.

view code

     

<div id="animation_notes2"> </div>

Once you have successfully put in your code for your HTML document your site should look similar to the screenshot below.

     

#animation_notes2{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;  /* Calls myfirst animation name with a 5 second duration */
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
margin-left: 240px;
clear: both;
}

Once you have successfully put in your code for your HTML document your site should look similar to the screenshot below.

---

TransformNotes1

Now that our information is centered, we are going to start working on our header first. The first thing we are going to do to our header is style the text.

view code

     

<div id="transform_notes1">Hello. This is a DIV element.</div>

<div class="transform_notes1_p2">Hello. This is a DIV element.</div>

What we did here was make our title white, centered it, and gave it a font size of 48 pixels and gave it some line height so that our title would not be so close to the top.

     

/*
A transform is an effect that lets an element change shape, size and position.

You can transform your elements using 2D or 3D transformation.
Internet Explorer 9 requires the prefix -ms-.

Firefox requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

2D Transforms

    translate() - With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:
    rotate() - With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.
    scale() - With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):
    skew() - With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:
    matrix() - The matrix() method combines all of the 2D transform methods into one.

The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

*/
#animation_notes2{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;  /* Calls myfirst animation name with a 5 second duration */
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
margin-left: 240px;
clear: both;
}

---

TransformNotes2

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

view code

     

<div id="transform_notes2">Hello. This is a DIV element.</div>

<div class="transform_notes2_p2">Hello. This is a DIV element with a 30° rotation.</div>

We floated all of our sections to the left so that they would be next to each other but now we need to control what is inside of section tags. We do this by targeting our section ID names. The styles below in the code box are the styles we will give those ID's.

     

#transform_notes2{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
margin-left: 240px;
clear: both;
}
#transform_notes2, .transform_notes2_p2{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
margin-left: 240px;
clear: both;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

---

TransformNotes3

Now that we have finally created some space for our image it is now time to use it. We are going to place a image there, to do this we are going to be giving our <figure> tag and our figcaption some CSS properties which are listed below.

view code

     

<div id="transform_notes2">Hello. This is a DIV element.</div>
<div class="transform_notes2_p2">Hello. This is a scaled DIV element.</div>

We floated all of our sections to the left so that they would be next to each other but now we need to control what is inside of section tags. We do this by targeting our section ID names. The styles below in the code box are the styles we will give those ID's.

     

#transform_notes3{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
#transform_notes3, .transform_notes3_p2{
margin:100px;
transform:scale(2,4); /* 2 times the height, 4 times the width */
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}

---

TransformNotes4

Every thing is nearly complete; we just need to throw on some bells and whistles. To do this we are about to put some icons on the bottom of the image. These icons will have hover affects and will be only one image. The code below will show you how this is done

view code

     

<div class="transform_notes4">Hello. This is a DIV element.</div>
<div class="transform_notes4_p2">Hello. This is a scaled DIV element.</div>

We floated all of our sections to the left so that they would be next to each other but now we need to control what is inside of section tags. We do this by targeting our section ID names. The styles below in the code box are the styles we will give those ID's.

     

.transform_notes4
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
.transform_notes4, .transform_notes4_p2
{
margin:100px;
margin-left: 270px;
margin-top: 125px;
transform:scale(2,4); /* 2 times the height, 4 times the width */
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}

---

TransitionNotes1

Every thing is nearly complete; we just need to throw on some bells and whistles. To do this we are about to put some icons on the bottom of the image. These icons will have hover affects and will be only one image. The code below will show you how this is done

view code

     

<div class="transition_notes1">Hello. This is a DIV element.</div>

We floated all of our sections to the left so that they would be next to each other but now we need to control what is inside of section tags. We do this by targeting our section ID names. The styles below in the code box are the styles we will give those ID's.

     

.transition_notes1{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
margin-left: 240px;
clear: both;
}

.transition_notes1:hover{
width:300px;
}

---

TransitionNotes2

Every thing is nearly complete; we just need to throw on some bells and whistles. To do this we are about to put some icons on the bottom of the image. These icons will have hover affects and will be only one image. The code below will show you how this is done

view code

     

<div class="transition_notes2">Hello. This is a DIV element.</div>

---

Lesson Plan

Now that you have seen how to use these advanced CSS techniques, it is time to put them to use. Take the sample code below and try to implement it using the CSS techniques you have learned through out his lesson.

view code

     

<body>
<div id="container">
<header>
	<h1>Advanced CSS Techniques</h1>
</header>
<section id="firstcol">
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi felis ligula, molestie non mollis in, fermentum a erat. Phasellus eu egestas nibh, a condimentum magna. Donec suscipit risus urna, id consectetur massa ultrices ac. Pellentesque pellentesque vitae augue sed tempus. Phasellus blandit porta leo vitae pharetra. Phasellus viverra libero at purus sodales pulvinar. Donec a aliquet diam, vel condimentum diam. Aliquam vulputate arcu nec congue porttitor! Aenean nec imperdiet eros. Etiam bibendum rhoncus nibh, sit amet lobortis quam dignissim vel!</p>

  <p>Nulla non dolor turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pharetra turpis turpis, in laoreet sapien pulvinar eu? In aliquet dictum massa vel eleifend. Aenean accumsan fermentum sapien, in iaculis enim consectetur id? Sed gravida laoreet tempus. Mauris dignissim ullamcorper vestibulum. Nullam accumsan convallis enim a interdum? Aenean condimentum auctor felis, ac iaculis risus!</p>

  <p>Morbi eu felis at diam pulvinar congue. Sed semper mauris libero, ac pulvinar dui elementum eu. Morbi in orci sed neque vestibulum volutpat. Curabitur et accumsan ipsum, quis dictum enim. Ut vestibulum lorem nec condimentum luctus. Morbi quis lacus sit amet lorem luctus hendrerit. Proin scelerisque turpis felis, sit amet porta urna bibendum ut. Praesent accumsan, ligula et tincidunt bibendum, nisi mi congue purus; id porta urna ligula id sapien. Nunc nec mi vel lectus mollis pellentesque eget nec felis! In lorem mi; euismod non nulla sit amet, sollicitudin tincidunt lorem. Morbi et quam ac leo cursus ultricies sed id magna. Vivamus sed augue vel velit cursus placerat at convallis neque. Quisque ut ullamcorper ante. Curabitur sit amet dictum mauris, ut commodo mi.</p>
  <figure>
  <img src="file:///ThawSpace/gary_gibson/Desktop/AdvCSS/sunset.jpg" height="400" width="400" id="sunset" />
  <figcaption><a href="#" class="download">download</a><a href="#" class="love">Like Us</a>Such a pretty sunset.</figcaption>
  </figure>
</section>


<section id="secondcol">
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi felis ligula, molestie non mollis in, fermentum a erat. Phasellus eu egestas nibh, a condimentum magna. Donec suscipit risus urna, id consectetur massa ultrices ac. Pellentesque pellentesque vitae augue sed tempus. Phasellus blandit porta leo vitae pharetra. Phasellus viverra libero at purus sodales pulvinar. Donec a aliquet diam, vel condimentum diam. Aliquam vulputate arcu nec congue porttitor! Aenean nec imperdiet eros. Etiam bibendum rhoncus nibh, sit amet lobortis quam dignissim vel!</p>

  <p>Nulla non dolor turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pharetra turpis turpis, in laoreet sapien pulvinar eu? In aliquet dictum massa vel eleifend. Aenean accumsan fermentum sapien, in iaculis enim consectetur id? Sed gravida laoreet tempus. Mauris dignissim ullamcorper vestibulum. Nullam accumsan convallis enim a interdum? Aenean condimentum auctor felis, ac iaculis risus!</p>

  <p>Morbi eu felis at diam pulvinar congue. Sed semper mauris libero, ac pulvinar dui elementum eu. Morbi in orci sed neque vestibulum volutpat. Curabitur et accumsan ipsum, quis dictum enim. Ut vestibulum lorem nec condimentum luctus. Morbi quis lacus sit amet lorem luctus hendrerit. Proin scelerisque turpis felis, sit amet porta urna bibendum ut. Praesent accumsan, ligula et tincidunt bibendum, nisi mi congue purus; id porta urna ligula id sapien. Nunc nec mi vel lectus mollis pellentesque eget nec felis! In lorem mi; euismod non nulla sit amet, sollicitudin tincidunt lorem. Morbi et quam ac leo cursus ultricies sed id magna. Vivamus sed augue vel velit cursus placerat at convallis neque. Quisque ut ullamcorper ante. Curabitur sit amet dictum mauris, ut commodo mi.</p>
</section>
</div>
</body>

---

jogging your memory

Remember in the previous lessons we learned about HTML5 structural tags. These tags are what we have used in our example but if you don’t remember what they are and what they mean then these terms are listed below.

view code

     

artical: Defines self-contained content that could exist independently of the rest of the content.

aside: Defines content aside from the page content

section: Defines a section in a document.

nav: Defines a section that contains only navigation links.

header: Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content.

figure: Represents a figure illustrated as part of the document.

figurecaption: Represents the legend of a figure.

If you would like to refresh your mind with some basic CSS styles then just click the link below.

CSS Tutorial

---

Related Sources

If you would like to see more uses of Advanced CSS Techniques, just visit to sites below.

Tools:

CSS Image Sprites

Using :Before and :After Selectors

53 CSS-Techniques You Couldn’t Live Without

---

The Finished Peace

Now that you understand how to successfully use Advanced CSS Techniques, try and test your self on what you have learned by taking the quiz located on the right side of the screen. GOOD LUCK!!!

Click the link below to see the finished peace using Advanced CSS Techniques.

The Finished Peace