I already wrote about CSS here and not just once. But being a premium provider of CSS website Templates LayoutsPack can’t miss the chance to tell you even more about CSS.
Today I’m going to give you a brief description of some peculiar features of upcoming CSS3. This won’t be a tutorial, so do not expect to see any codes here.
As you remember, CSS (Cascading Style Sheets) is a language allowing to style HTML and XHTML pages. CSS3 taking over CSS2 offers a number of changes, giving you more ways to create incredible designs.
The main thing about CSS3 is that it’ll allow you to develop brilliant websites with new design features and with old ones being achieved in a much easier way. And while the browsers are being upgraded to adopt new CSS3 features you won’t need to change the existing designs, CSS2 will always be supported.
So, what are the said new features?
First of all borders. If you are using CSS you are familiar with the border property. It is a perfect way to create effects around images, structure your content and improve a page layout. Giving the ability to use rounded corners, shadows, border images and gradients CSS3 brings the borders to a new level. These additions in CSS3 will save a great deal of time to designers.
Rounded Borders
With CSS2 it is rather tricky to create rounded borders. There are few ways and you often need to create individual images for each border. With CSS3 creating a rounded border is much more easier, and it can be applied to individual corners or to each corner, width and color are also easily altered.
Gradient borders
If used properly this new feature can look really effective. The code will be a bit more complex as you’ll have to define each color of the gradient.
Box Shadows
You may know how hard it is to add a shadow to an element with CSS2. CSS3 will bring you convenience in creating this stylish way of distinguishing a certain area.
Border Images
Border images are among the most useful additions. They can be repeated and stretched as you choose.
Next come new text effects.
Typography is one of the most important aspects in designing a layout, text and font can give as a pleasant so a repugnant impression to the reader, used properly the text effects can provide impact that no other effect can give.
CSS2 is rather versatile in the ways of displaying text but there are still some limitations. CSS3 gives some indulgence to those limitations.
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.
Text Shadow
As any other effect this should be executed cautiously. When used in headings and titles shadows can give a really attractive, subtle effect
Word Wrapping
CSS3 will give you an opportunity to wrap really long words that do not fit with a line in a particular area.
Web Fonts
This is not really a “text effect”, a Web Font is a way to use any font on a page being automatically downloaded by the browser. This feature will definitely become a revolution in web design.
CSS3 also brings few new great properties to resizing elements, outlining, box layout, cursors etc.
Resizing
CSS3 will allow you to easily resize any element, in the end becoming cross-browser compatible.
Box Sizing
This feature will allow you to
The box sizing aspect allows you to arrange certain elements to fit a certain area in some certain way. For instance, you need two bordered boxes side by side, you can achieve this by stating box-sizing to ‘border-box’. This will tell the browser to render the box with the told height and width and put the border with the padding inside the box.
Outline
You can set an element outline in CSS2, but CSS3 allows you to shift the outline from an element by a value you want it to be.
Among other new features CSS3 introduces a new module – a multi-column layout. It will give you an opportunity to specify into how many columns a text is to be split down and how are they to appear.
There are such properties related to multi-column layout in CSS3: setting the number of columns, width of columns, gap between the columns and a border between them.
This new upcoming feature will allow a better control over how a copy is displayed, saving designers some headache.
Well, these were some of the new great features of CSS3, there are a lot more of course. This post was merely meant to introduce you to the new generation of Style Sheets.
Related posts: