New Elements & Features in CSS3

CSS3
Jamshid Hashimi
Trainer, Cresco Solution
http://www.jamshidhashimi.com
jamshid@netlinks.af
@jamshidhashimi
ajamshidhashimi
Afghanistan Workforce
Development Program

Agenda
• CSS3 Introduction
• CSS3 border-radius
• CSS3 box-shadow
• CSS3 text-shadow
• CSS3 Multiple Backgrounds
• CSS3 background-size
• CSS3 text-overflow
• CSS3 resize
• CSS3 Samples
• HTML5 + CSS3 Demo (Responsive)

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.

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):

CSS3 Properties
• Box-shadow
• box-shadow accepts four parameters:
– x-offset
– y-offset
– blur
– color of shadow
box-shadow: 1px 1px 3px #292929;

CSS3 Properties
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 Box Shadow (box-shadow):

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;

CSS3 Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Text-Shadow</title>
<style>
body { background: #666; }
h1 {
text-shadow: 0 1px 0 white;
color: #292929;
font-size: 90px;
font-family: helvetica;
}
</style>
</head>
<body>
<h1> Hello Reader </h1>
</body>
</html>

CSS3 Properties
• Multiple Backgrounds
– The background property has been overhauled to
allow for multiple backgrounds in CSS3.
.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}

CSS3 Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multiple Backgrounds</title>
<style>
.box {
/* fallback */
background:
url(http://d2o0t5hpnwv4c1.cloudfront.net/852_workingWithPages/working-with-pages-
in-wordpress.jpg) no-repeat;
/* for modern browsers */
background:
url(http://d2o0t5hpnwv4c1.cloudfront.net/852_workingWithPages/working-with-pages-
in-wordpress.jpg) 0 0 no-
repeat, url(http://d2f29brjr0xbt3.cloudfront.net/premium/promo_graphics/photo_pre
mium.png) 100% 0 no-repeat;
width: 400px;
height :200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

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;
}

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.

CSS3 Properties
#example1 {
background-size: auto;
}
#example2 {
background-size: 275px 125px;
}

CSS3 Properties
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url("img_flwr.gif");
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Some text here
</p>
<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224"
height="162" /></p>
</body>
</html>

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;
}

CSS3 Properties
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">This is some long text
that will not fit in the box</div>
<p>This div uses "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;">This is some long text that
will not fit in the box</div>
</body>
</html>

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:

CSS3 Properties
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<div>The resize property specifies whether or not an element is
resizable by the user.</div>
</body>
</html>

Samples
• http://colly.com
• http://fromtheoutfit.com/products
• http://www.webkit.org/blog-files/leaves/index.html
• http://www.addyosmani.com/resources/googlebox/
• http://www.romancortes.com/ficheros/page-flip.html
• http://demo.marcofolio.net/css3_bar_chart/
• http://neography.com/experiment/circles/solarsystem/

New Elements & Features in CSS3

More Related Content

What's hot

Viewers also liked

Similar to New Elements & Features in CSS3

More from Jamshid Hashimi

Recently uploaded

New Elements & Features in CSS3

Editor's Notes