This is part 5 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed box shadows. In this post I’ll be discussing the @font-face-Attribute.
I can hear the angels rejoice because of this nifty and soon-to-be resourceful property. With the @font-face-Attribute, you can use any font you wish allowing you to step away from system fonts and relying on graphics, sIFR or Cufón to display the fonts you want to use. (more…)
This is part 4 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed multi-column layouts. In this post I’ll be discussing box shadows.
Have you ever wanted to add a drop shadow to a div and had to add background images just to get that nice effect? With box shadows, there is no need and it’s so easy to adjust. Below you will see an example of a div with a 2px drop shadow on it. (more…)
This is part 3 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed border radius. In this post I’ll be talking about multi-column layouts.
Newspaper-style columns are easier to read than long lines of text. In CSS3, the browser interprets the properties and creates the columns, flowing the text from one column to the next.
In the case above, we use this code:
#columns {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
color: #fff;
}
Webkit targets Safari and moz targets Mozilla browsers.
There are three things we can define when using this style. The number of columns (column-count), the width of each column (column-width) and the gap between columns (column-gap). If you don’t declare a column-count, the browser will create as many columns as are needed to fit in the available width.
If you prefer to use a vertical separator, declare a column-rule. This is pretty much a border property.
div {
column-rule: 1px solid #00000;
}
Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+. If the browser doesn’t support this, it will render the text as normal text.
In my next post I will discuss the usage of box shadows and how to add a drop shadow to a div.
This is part 2 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed RGBA And Opacity. This time around we’ll be tackling rounded corners.
We all love rounded corners and in order to achieve that look, in the past we had to use images. CSS3 makes this much easier. To add rounded corners just put the following in your style. (more…)
Cascading Style Sheets (CSS) were introduced to the Web world roughly 13 years ago. They have changed the way we program Web sites and have made our lives easier in many ways. Improvements are of course always being made and the latest of these is CSS3. If you want to make use of the features of this new version, keep in mind that not all browsers will support CSS3. As of now, Safari 4 is pretty safe and so is Firefox 3.5.
CSS3 has many new features. In this series I’m going to point out the ones that will really make a difference. (more…)
|
