Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
CSS 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:
Today we’ll be going over Backgrounds and Borders, Text Effects and CSS3 Fonts.
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 */
}
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 */
}
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;
}
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 */
}
 Div with border.png set as border image |
 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-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 */
}
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;
}
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;
}
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;
}
 word-wrap: normal; |
 word-wrap: break-word; |
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.
