Thursday, September 23, 2010

Links to Help Me out in HTML5 stuff:

This is an HTML5 presentation by html5rocks.com/tutorials/
slides.html5rocks.com/#slide35
Slide 38: Gradient Function is AWESOME!

background: -webkit-gradient(radial, 430 50, 0, 430 50, 671, from(red), to(#000))

Shadows:

text-shadow: 
  rgba(64, 64, 64, 0.5) 
  -4px 
  0px 
  5px; 
box-shadow: 
  rgba(0, 0, 128, 0.25) 
  -4px 
  3px 
  0px; 


mas..

text-shadow: rgba(0, 0, 0, 0.5) 0 3px 3px; 

background: 
  -webkit-gradient(linear, left top, left bottom, 
                   from(rgba(200, 200, 240, 0.32)), to(rgba(255, 255, 255, 0.32)));

border-radius: 11px; 

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom, 
                   from(transparent), to(rgba(255, 255, 255, 0)));


CSS Animations:

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}


Some Demos with the code... how nice!
http://html5demos.com/

tut for layout 2.0
http://www.grafpedia.com/tutorials/web-20-photoshop-layout-tutorial

web safe fonts
http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css