What’s Exciting In CSS3

The web is an ever changing place to work as new methods and practices come in to standard practice and the older outdated processes are dropped. Tow of the largest changes in the pipeline that will affect virtually all web developers is the introduction of HTML 5 and CSS3.

Although the dates for introduction for these two are still a little way off many web developers are looking to find out the biggest changes and how they will affect the way they work. Instead of looking at both together, in this post we will look at some of the new features in CSS3 that will have the biggest impact.

If you like this, you might be interested in some of our older articles on Tips for Writing CSS, CSS3 Animation Demos, HTML5 Applications, and Comparison Tables.

Border-radius:

Making rounded borders using CSS alone have never been an impossibility, but the ‘border-radius:’ property will easily allow web developers to utilise rounded corner designs with comparative ease without the need for a background image or using a ton of div tags. The code for rounded corners will be quite simple as well with very little code needed in comparison to previous methods (Example 1). Currently you’ll also need to include the –moz- prefix for Firefox support (Example 2).

Example 1a:

#background1 {
 border-radius: 10px;
 }

Example 1b:

#background1 {
 -moz-border-radius: 10px;
border-radius: 10px;
 }

You can also apply different radii’ to each corner using the individual border-radius properties: border-bottom-left-radius, border-top-right-radius, etc. Each property can accept either one or two values defined as either a percentage or length. When using two values to define the radius the first represent the horizontal radii and the second the vertical radii.

Example 2a:

#background2a {
 border-bottom-left-radius: 15px 10px;
 }
#background2a {
border-top-right-radius: 10% 5%;
 }

This can be further shortened to specify all four corners at the same time. The short hand property will accept one or two sets of values and each can contain one to four numerics. In this instance the first four sets of number set the border for the horizontal radii for all four corners, the additional 4 sets of numbers separated by the ‘/’ set the border for the vertical radii. If only one set of numbers is given then these figures are used to set both vertical and horizontal radii for all four corners. When all four values are given then these will represent the top left, top right, bottom right and bottom left respectively. If the bottom left is left out then the top right will be applied automatically and vice versa. If only one value is given it is used for all four corners.

Example 2b:

#background2b {
 border-radius: 15px 10px 15px 10px / 5px 5px 5px 5px;
 }
#background2b {
 border-radius: 15px;
 }
#background2b {
 border-radius: 15px 10p / 10px;
 }

Browser support for these new properties is still sketchy. See the below table for the W3C specification and the Mozilla alternative.

W3C SpecificationMozilla Alternative
border-radius-moz-border-radius
border-top-left-radius-moz-border-radius-topleft
border-top-right-radius-moz-border-radius-topright
border-bottom-right-radius-moz-border-radius-bottomright
border-bottom-left-radius-moz-border-radius-bottomleft

And they can be implemented together as shown in the following example:

Example 3:

#background3 {
 height: 50px;
 width: 120px;
 -moz-border-radius: 10px 20px 10px 20px;
 border-radius: 10px 20px 10px 20px;
 }

Opacity

I love opacity and have been using it in style sheets for some time. Web developers in the past would always have to use images to achieve the opacity effect or a combination of a colour value and an opacity value. It was an especially common effect used for rollover buttons. The opacity property in CSS3 has perhaps been the most widely embraced so far. Where as in the past developers would have to code opacity with a color value and an opacity value, developers can now utilise the opacity feature to specify the colour code and the opacity value at the same time. For example the following code would give you red at 20% opacity:

#opacity1 {

background: rgb(255, 0, 0) ; opacity: 0.2;

}

You can also use the new rgba feature to specify the colour and desired opacity at the same time. The below would also give you red at 20% opacity:

#opacity2 {

background: rgba(255, 0, 0, 0.2)

}

The difference between the two is that by using the opacity feature as in example one will apply the opacity to anything within the specified container, be it images, text, etc. Whereas, applying opacity as in the second example will apply the effect to the colour only and text and images within the same element will remain unaffected.

Box-Shadow

The box-shadow property is another feature that will please many developers as it allows you to apply a shadow to almost any non-text object on the page. In the past developers would have to create an image or images of the shadow and then line it up with the box to be pixel perfect, a process that was fairly time consuming. The box-shadow property eliminated the need for images and has the capability to display any colour shadow, set the position to left/right/up/down offset and you can also adjust the amount of blur, all through CSS3. The following diagram taken from W3C displays quite well the effects the code that can be used:

CSS3 box shadow

Image Source: http://www.w3.org/TR/css3-background/spread-blur.png

Text-shadow

In the past applying a shadow to text has only been achievable through photoshop and displaying the test as an image. With the new CSS3 text-shadow property, shadow can be applied to any text on screen with only a few lines of code:

#TextShadow1 {

text-shadow: 2px 2px 2px #000;

}

The above code will give you a taste of how to apply a simple text-shadow effect. Try the below code for a truly amazing effect.

#TextShadow2 {
background: black;
color: white;
font-size: 30px;
margin: 10px;
padding: 40px 0 10px;
text-align: center;
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
}

Web Fonts

Web fonts have been about for quite a while now, in fact as far back as 1997 when they were first proposed for CSS2. The only browser to offer limited implementation was Internet Explorer since version 5. However, with this new feature in CSS3, any TrueType or OpenType font can be used to display text on websites. In the past, if a web design called for a non standard web-safe font had to be rendered as an image first and displayed as such which led to increased load times and text on the page that search engines couldn’t read. With CSS3 you can upload TrueType or OpenType fonts to you server, declare them in your style sheet using the ‘@font-face’ rule and you’re away. For example:

@font-face {
  font-family: "birth-of-a-hero";
  src: url(http://www.yourdomain.com/fonts/ »
  birth-of-a-hero.ttf) format("truetype");
}
h1 { font-family: " birth-of-a-hero ", sans-serif }

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.