• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,128
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS3 Tips & Techniques Stephanie  (Sullivan)  Rewis @stefsull September  15,  2011  |  Register  at  www.uie.com
  • 2. Don’t  go  overboard!
  • 3. Practical pseudo-classes:target  -­‐  allows  you  to  style  an  element  that  is  the  target  of  a  fragment  ID  in  the  URL
  • 4. Trigger transitions with more than :hovertextarea  {   height:  20px;            -­‐webkit-­‐transi<on:  height  .5s,  border  .5s;          -­‐moz-­‐transi<on:  height  .5s,  border  .5s;                    -­‐o-­‐transi<on:  height  .5s,  border  .5s;                              transi<on:  height  .5s,  border  .5s;}textarea:focus  {   outline:  0;   height:  250px;   border:  rgba(72,  107,  11,  .7)  9px  solid;   -­‐webkit-­‐border-­‐radius:  6px;          -­‐moz-­‐border-­‐radius:  6px;                              border-­‐radius:  6px;  }
  • 5. Pseudo-elements for StylePseudo-­‐elements  (::before  &  ::a4er)  aren’t  just  for  genera9ng  text.  These  extra  wrappers,  uneven  shadows,  double  bordered  buBons,  digital  9mer  halves  and  gradient  overlays  are  created  with  pseudo-­‐elements.
  • 6. Beyond simple rounded cornersComplete  circle:Width  and  height  are  equalRadius  equals  half  of  width/heightIf  padding  is  used—add  full  paddingUse  em  units  if  circle  contains  text.reminder  {          height:  9em;          width:  9em;          padding:  2em;      -­‐webkit-­‐border-­‐radius:  6.5em;                    -­‐moz-­‐border-­‐radius:  6.5em                                      -­‐border-­‐radius:  6.5em;}
  • 7. border-image, background-clip.nav  a  {          -­‐webkit-­‐transform:  rotate(10deg);        -­‐moz-­‐transform:  rotate(10deg);            -­‐ms-­‐transform:  rotate(10deg);                  -­‐o-­‐transform:  rotate(10deg);                            transform:  rotate(10deg);          border-­‐width:  8px;          -­‐webkit-­‐border-­‐image:  url(../img/nav.png)  8  stretch;    -­‐moz-­‐border-­‐image:  url(../img/nav.png)  8  stretch;              -­‐o-­‐border-­‐image:  url(../img/nav.png)  8  stretch;                      border-­‐image:  url(../img/nav.png)  8  stretch;          background-­‐color:  #FEFCFB;                                        padding:  3px  5px;          -­‐webkit-­‐background-­‐clip:  padding-­‐box;   -­‐moz-­‐background-­‐clip:  padding;                      background-­‐clip:  padding-­‐box;}
  • 8. Backgrounds CombinedBackground-­‐image  Gradient Background-­‐color Background-­‐image (boBom,  center,  contain)
  • 9. CSS3 Tips & Techniques Stephanie  (Sullivan)  Rewis @stefsull September  15,  2011  |  Register  at  www.uie.com