Equivalent scrapbook

…scrap on Csshtml

media query

  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    footer{
      height: 1em;
      display: block;
      text-align: center;
    }
    @media only screen and (max-width: 640px) {
      html img{display: none;}
      html body{font-size:0.8em;}
      html footer{font-size:0.8em;margin-bottom:10px;}
      html .dialog{width: 320px;}
    }

footer fixed to botom

from http://1cog.co.uk/sandbox/footer.html and http://ryanfait.com/sticky-footer/

%html
  %body
    .wrapper
       %header 
       %article
         %p ipsum 
    %footer
      %p
        lorem

html, body
  height: 100%

  /* css trick making footer flow and stay */
  .wrapper 
    min-height: 100%
    height: auto !important
    height: 100%
    article 
      position: static /*cannot be relative or absolute ff problem*/
      padding: 0 0 80px
  footer
    margin:  -50px 0 0
    height: 20px 
    p
      text-align: center
      margin: 0

the trick is that the last element inside wrapper has padding and footer has -margin

center website with continus backround with pseudo elements

like in ipone marketing page on lovethis.com

.home_marketing_iphone
  header 
    background: none repeat scroll 0 0 #f1f1ee
    background-image: url(image-path("background.png"))
    color: white
    padding: 15px 0
    position: relative
    margin: 0 auto
    width: 960px
    &:before, &:after 
      background: none repeat scroll 0 0 #f1f1ee
      background-image: url(image-path("background.png"))
      bottom: 0
      content: ""
      position: absolute
      top: 0
      width: 9999px
    &:before 
      right: 100%
    &:after 
      left: 100%

reflection

       -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(85%, transparent), to(rgba(255,255,255,0.2)))

background glare

radio gradietnt

http://css-tricks.com/css3-gradients/

http://westciv.com/tools/radialgradients/

cool generator http://westciv.com/tools/gradients/
and another one http://www.colorzilla.com/gradient-editor/

syntax

http://www.the-art-of-web.com/css/radial-gradients/

from Steve

  article
    width: 100%
    height: 100%
    left: 0
    position: absolute
    background: #333
    background-image: -moz-radial-gradient(70% top, circle farthest-side, #555, #333 100%)
    background-image: -webkit-radial-gradient(70% -50%, circle farthest-side, #555, #333 100%)
    background-image: -ms-radial-gradient(70% -50%, circle farthest-side, #555, #333 100%)
    background-image: -o-radial-gradient(70% -50%, circle farthest-side, #555, #333 100%)
    background-image: radial-gradient(70% -50%, circle farthest-side, #555, #333 100%)

css

background

http://w3schools.com/cssref/css3_pr_background.asp

    div
    {
      background:url(smiley.gif) top left no-repeat,
      url(sqorange.gif) bottom left no-repeat,
      url(sqgreen.gif) bottom right no-repeat;
    }

todo
read mediaqueri.es
read lukew on mobile first

respnsive web design a book apart
website google : jsfiddle (tool for responsiwe web design)
twitter/rwd

moderniser

autorefresh page

<meta http-equiv="refresh" content="5" >

IE7+ supports attribute selectors:

input[type=text]
input[type=radio]
...
input[type^=ra]
input[type$=io]
input[type*=d]

source:http://stackoverflow.com/questions/470702/css-selector-for-input-type

image button css

a.favoriteButton{ 
  background:  url('/images/favoriteButton.png') no-repeat scroll left top transparent;  
  width: 79px;
  height: 22px;
  display:block;
}
a:hover.favoriteButton{ 
  background:  url('/images/favoriteButton.png') no-repeat scroll left -23px transparent;
  width: 79px;
  height: 22px;
  display:block;
}

own font

source

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }