Schnelle CSS3-Tricks mit Fallbacks

CSS3 kann einige wirklich coole Dinge tun. Schau dir nur die verrückten 3D-Sachen an, die du in WebKit machen kannst. Aber wie wir alle wissen, müssen wir vorsichtig sein, was wir damit machen. Die neuesten Techniken machen Spaß, aber da nur ein Bruchteil der Browser sie vollständig unterstützt, können wir sie nur unter Umständen verwenden, bei denen sie zu ansonsten vollkommen akzeptablen Stilen zurückfallen. Betrachten wir ein paar schnelle, einfache, billige Beispiele.

 

Wachsende Links

Das Skalieren eines Elements ist mit CSS3 wirklich einfach und macht Spaß. Wir brauchen kein CSS3 dafür, wir könnten relative Positionierung verwenden, die Position verschieben, die Breite, Höhe und Schriftgröße erhöhen. Aber wow, das ist eine Menge Arbeit, wenn wir einfach einen Skalierungsfaktor anwenden und fertig sind. Diese Links erhalten auf Hover auch abgerundetere Ecken und einen leichten Schatten.

.grower { 
    display: block;
    margin: 0 auto;
    width: 120px;
    padding: 2px 5px;
    border: 1px solid #2f2626;
    
    background: rgba(237,95,0,0.3); 
    -moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.grower:hover { 
    background: rgba(237,95,0,1.0);
    border-color: rgba(237,95,0,1.0);

    -moz-transform: scale(1.2); 
    -webkit-transform: scale(1.2); 
    
    -moz-box-shadow: 0 0 20px black;
    -webkit-box-shadow: 0 0 20px black;
    
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}

 

Verwischte Ränder

Mehrere Schatten hinter leicht transparentem Text können die Ränder von Text verwischen, ohne dass Bilder benötigt werden. Ein Übergang kann den Text ausblenden, die Buchstaben auseinanderziehen und auch die Schriftgröße ändern.

h3 { 
    height: 100px;
    font: bold 80px Helvetica, Sans-Serif;
    
    color: black; /* fallback */
    color: rgba(0,0,0,0.2);
    
    text-shadow: 
        0 0 2px rgba(0,0,0,0.2),
        0 0 4px rgba(0,0,0,0.2), 
        0 0 6px rgba(0,0,0,0.2); 
    -webkit-transition: all 0.2s linear;
}
h3:hover { 
    color: rgba(28, 28, 28, 0.2); 
    opacity: 0.8;
    letter-spacing: 15px; 
    font-size: 70px;
}

 

Elliptische Abrundung

Das Paradebeispiel für progressive Verbesserung ist `border-radius`. Aber wussten Sie, dass Sie nicht nur perfekt kreisförmige abgerundete Ecken erstellen müssen? Wir erstellen hier ein Oval und lassen es sich drehen, nur zum Spaß (nur WebKit… Mozilla hat die Syntax für Übergänge, wendet sie aber noch nicht an).

.oval { 
    background: #fe4902; 
    width: 200px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center;
    margin: 0 auto;
    
    /* Notice the slightly different syntax */
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px 50px;
    
    -webkit-transition: all 0.8s linear;
    -moz-transition: all 0.8s linear;  /* non functional just yet */
}
.oval:hover {
    -webkit-transform: rotate(720deg);
}

 

Mehrere Hintergründe

Wenn mehrere Hintergründe breiter unterstützt würden, wären sie eine immense Zeitersparnis. Leider können wir sie jetzt nur für optionale subtile Verbesserungen verwenden, bei denen ein Fallback auf gar nichts akzeptabel ist.

body {
    background: 
        url(../images/top-right.png) top right fixed no-repeat, 
        url(../images/top-left.png) top left fixed no-repeat, 
        url(../images/bot-left.png) bottom left fixed no-repeat, 
        url(../images/bot-right.png) bottom right fixed no-repeat;
    background-color: #2f2626;
}

 

Demo ansehen   Dateien herunterladen