Preistabelle mit CSS3 implementiert

<div id="Preistabelle" Klasse="clear">
    <div Klasse="Plan">
        <h3>Unternehmen<span>59 $</span></h3>
        <a class="signup" href="">Anmelden</a>         
        <ul>
            <li><b>10 GB</b> Festplattenspeicher</li>
            <li><b>100 GB</b> monatliche Bandbreite</li>
            <li><b>20</b> E-Mail-Konten</li>
			<li><b>Unbegrenzte</b> Subdomains</li>			
        </ul> 
    </div>
    <div Klasse="Plan" id="am beliebtesten">
        <h3>Professionell<span>29 $</span></h3>
        <a class="signup" href="">Anmelden</a>        
        <ul>
            <li><b>5 GB</b> Festplattenspeicher</li>
            <li><b>50 GB</b> monatliche Bandbreite</li>
            <li><b>10</b> E-Mail-Konten</li>
			<li><b>Unbegrenzte</b> Subdomains</li>			
        </ul>    
    </div>
    <div Klasse="Plan">
        <h3>Standard<span>17 USD</span></h3>
		<a class="signup" href="">Anmelden</a>
        <ul>
            <li><b>3 GB</b> Festplattenspeicher</li>
            <li><b>25 GB</b> monatliche Bandbreite</li>
            <li><b>5</b> E-Mail-Konten</li>
			<li><b>Unbegrenzte</b> Subdomains</li>			
        </ul>
    </div>
    <div Klasse="Plan">
        <h3>Basis<span>9 $</span></h3>
        <a class="signup" href="">Anmelden</a>		
        <ul>
            <li><b>1 GB</b> Festplattenspeicher</li>
            <li><b>10 GB</b> monatliche Bandbreite</li>
            <li><b>2</b> E-Mail-Konten</li>
			<li><b>Unbegrenzte</b> Subdomains</li>			
        </ul>
    </div> 	
</div>

Körper{
  Hintergrund: #303030;
}

#Preistabelle {
	Rand: 100px automatisch;
	Textausrichtung: zentriert;
	Breite: 892px; /* Gesamte berechnete Breite = 222 x 3 + 226 */
}

#Preistabelle .plan {
	Schriftart: 12px „Lucida Sans“, „Trebuchet MS“, Arial, Helvetica;
	Textschatten: 0 1px rgba(255,255,255,.8);        
	Hintergrund: #fff;      
	Rand: 1px durchgezogen #ddd;
	Farbe: #333;
	Polsterung: 20px;
	Breite: 180px; /* Planbreite = 180 + 20 + 20 + 1 + 1 = 222px */      
	schweben: links;
	Position: relativ;
}

#Preistabelle #beliebteste {
	Z-Index: 2;
	oben: -13px;
	Rahmenbreite: 3px;
	Polsterung: 30px 20px;
	-moz-Randradius: 5px;
	-Webkit-Randradius: 5px;
	Rahmenradius: 5px;
	-moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
	Kastenschatten: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);    
}

#Preistabelle .plan:nth-child(1) {
	-moz-Randradius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
	Rahmenradius: 5px 0 0 5px;        
}

#Preistabelle .plan:nth-child(4) {
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	Rahmenradius: 0 5px 5px 0;        
}

/* ------------------- */	

#Preistabelle h3 {
	Schriftgröße: 20px;
	Schriftstärke: normal;
	Polsterung: 20px;
	Rand: -20px -20px 50px -20px;
	Hintergrundfarbe: #eee;
	Hintergrundbild: -moz-linear-gradient(#fff,#eee);
	Hintergrundbild: -webkit-gradient(linear, links oben, links unten, von(#fff), bis(#eee));    
	Hintergrundbild: -webkit-linear-gradient(#fff, #eee);
	Hintergrundbild: -o-linear-gradient(#fff, #eee);
	Hintergrundbild: -ms-linear-gradient(#fff, #eee);
	Hintergrundbild: linearer Farbverlauf (#fff, #eee);
}

#Preistabelle #beliebteste h3 {
	Hintergrundfarbe: #ddd;
	Hintergrundbild: -moz-linear-gradient(#eee,#ddd);
	Hintergrundbild: -webkit-gradient(linear, links oben, links unten, von(#eee), bis(#ddd));    
	Hintergrundbild: -webkit-linear-gradient(#eee, #ddd);
	Hintergrundbild: -o-linear-gradient(#eee, #ddd);
	Hintergrundbild: -ms-linear-gradient(#eee, #ddd);
	Hintergrundbild: linearer Farbverlauf (#eee, #ddd);
	Rand oben: -30px;
	Polsterung oben: 30px;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	Rahmenradius: 5px 5px 0 0; 		
}

#Preistabelle .plan:nth-child(1) h3 {
	-moz-Randradius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	Rahmenradius: 5px 0 0 0;       
}

#Preistabelle .plan:nth-child(4) h3 {
	-moz-Randradius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	Rahmenradius: 0,5px 0,0;       
}	

#Preistabelle h3 span {
	Anzeige: Block;
	Schriftart: fett 25px/100px Georgia, Serif;
	Farbe: #777;
	Hintergrund: #fff;
	Rand: 5px durchgezogen #fff;
	Höhe: 100px;
	Breite: 100px;
	Rand: 10px auto -65px;
	-moz-Randradius: 100px;
	-Webkit-Randradius: 100px;
	Rahmenradius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd Einschub, 0 3px 0 #999 Einschub;
	-webkit-box-shadow: 0 5px 20px #ddd Einschub, 0 3px 0 #999 Einschub;
	Box-Schatten: 0 5px 20px #ddd Einschub, 0 3px 0 #999 Einschub;
}

/* ------------------- */

#Preistabelle ul {
	Rand: 20px 0 0 0;
	Polsterung: 0;
	Listenstil: keiner;
}

#Preistabelle li {
	Rahmen oben: 1px durchgezogen #ddd;
	Polsterung: 10px 0;
}

/* ------------------- */
	
#Preistabelle .Anmeldung {
	Position: relativ;
	Polsterung: 8px 20px;
	Rand: 20px 0 0 0;  
	Farbe: #fff;
	Schriftart: fett 14px Arial, Helvetica;
	Texttransformation: Großbuchstaben;
	Textdekoration: keine;
	Anzeige: Inline-Block;       
	Hintergrundfarbe: #72ce3f;
	Hintergrundbild: -moz-linear-gradient(#72ce3f, #62bc30);
	Hintergrundbild: -webkit-gradient(linear, links oben, links unten, von(#72ce3f), bis(#62bc30));    
	Hintergrundbild: -webkit-linear-gradient(#72ce3f, #62bc30);
	Hintergrundbild: -o-linear-gradient(#72ce3f, #62bc30);
	Hintergrundbild: -ms-linear-gradient(#72ce3f, #62bc30);
	Hintergrundbild: linearer Farbverlauf (#72ce3f, #62bc30);
	-moz-Randradius: 3px;
	-Webkit-Randradius: 3px;
	Rahmenradius: 3px;     
	Textschatten: 0 1px 0 rgba(0,0,0,.3);        
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
	Kastenschatten: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}

#Preistabelle .Anmeldung:Hover {
	Hintergrundfarbe: #62bc30;
	Hintergrundbild: -moz-linear-gradient(#62bc30, #72ce3f);
	Hintergrundbild: -webkit-gradient(linear, links oben, links unten, von(#62bc30), bis(#72ce3f));      
	Hintergrundbild: -webkit-linear-gradient(#62bc30, #72ce3f);
	Hintergrundbild: -o-linear-gradient(#62bc30, #72ce3f);
	Hintergrundbild: -ms-linear-gradient(#62bc30, #72ce3f);
	Hintergrundbild: linearer Farbverlauf (#62bc30, #72ce3f); 
}

#Preistabelle.Anmeldung:aktiv, #Preistabelle.Anmeldung:Fokus {
	Hintergrund: #62bc30;       
	oben: 2px;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) Einschub;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) Einschub;
	Box-Schatten: 0 0 3px rgba(0, 0, 0, .7) Einschub; 
}

/* ------------------- */

.clear:vorher, .clear:nachher {
  Inhalt:"";
  Anzeige:Tabelle
}

.klar:nach {
  klar: beide
}

.klar {
  Zoom: 1
}