4. CSS3 Introduction
• Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation semantics (the
look and formatting) of a document written in a
markup language. Its most common application is to
style web pages written in HTML and XHTML.
• CSS3 is completely backwards compatible, so you will
not have to change existing designs. Browsers will
always support CSS2.
• The CSS3 specification is still under development by
W3C
• However, many of the new CSS3 properties have been
implemented in modern browsers.
5. CSS3 Properties
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners
to elements.</div>
</body>
</html>
CSS3 Rounded Corners(border-radius):
6. CSS3 Properties
• Box-shadow
• box-shadow accepts four parameters:
– x-offset
– y-offset
– blur
– color of shadow
box-shadow: 1px 1px 3px #292929;
8. CSS3 Properties
• text-shadow
– text-shadow is one of the few CSS properties that we
can omit the use of vendor-prefixes. Quite similar to
box-shadow, it must be applied to text, and receives
the same four parameters:
• x-offset
• y-offest
• blur
• color of shadow
text-shadow: 0 1px 0 white;
12. CSS3 Properties
• Compensating for Older Browsers
– To add a single background image for older
browsers, like IE7, declare the background
property twice: first for old browsers, and the
second as an override.
.box {
/* fallback */
background: url(image/path.jpg) no-repeat;
/* modern browsers */
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}
13. CSS3 Properties
• background-size
– Another new property introduced by the CSS3
Backgrounds and Borders module is background-
size. The property adds new functionality to CSS
allowing designers to specify the size of
background images using either
lengths, percentages, or by using one of two
keywords; contain or cover.
16. CSS3 Properties
• text-overflow
– The text-overflow property specifies what should
happen when text overflows the containing
element.
– Did You Know? Internet Explorer has provided
support for this property since IE6? They created
it!
div.test
{
text-overflow:ellipsis;
}
18. CSS3 Properties
• resize
– The resize property specifies whether or not an
element is resizable by the user.
– Note: The resize property applies to elements
whose computed overflow value is something
other than "visible".
resize: none|both|horizontal|vertical: