Css3

890 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
890
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Css3

    1. 1. CSS3 @EBvi
    2. 2. css3Text layout 170
    3. 3. CSS3 safari iOS4 FF4 IE8 text- shadow box- shadowborder- radiusopacity text-overflow
    4. 4. opacity border-radiusbox-shadow liner-gradient
    5. 5. opacity .op50 {FF opacity:0.5; filter:alpha(opacity=50); IE }
    6. 6. jQuery$(“#foo”).CSS({opacity:0.5});
    7. 7. IE6 opacity bugIE6 background (flicker) background<img>
    8. 8. CSS3 PIE http://css3pie.com/
    9. 9. pie.htcbehavior
    10. 10. #someid { behavior:url(/common/css/pie.htc);} ?
    11. 11. border-radius#someid { behavior:url(/common/css/pie.htc); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
    12. 12. box-shadow#someid { behavior:url(/common/css/pie.htc); -webkit-box-shadow:#bbb 0 2px 2px; -moz-box-shadow:#bbb 0 2px 2px; box-shadow:#bbb 0 2px 2px;}
    13. 13. linear-gradient#someid { behavior:url(/common/css/pie.htc); background:#fff; background: -webkit-gradient(linear, 0 0, 0 bottom,from(#fff), to(#aaa)); background: -moz-linear-gradient(#fff, #aaa); background: linear-gradient(#fff, #aaa); -pie-background: linear-gradient(#fff, #aaa);}
    14. 14. css selecterIE 6,7,8 CSS jQuery$(“input[alt]:checkbox”).css({background:”red”});
    15. 15. PIEposition:relativeDOM ( IE8)
    16. 16. display:none display:blockjQuery$(document).ready( function() { $(“.pie_class”).show();});
    17. 17. css3opacity, border-radius, box-shadow,linear-gradient

    ×