New Elements & Features in CSS3

19,001 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,001
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
87
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • The box-shadow property can accept a comma-separated list of shadows, each defined by 2-4 length values
  • New Elements & Features in CSS3

    1. 1. CSS3Jamshid HashimiTrainer, Cresco Solutionhttp://www.jamshidhashimi.comjamshid@netlinks.af@jamshidhashimiajamshidhashimiAfghanistan WorkforceDevelopment Program
    2. 2. 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)
    3. 3. CSS3 Introduction• Cascading Style Sheets (CSS) is a style sheet languageused for describing the presentation semantics (thelook and formatting) of a document written in amarkup language. Its most common application is tostyle web pages written in HTML and XHTML.• CSS3 is completely backwards compatible, so you willnot have to change existing designs. Browsers willalways support CSS2.• The CSS3 specification is still under development byW3C• However, many of the new CSS3 properties have beenimplemented in modern browsers.
    4. 4. 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 cornersto elements.</div></body></html>CSS3 Rounded Corners(border-radius):
    5. 5. CSS3 Properties• Box-shadow• box-shadow accepts four parameters:– x-offset– y-offset– blur– color of shadowbox-shadow: 1px 1px 3px #292929;
    6. 6. 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):
    7. 7. CSS3 Properties• text-shadow– text-shadow is one of the few CSS properties that wecan omit the use of vendor-prefixes. Quite similar tobox-shadow, it must be applied to text, and receivesthe same four parameters:• x-offset• y-offest• blur• color of shadowtext-shadow: 0 1px 0 white;
    8. 8. 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>
    9. 9. CSS3 Properties• Multiple Backgrounds– The background property has been overhauled toallow for multiple backgrounds in CSS3..box {background: url(image/path.jpg) 0 0 no-repeat,url(image2/path.jpg) 100% 0 no-repeat;}
    10. 10. 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>
    11. 11. CSS3 Properties• Compensating for Older Browsers– To add a single background image for olderbrowsers, like IE7, declare the backgroundproperty twice: first for old browsers, and thesecond 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;}
    12. 12. CSS3 Properties• background-size– Another new property introduced by the CSS3Backgrounds and Borders module is background-size. The property adds new functionality to CSSallowing designers to specify the size ofbackground images using eitherlengths, percentages, or by using one of twokeywords; contain or cover.
    13. 13. CSS3 Properties#example1 {background-size: auto;}#example2 {background-size: 275px 125px;}
    14. 14. 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>
    15. 15. CSS3 Properties• text-overflow– The text-overflow property specifies what shouldhappen when text overflows the containingelement.– Did You Know? Internet Explorer has providedsupport for this property since IE6? They createdit!div.test{text-overflow:ellipsis;}
    16. 16. 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 textthat 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 thatwill not fit in the box</div></body></html>
    17. 17. CSS3 Properties• resize– The resize property specifies whether or not anelement is resizable by the user.– Note: The resize property applies to elementswhose computed overflow value is somethingother than "visible".resize: none|both|horizontal|vertical:
    18. 18. 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 isresizable by the user.</div></body></html>
    19. 19. 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/
    20. 20. HTML5 + CSS3 Demo
    21. 21. QUESTIONS?
    22. 22. Thank YOU!Come Again :)

    ×