immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Drop Shadows con CSS3

di MaiNick | 12 lug 2010 | CSS, Webdesign | 2 Commenti
drop-shadows-css3.jpg

Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem.

Pagine HTML

<div id="shadows"><!--START ID shadows-->
  <article>
    <h1>CSS3 Wrapping Drop Shadows</h1>
    <p>With <del>out any</del> minimal extra bullshit markup(You need the first child to be a container element like a header, hgroup or a div). Oh and they stretch G. Webkit only for now, although I'm sure Firefox could do this trick as well.</p>
  </article>
</div>

Foglio di stile CSS3

body {
  font-family: Helvetica Neue, Arial, Helvetica, Geneva, sans-serif;
  font-size: 13px;
  background: #3a6682;
}
div#shadows {
  position: relative;
  width: 50%; 
  margin: 20em auto;
}
article {
  background: #ccc;
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px; 
  border-radius: 4px;
  padding: 1.5em; color: rgba(0,0,0, .8); 
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;     
  display: block;
}
article:before, article:after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);   
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);	    
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);	
  position: absolute; 
  bottom: 15px; 
  z-index: -1; 
  width: 50%; 
  height: 20%; 
  content: "";       
  background: rgba(0, 0, 0, 0.7); 
}
article:after {                      
  -webkit-transform: rotate(3deg);    
  -moz-transform: rotate(3deg);   
  -o-transform: rotate(3deg);
  right: 10px; 
  left: auto;
}
article:before {                 
  -webkit-transform: rotate(-3deg);   
  -moz-transform: rotate(-3deg);  
  -o-transform: rotate(-3deg);
  right: auto;
  left: 10px;
}

Fonte Nimbupani Designs e demo.

Tags: , , , , , ,

2 Commenti

  1. Asking questions are really nice thing if you are not understanding anything entirely, but this piece
    of writing presents good understanding even.

Trackbacks

  1. [...] versione dello standard CSS introduce diversi interessanti nuovi effetti: angoli arrotondati, ombre morbide, gradienti, sostituzione di fonts e molto altro ancora. Ma, come detto, a causa del non pieno [...]

Lascia un Commento

^ Torna su