Introducing CSS3 For Beginners

As some of you may know CSS3 is the latest standard for CSS and it comes with many new and exciting references that can really enhance the quality of your websites and make your life easier as a developer or a designer. This article is css3 for beginners, you get to learn about some of the new properties that come with CSS3 and take a look at some pretty cool examples.

You may also know that CSS3 is not a full standard yet and some browsers are not fully supporting it, but that doesn’t mean we cannot test it out and have some fun with it. It would also be preferred if you read this article using either Mozilla Firefox, Safari or Chrome as they support most CSS3 properties.

I recently received a request on my twitter page for an article on CSS3 and HTML5 which could provide tutorials for beginners. First off, I am going to show and explain some of the new features that are used with CSS3 and provide you with some examples. At the bottom of this article you can find some of my CSS3 tutorials.

Whats New With CSS3

Now I won’t be explaining every little detail as there are quite a few new CSS properties, but I will point out the ones I consider most valuable and will provide you with some examples.

Images & Boxes

border-radius: First we have border radius which allows you to round your corners using a simple CSS reference. Instead of placing an image in each corner like we would using the old CSS.

border radius test

box-shadow: the box shadow property lets you add box-shadows to boxes and other elements. Here is an example of the box shadow property in action.

background-image: Now the background-image property is not new, but the cool thing about CSS3 is you are now able to use 2 background images as opposed to one, which I thought was pretty awesome. Look at the example below, the music notes and the water are actually two separate images. You would write the code like this:

background-image:url(../image-location/filename.gif),
url(/image-location/filename.gif); 

Text & Fonts

text-shadow: This property lets you apply a shadow to your text. You can control the blur effect of the shadow and where it is positioned using pixels. Take a look at the example below.Text shadow is not yet supported by internet explorer.

Text Shadow Example

@font-face Before you could only use the fonts that were stored on your computer. Now we are able to use any font we like using the @font-face property.

All you do is upload your font to your web server and use the @font-face property in your CSS. Below you can find the code I have used for the example font.

Here is your font-face example!

@font-face { 
font-family: AlexBrush;
src: url('AlexBrush-Regular-OTF.otf');
src: local ('Alex Brush');
}

.font-face-example { 
font-family: Alex Brush;  
font-size: 38px; 
} 

CSS3 Transforms

With CSS3 you can use transforms to your images allowing you to easily change the shapes, size and position of the images.

transform: Here is an example of a 2D transform. As you can see I have rotated the image by 16 degrees using “transform: rotate(6deg);” .

Another 2D transform where I have used “transform: skew(45deg, 5deg);” which allows you to transform the element at an angle. Not very pretty, but it’s a neat effect.

CSS3 Transitions

transition: One of my favorite properties of CSS3 is the transition property. We can apply changing style effects using transitions instead of using flash or JavaScript.

This simple example is a transition taking effect. Click inside the input area to see a 1 second transition take effect.

Transition Example:

Pretty cool huh? It’s a similar effect to┬ámy old search bar. Which you can find the code for in my article customizing your search bar using css.

Now I am going to use both the rotate and the transition effects to turn my logo in the upright position with a hover over. Hover over the example below to see the effect take place.

Note: This does not work in Internet Explorer.

Here is the CSS code I have used to create this rotating hover over effect.

img.transition-logo { 
width:120px;
height:120px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari & Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
} 

img.transition-logo:hover{ 
width:120px;
height:120px;
transform: rotate(90deg);
-moz-transform: rotate(90deg); /* Firefox 4 */
-webkit-transform: rotate(90deg); /* Safari & Chrome */
-o-transform: rotate(90deg); /* Opera */
}

CSS3 Animations

animation: Yep I said it, animations! You can now create your own animations using pure CSS.

Below is a simple animation I created using 2 images which I placed on top of each other. I then used @keyframes to specify when the opacity will change on each image. You can find my CSS code below.

Here is the CSS for the animation. Does not work in Internet Explorer.

 .your { 
 position: absolute; left: 535px;
 }
 .animation 
{ 
position:absolute; left: 535px;
animation: example 2s;
-moz-animation: example 2s; /* Firefox */
-webkit-animation: example 2s; /* Safari and Chrome */
-o-animation: example 2s; 

animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;

-webkit-animation-timing-function: ease-in-out; /* Safari and Chrome */
-webkit-animation-iteration-count: infinite; /* Safari and Chrome */
-webkit-animation-duration: 2s; /* Safari and Chrome */
-webkit-animation-direction: alternate; /* Safari and Chrome */

-o-animation-timing-function: ease-in-out; /* Opera */
-o-animation-iteration-count: infinite; /* Opera */
-o-animation-duration: 2s; /* Opera */
-o-animation-direction: alternate; /* Opera */
 
} 


@keyframes example
{
0%   {opacity: 1; }
25%  {opacity: 1;}
50%  {opacity: 0;  }
100% {opacity: 0; }
}

/*Safari & Chrome */ 
@-webkit-keyframes example { 
0%   {opacity: 1; }
25%  {opacity: 1;}
50%  {opacity: 0;  }
100% {opacity: 0; }
}
/* Opera */ 
@-o-keyframes example { 
0%   {opacity: 1; }
25%  {opacity: 1;}
50%  {opacity: 0;  }
100% {opacity: 0; }

} 

Now you have a short intro into CSS3. Check out these 2 awesome tutorials both using the transition property to create some cool CSS3 effects.

Tutorials:

Author: Jake

Share This Post On