KEEP AN EAGLE EYE ON EVERYTHING IT

Tips and Insights on:

  • Website, Server, Database monitoring
  • Optimization and Web Design
  • Uptime and Server performance

The magic behind the CSS 3 (part 1)

imagesCSS stands for Cascading Style Sheets; it’s a presentational language used to separate formatting and appearance of elements from the content specified in the mark up, like HTML.  Style sheets have been in use in one form or another since the dawn of the web, but in the past ten years CSS has seen major improvements in browser support, advancement of features and widespread usage.  Chances are you already know this, so let’s take a look at the latest new features offered in CSS3.

 

CSS 3 differs from previous versions of the specification in that various groups of related selectors and functions are grouped into modules.  Some of the new modules that developers should take note of are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Today we’ll be going over Backgrounds and Borders, Text Effects and CSS3 Fonts.

 

 

Backgrounds and Borders:

border-radius:

The new border-radius property is a god-send to designers looking to implement rounded-corner elements.  In the past one had to create corner images and implement some complex code to achieve the rounded-corner look.  The border-radius property is supported in current versions of all the major browsers.

Now rounded corners are easy to implement with CSS:

div {

border-radius: 25px;

-webkit-border-radius: 25px; /* for older firefox */

}

border-radius example

One could also specify the radius of each corner individually with shorthand:

div {

border-radius: 0 25px 0 25px;

-webkit-border-radius: 0 25px 0 25px; /* for older firefox */

}

border-radius shorthand example

box-shadow:

This property lets you set a drop-shadow like effect on any box-model elements in your code.  Box-shadow is supported in all major browsers.

Here’s an example:

div {

box-shadow: 5px 5px 6px #777;

-webkit-box-shadow: 5px 5px 6px #777;

}

box-shadow example

border-image:

The border image property is a little tricky, but pretty cool.  It allows you to use an image as a border wrapper for any box-model elements.  Note: border-image is not supported in Internet Explorer

div{

border: 18px solid transparent;

width: 250px;

padding: 10px 20px;

border-image: url(border.png) 18 18 round;

-moz-border-image:url(border.png) 18 18 round; /* Old Firefox */
-webkit-border-image:url(border.png) 18 18 round; /* Safari and Chrome */
-o-border-image:url(border.png) 18 18 round; /* Opera */

}

border-image example div

Div with border.png set as border image

border-image image example

border.png

background-size:

This element sets the size for an elements background image.  In CSS2 the background size based off the actual image dimensions, now you can set the background size in pixels, % of parent element, and with the keywords cover and contain.  Cover scales the image to fit the entire containing element while maintain the aspect ratio, some image content may overflow and be hidden.  Contain scales the image to fit within the element, so that you can see the entire image but it may not cover the entire element.  The background size property is supported in all major browsers.

div {

width: 80px;

height: 70px;

border: 1px solid #000;

}

#shrink {

height: 80px;

background-image: url(sun.png);

background-size: 80px 80px;

-moz-background-size:80px 80px; /* Old Firefox */

}

#cover {

background-image: url(sun.png);

background-size: cover;

-moz-background-size: cover; /* Old Firefox */

}

#contain {

background-image: url(sun.png);

background-size: contain;

-moz-background-size: contain; /* Old Firefox */

}

background-size example

background-origin:

This property sets the background position within an element, in the content box, padding box or border box.

Background-origin is supported in all major browsers.

#content-box {

background-origin: content-box;

-webkit-background-origin: content-box; /* Safari */

}

#padding-box {

background-origin: padding-box;

-webkit-background-origin: padding-box; /* Safari */

}

#border-box {

background-origin: border-box;

-webkit-background-origin: border-box; /* Safari */

}

background-origin example

 

Multiple Background Images:

One of the coolest new CSS3 background features is the support for multiple background images within an element, this feature is supported in all major browsers and fairly easy to implement.   List the background images how they should be layered from top to bottom.

div {

background-color: #A1DBFF;

border: 1px solid #000;

width: 300px;

height: 240px;

background-image: url(ocean.png), url(sun.png), url(sand.png);

background-repeat: no-repeat, no-repeat, no-repeat;

background-position: center center, top left, bottom center;

}

multiple background images example

Text Effects:

text-shadow:

Applies a drop-shadow effect to text elements, specifying the horizontal offset, vertical offset and blur amount in pixels, followed by the shadow color.  Text-shadow is not supported in Internet Explorer, but is supported in all other major browsers.

p {

text-shadow: 3px 3px 6px #000;

}

text-shadow example

word-wrap:

The word-wrap property controls how the browser handles very long words; you can set it to break-word to avoid overflow problems.  Word-wrap is supported in all major browsers.

p {

word-wrap: break-word;

}

no word-wrap example

word-wrap: normal;

word-wrap example

word-wrap: break-word;

CSS3 Fonts:

The @font-face rule is another one of the coolest CSS3 features, before it developers could only use the fonts installed on the User’s machine, which meant sticking to a pool of about 8 web-safe fonts.  Now you can embed whatever fonts you like and even pull in fonts from outside sources with the @font-face rule.

 

To use @font-face first compile all the custom fonts you want to use, (you will need a .eot font file for Internet Explorer and either a .ttf or .otf version for all other browsers)

 

Once you have your fonts together you can load them directly in your CSS like this:

<style>
@font-face
{
font-family: SansationLight;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}

Then you can use them like any other font:

div
{
font-family: SansationLight;
}
</style>

You will need to include variations if you want to support bold and italic typefaces with your new fonts.

 

There are several services like Google Web Fonts that make it super easy to find and use new fonts.

 

This Concludes Part 1 of our look at the most compelling new features in CSS3, stay tuned for Part 2 on Transitions, Transformation and Animations.

This entry was posted in Website Performance and tagged , , , , , . Bookmark the permalink.
  • Anne Balke

    Thanks for this quick reference – good examples. Bookmarking for future reference.

trusted by
trusted by trusted by trusted by trusted by trusted by
About Monitor.Us

Monitor.Us, the free version of Monitis, the specialist web and cloud systems monitoring service that provides website monitoring, web page load testing, transaction monitoring, application and database monitoring, web page load testing,transaction monitoring, application and cloud resource monitoring, and server and internal network monitoring within one easy-to-use dashboard. Monitor.Us gives home and small business users access to leading-edge availability and performance monitoring within one easy-to-use dashboard. For more information please visit Monitor.Us.

Follow Monitor.Us on Facebook
Follow Monitor.Us on Twitter