Criando uma página simples de forma elegante com CSS3

Criando uma página simples de forma elegante com CSS3

by Angelo Rogério Rubin

HTML

<div class="box">
    <h1>Cow ball tip corned beef meatball</h1>
    <h2>swine filet mignon, boudin turducken ribeye shankle</h2>
    <p>Tenderloin turducken rump filet mignon, bresaola pancetta jowl brisket sirloin. Drumstick venison jowl swine kielbasa chuck, sausage leberkäse tongue rump shankle ham corned beef tail ribeye. Strip steak andouille chuck ball tip ham brisket, pancetta prosciutto shoulder drumstick short ribs. Capicola bresaola flank pork belly spare ribs shank, jerky beef ribs jowl meatball pork loin tail. Turkey boudin swine, flank fatback tenderloin corned beef t-bone ground round venison jowl short loin leberkäse drumstick. Ball tip frankfurter fatback chicken shoulder hamburger boudin, pancetta strip steak pork ham pork loin capicola turkey pastrami.</p>
</div>

CSS

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body {
    font: normal normal 10px/1em arial;
}
.box {
    width:480px;
    margin:50px 50px 50px 40px;
    padding-left: 40px;
    border-left:10px solid #bbb;
    -moz-animation: box 1400ms 1 linear;
    -webkit-animation: box 1400ms 1 linear;
    animation: box 1400ms 1 linear;
    position:relative;
  left:0;
  -moz-transition:border .3s linear; 
  -webkit-transition:border .3s linear;
  transition:border .3s linear;
}
@-moz-keyframes box {
  0% {
      left:-650px;
  }
  100% {
      left:0;
  }
}
@-webkit-keyframes box {
  0% {
      left:-650px;
  }
  100% {
      left:0;
  }
}
@keyframes box {
  0% {
      left:-650px;
  }
  100% {
      left:0;
  }
}
h1 {
    font: normal normal 6em/.8em 'WalkwayBoldRegular';
    margin:0;
    text-transform: lowercase;
    margin-bottom: .4em;
    letter-spacing: -.02em;
}
h2 {
    font-size:3em;
    font-weight: normal;
    color:#777;
    line-height:1em;
}
p {
    font-size:1.6em;
    line-height: 1.4em;
    margin-bottom:.8em;
    color:#777;
  -moz-transition:all .3s linear; 
  -webkit-transition:all .3s linear;
  transition:all .3s linear; 
}
.box:hover { 
    border-color:#F90;
    border-left-width:20px;
}
.box:hover p {color:#2b2b2b;}