Differences Between CSS2 & CSS3



The biggest difference between CSS2 and CSS3 is that CSS3 is now split into different modules. Since each module makes its way through the W3C individually, there’s a wider range of browser support. Make sure you test your CSS3 pages in as many browsers and operating systems as possible to ensure compatibility.

Multiple Backgrounds
Background-image, background-position and background-repeat can now be used to specify multiple background images to be layered on top of one another. The first image being closest to the user, with the following image layered behind. If there is a background color, it’s painted below all the image layers.

#example1 {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
background-color:red
}

***************************************

Prior ways to get multiple backgrounds required the following HTML…
<body bgcolor=”transparent” style=”background-image:url(https://3gu9o71jpajrhhohe38gzl81-wpengine.netdna-ssl.com/templates/name/images/background.jpg); background-repeat:repeat-x; background-position:top”>
then add to your css file
html {background-image:url(https://3gu9o71jpajrhhohe38gzl81-wpengine.netdna-ssl.com/templates/name/images/backgroundnew.jpg)}

***************************************

New Background Style Properties

Background-clip: how the background image should be clipped.
Background-origin: whether a background should be placed in the padding box, the border box, or the content box.
Background-size: determines the size of the background image. This allows stretching smaller images to fit a page.

Border Properties
Borders are still what we’re used to (solid, double, dashed, etc.). Now you can create rounded corners.

***************************************
div {
border: 2px solid;
border-radius: 25px;
}

***************************************

Border images are new because you can create an image of all four borders.

***************************************
div {
border-image:url(border.png) 30 30 30 30 round round;
}

***************************************

*Internet Explorer does not support the border-image property.

Written By: Izaak Hale – Graphic/Web Design

 

 

Listen to our CEO’s podcast “The Daily Drive” to stay driven and get great business insights from top business leaders. –

Are you ready to scale your agency with a quality white label SEO, white label PPC, or white label social media provider?

If so schedule a meeting here –