This article marks the first of several, providing an introduction to
the new CSS3 standard which is set to take over from CSS2. We will be
starting from the very beginning – taking you from not having even heard
of CSS3, to feeling ready to hit it running as various features start
to become more widely adopted.
It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.
New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.
The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).
Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.
CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.
All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
The next article in this series will be expanding on a new area in CSS3, Text Effects.
CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.
All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
Currently, the latest version of Safari (3.1) is the only browser
supporting Web Fonts. Opera is suggested to be another which will soon
be enabling support, and the others will no doubt follow at some point
in the future. An example of how this could be achieved would be:
A few examples of pages have been mocked up using this technique. The
following are examples in the vein of CSS Zen Garden, created by A List Apart. The linked versions will only work on certain browsers:
The next article in this series will be expanding on some of the user interface enhancements in CSS3.
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.
The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:
The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text.
CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:
View the live examples page
There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:
Numbers can also be used to allow the element to span a certain
number of columns. At present this feature isn’t implemented in any
major browsers, but should provide much needed additional flexibility
when designing around this feature. It would allow you to achieve
effects such as:
The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds.
The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:
View the live examples page
The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:
The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.
We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!
What is it?
CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. This first tutorial will give you a very basic introduction to the new possibilities created by the standard.Modules
The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:- The Box Model
- Lists Module
- Hyperlink Presentation
- Speech Module
- Backgrounds and Borders
- Text Effects
- Multi-Column Layout
Timescale
Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.
New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.
How will CSS3 affect me?
Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).
Future articles in this series will each focus on a different module of the CSS3 specification, and the new features they will bring. The next one relates to CSS3 borders.
Borders
For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property – it’s a great way to structure content, create effects around images and improve page layout.CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.
All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
Rounded Borders
Achieving rounded borders using current CSS coding can be tricky – there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:
1
2
3
4
5
6
7
8
| .border_rounded {background-color: #ddccb5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 2px solid #897048;padding: 10px;width: 310px;} |
Gradients
Gradient borders can look effective if used correctly. This code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:
1
2
3
4
5
6
7
8
9
| .border_gradient {border: 8px solid #000;-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;padding: 5px 5px 5px 15px;width: 300px;} |
Box Shadows
Adding a shadow to an element is difficult at present – it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:
1
2
3
4
5
| .border_shadow {-webkit-box-shadow: 10px 10px 5px #888;padding: 5px 5px 5px 15px;width: 300px;} |
Border Images
Border images are one of the most useful additions – I’m really looking forward to discovering how people choose to use them. CSS has the ability to repeat, or stretch a border image as you choose. The CSS code is similar to the following (it varies between browsers at present):
1
2
3
| .border_image {-webkit-border-image: url(border.png) 27 27 27 27 round round;} |
In conclusion…
Borders are revolutionized! These additions in CSS3 are bound to save you a huge amount of time as a designer. They go a long way towards simplifying layouts and allow you to create visually appealing boxes without even opening Photoshop.The next article in this series will be expanding on a new area in CSS3, Text Effects.
Part 3: Text Effects
The third part in this series on CSS3 will be delving into the new text effects. Typography is, without any doubt, one of the most important aspects to get right when designing a layout. Type can draw the reader through a page, give a certain impression, provide impact, be subtle, or aid in separating content.CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.
All the examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
Text Shadow
Text shadows sound a little tacky, but it all depends how they are executed. When experimenting for this article I found some combinations to look terrible, and some to give an attractive, subtle effect. Shadows could definitely be put to good use in headings and titles – there are some great examples of their use at Matthias Kretschmann’s blog.
1
2
3
4
5
6
| .text_shadow {color: #897048;background-color: #fff;text-shadow: 2px 2px 2px #ddccb5;font-size: 15px;} |
Word Wrapping
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:
1
2
3
| .text_wrap {word-wrap: break-word;} |
Web Fonts
Whilst these are not classed as a ‘text effect’, we are going to cover them here briefly. A Web Font is simply a way to use any font in your page, being downloaded automatically by the browser. This will be a revolutionary change to web design, which previously has been limited to 10-15 widely supported fonts. However, this new feature brings bring copyright into debate as only properly licensed fonts should be used.
1
2
3
4
| @font-face {font-family: 'Name of the new font';} |
In conclusion…
Many of the missing features of CSS2 have been rectified in this update. This article doesn’t cover all the additions in terms of text – if you’re interested, you can read more about the text module. All these additions are great when used in a subtle way, enhancing the typographic layout of the page.The next article in this series will be expanding on some of the user interface enhancements in CSS3.
Part 4: User Interface
This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.
The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:
View the live examples page
Resizing
The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is theresize:both; line:
1
2
3
4
5
6
| .ui_resizable {padding: 20px;border: 1px solid;resize: both;overflow: auto;} |
Box Sizing
The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:
1
2
3
4
5
| .area {width: 300px;border: 10px solid #ddccb5;height: 60px;} |
1
2
3
4
5
6
7
8
9
| .boxes {box-sizing: border-box;width:50%;height: 60px;text-align: center;border: 5px solid #897048;padding: 2px;float:left;} |
Outline
Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:- Outlines do not take up space
- Outlines may be non-rectangular
1
2
3
4
5
6
7
8
| .ui_outline {width: 150px; padding: 10px;height: 70px;border: 2px solid black;outline: 2px solid #897048;outline-offset: 15px;} |
In conclusion…
These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text.
Part 5: Multiple Columns
Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:
View the live examples page
Multiple columns using CSS3
At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:
- column-count
- column-width
- column-gap
- column-rule
1
2
3
4
5
6
7
8
| .multiplecolumns {-moz-column-width: 130px;;-webkit-column-width: 130px;-moz-column-gap: 20px;-webkit-column-gap: 20px;-moz-column-rule: 1px solid #ddccb5;-webkit-column-rule: 1px solid #ddccb5;} |
Spanning columns
It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:
1
2
3
| h2 {column-span: all} |
In the meantime
It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.In conclusion…
Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds.
Part 6: Backgrounds
For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:
View the live examples page
Background Size
Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:
01
02
03
04
05
06
07
08
09
10
| .backgroundsize {-webkit-background-size: 137px 50px;-khtml-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;background-repeat: no-repeat;padding: 60px 5px 5px 10px;border: 3px solid #ddccb5;} |
Multiple Backgrounds
The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than onediv. Whether it will be possible to combine this with background-size will be interesting to see.The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.
1
2
3
4
5
6
7
8
| .multiplebackgrounds { height: 150px;width: 270px;padding: 40px 20px 20px 20px;background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat,url(middle.gif) left repeat-y;} |
Background Origin
CSS3 allows you to specify how the position of a background is calculated. Thebackground-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.In conclusion…
There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!
0 comments:
Post a Comment