New Elements & Features in CSS3
23
CSS3 Jamshid Hashimi Trainer, Cresco Solution http://www.jamshidhashimi.com [email protected] @jamshidhashimi ajamshidhashimi Afghanistan Workforce Development Program
-
Upload
jamshid-hashimi -
Category
Technology
-
view
16.483 -
download
1
Transcript of New Elements & Features in CSS3
CSS3
Jamshid HashimiTrainer, Cresco Solution
http://www.jamshidhashimi.com [email protected] @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_premium.png) 100% 0 no-repeat; width: 400px; height :200px; } </style></head><body> <div class="box"></div></body></html>
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/inde
x.html• http://www.addyosmani.com/resources/goog
lebox/• http://www.romancortes.com/ficheros/page-f
lip.html• http://demo.marcofolio.net/css3_bar_chart/• http://neography.com/experiment/circles/sol
arsystem/
HTML5 + CSS3 Demo
QUESTIONS?
Thank YOU!
Come Again :)
