Design Superstars

CSS3 Properties For Noobs

February 11, 2013 Development No Comments

144 Flares

144 Flares


×

There are many things in CSS3 that are new and exciting. In this post, I will explain to you what is CSS3, what it means to the world and go over the most awesome of things that came about thanks to it. I have purposely excluded visual examples, I would like for you to open up an editor even and play with them yourself.

CSS3: what is it?

CSS3 is basically the newest version of CSS. There isn’t much to it except that it contains new properties and possibilities. It works the same was as CSS does. What you can think about CSS3 as is an extension for CSS that provides new properties because honestly in the simplest of terms it does exactly that. Actually, CSS3 is still in the making; the creators have not finished working it all out yet but they have released to the world what they have worked out thus far. It is unlikely that what is already in place for the public – so you and me – to use will change but certainly new things will come about.

The one thing to keep in mind is that most of these properties will need prefixes in order to work in certain browsers; it’s because CSS3 is just so new. However, don’t worry I’ve included those in the code samples for those that require them, so you’re good to go.

What is new?

Border-radius

Border-radius is a property that creates rounded corners, that’s as simple as I can put it. You can round the corners individually to look as even or not as you’d like.

Source code    
border-radius: [<length> | <%>];
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
border-top-left-radius: [<length> | <%>];
 
{border-radius:25px 5px;}
{border-radius:40px 30px 20px 10px;}
 
div{
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

The reason this property is important is because it accomplishes two things. First, it gets rid of using images as a background to create rounded corners. Second, it allows for easy corner manipulation which makes for better and faster designs. Thanks to border-radius, it is now very simple to implement rounded corners so have fun with them.

Box-shadow

Box-shadow is that what it says: it adds a shadow to the div. You can manipulate how the shadow is displayed including position, blur and colour.

Source code    
text-shadow: [x-coordinate] [y-coordinate] [blur radius] [color];
text-shadow: 10px -5px 3px #000000;
 
div{
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

This is one hell of a property if you use shadows in your designs. Obviously, you are capable of creating both obnoxious and subtle shadows it is all up to you! Just like border-radius, this property makes life so much easier for us as we no longer have to rely on odd tricks to make shadows happen.

Text-shadow

Yup, it is just like box-shadow but for text. So instead of adding a shadow to the box it adds it to the text within the element.

Source code    
text-shadow: [color] [x-coordinate] [y-coordinate] [blur radius];
 
p{
text-shadow: #00000 1px 1px 0;
}

And, just like with box-shadow, you can manipulate the way this shadow is displayed – once again manipulating blur, position and colour. I will caution you that adding a shadow to text can be tricky as it  can distort the words and make the text illegible; so please be careful with this one!

Word-wrap

Typically, when you have a word that is going to be longer than the width of the element, it will continue past the element. This can sometimes be a real headache as it can mess up your layout.

Source code    
word-wrap: normal|break-word;
 
p {
word-wrap:break-word;
}

The only way to go about this is to either break up the word manually with <br> in the middle of it, place a <br> before is or by choosing another word. But, thanks to the word wrapping property, the long word will now break by itself to fit into the element nice and snugly. I must say this is a very simple but helpful property.

@font-face

I’m sure you must have heard of this rule before; it is the rule which allows the use of any font! Before @font-face, designers and developers had to use web safe fonts – fonts that were most likely found on a user’s computer.

Source code    
@font-face{
font-family: [name];
src: [URL];
}
div{
font-family: [name];
}
 
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); 
}
div{
font-family: myFirstFont;
}

With @font-face, this is no longer the case. @font-face allows you to link a font whether from your server or elsewhere on the internet by downloading it onto the user’s computer. This rule opened up a whole new world of design possibilities and it is the reason you see such diverse set of fonts on websites today.   The way @font-face works is you first define the new font to be used, you specify its name, where it can be found and how it will look – i.e. bold, italic, etc. However, in order to have the font appear you must use this font’s name as the element’s font-family in order for the font to take effect. Additionally and interestingly enough, the browser support of this property is very high which is simply wonderful!

Multiple Columns

Personally, I love this property because it allows you to break your text into columns with little effort. Before, you had to do it manually by creating multiple divs but now this is no longer the case; it is now done for you automatically.

Source code    
column-width: [width];
column-gap: [width];
column-count: [number];
column-rule: [width] [style] [color];
 
div
{
-moz-column-count:3;
-moz-column-gap:40px; 
-moz-column-rule:3px outset #ff00ff;
 
-webkit-column-count:3; 
-webkit-column-gap:40px;
-webkit-column-rule:3px outset #ff00ff;
 
column-count:3;
column-gap:40px; 
column-rule:3px outset #ff00ff;
}

Another thing that makes this rule amazing is the fact that the columns can be flexible if the measurements are made in percentages or ems. The drawback is that, unfortunately, this property is yet to be supported in IE – no shock here. There are actually four properties for this multi-column rule that allow you to customize the way the columns appear. All four of the properties are included in the code above; they are very self-explanatory.

2D and 3D transformations

In CSS3, you are now able to change an element’s shape, size or position within its y, x and z axis. In the above examples, I’ve only included one type of transformation for 2D and one for 3D; however, there are many more.

Source code    
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); 
-webkit-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
}

Source code    
Transform: [transform-functions];
 
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); 
-moz-transform: rotateX(120deg); 
}

In 2D transformation you can translate an element – move the element from one place to another – rotate it, scale it, skew it – turn the element on an angle – or use a matrix method to change an element with all of the previously names methods at once. In 3D transformations ,you can rotate an element on it X or Y axis. These transformations can be very hand in animating some elements with no need for programming!

Transitions

What transitions do is create an effect when an element is changing from one style to another. Let’s explain this with a simple background colour change. Let’s say we have a link whose background colour is blue and on hover it is red.

Source code    
transition: [property] [duration] [timing-function] [delay];
 
div
{
width: 100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
width: 200px;
}

With a transition in place, the colour will ‘transition’ from blue to red instead of jumping from blue to red like it normally does. That’s what a transition is; it smooths out the style change over a set time period. Transitions can add a nice touch to the various changes that can be on a website. Additionally, transitions work with just about all pseudo codes.

@keyframe

In CSS3, you are able to create actual animations that do not require much programming and can replace animated images, Flash or JavaScript. All that can be done thanks to the @keyframe rule.

Source code    
@keyframes [animationname] [{keyframes-selector {[css-styles;]}}]
 
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction];
 
@keyframes myfirst
{
from {background: red;}
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;}
} 
 
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}

First, you define what the animation will be. Then, you apply it to an element by defining which animation to play and for how long. Without including the animation property, the animation will not take place. This is the same concept as with @font-face, first define the font and then call upon it. Of course with CSS3 animations, the capabilities are not as advanced as with other technologies but simple and small animations can be made with no problems. Additionally, there are many advantages of using CSS3 animation over others methods such as the ability to work when Flash, JavaScript and even images are disabled. Its biggest drawback is none other than browser support.

Conclusion

I really hope that you enjoyed reading the overviews of these new properties and rules. CSS3 is a very amazing and powerful tool that should be used to its full potential; after all, it can do so much! I understand that browser support can be tricky for some of these but as time goes on, more and more browsers will support these new properties and there will be less and less browsers in use which do not support them. With all of that said, get going and create something awesome.


Tags:
About the Author -

Paula loves all things UX and all things mobile. She strives to make sexy and awesome products and she loves to talk shop @paulaborowska

144 Flares Facebook 5 Twitter 37 Google+ 4 StumbleUpon 96 144 Flares ×