CSS3 Tips & Techniques           Stephanie	  (Sullivan)	  Rewis                  @stefsull  September  15,  2011  |  Regis...
Don’t	  go	  overboard!
Practical pseudo-classes:target	  -­‐	  allows	  you	  to	  style	  an	  element	  that	  is	  the	  target	  of	  a	  fra...
Trigger transitions with more than :hovertextarea	  {	   height:	  20px;	  	  	  	  	  	  -­‐webkit-­‐transi<on:	  height	...
Pseudo-elements for StylePseudo-­‐elements	  (::before	  &	  ::a4er)	  aren’t	  just	  for	  genera9ng	  text.	  These	  e...
Beyond simple rounded cornersComplete  circle:Width	  and	  height	  are	  equalRadius	  equals	  half	  of	  width/height...
border-image, background-clip.nav	  a	  {	  	  	  	  	  -­‐webkit-­‐transform:	  rotate(10deg);	                      	  	...
Backgrounds CombinedBackground-­‐image	  Gradient           Background-­‐color        Background-­‐image   (boBom,	  cente...
CSS3 Tips & Techniques           Stephanie	  (Sullivan)	  Rewis                  @stefsull  September  15,  2011  |  Regis...
Upcoming SlideShare
Loading in...5
×

CSS3 Tips & Techniques

4,206

Published on

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,206
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS3 Tips & Techniques

  1. 1. CSS3 Tips & Techniques Stephanie  (Sullivan)  Rewis @stefsull September  15,  2011  |  Register  at  www.uie.com
  2. 2. Don’t  go  overboard!
  3. 3. Practical pseudo-classes:target  -­‐  allows  you  to  style  an  element  that  is  the  target  of  a  fragment  ID  in  the  URL
  4. 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. 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. 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. 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. 8. Backgrounds CombinedBackground-­‐image  Gradient Background-­‐color Background-­‐image (boBom,  center,  contain)
  9. 9. CSS3 Tips & Techniques Stephanie  (Sullivan)  Rewis @stefsull September  15,  2011  |  Register  at  www.uie.com
  1. A particular slide catching your eye?

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

×