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

Css3

761

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
761
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×