Search
Close this search box.

Differences Between CSS2 & CSS3

Differences between css2 and css3

Differences Between CSS2 & CSS3 | CSS2 & CSS3: The Differences Text
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 is 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(/templates/name/images/background.jpg); background-repeat:repeat-x; background-position:top”>
then add to your css file
html {background-image:url(/templates/name/images/backgroundnew.jpg)}

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


 

white label guide to success

Simply the Best at White Label Marketing in the World


 

New Background Style Properties

Background-clip: how the background image should be clipped.
Background-origin: whether 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

or
Get Started

"*" indicates required fields

Do you run a marketing agency?*
What services are you interested in?

Trending News
Featured News
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 – Let’s Talk