Design Superstars

CSS3 Properties For Noobs

February 11, 2013 Development No Comments

144 Flares



Filament.io





), 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 Filament.io 144 Flares ×