Tutorials Upload

CSS > Transparenz - CSS3 Opacity

Autor: dr.allwissend
Transparenz fŁr Elemente einstellen.

Schritt 1 - Transparenz (Deckkraft)

Transparenz wird auf Kinderelemente vererbt.
Schritt 2

Bild zu Schritt 2  -

PHP-Code

.kasten {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    background-color: #9C0;
    padding: 10px;
    margin-left: 10px;
}

.transparenz_25 {
    opacity: 0.25;
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=25); /* IE4-7 */
}
.transparenz_50 {
    opacity: 0.5;
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=50); /* IE4-7 */
}
.transparenz_75 {
    opacity: 0.75; 
    -ms-filter: "alpha(opacity=20)"; /* IE 8 */
    filter:alpha(opacity=75); /* IE4-7 */
}



Code:


Kasten ohne Transparenz

Kasten mit Transparenz (75% Sichtbar)

Kasten mit Transparenz (50% Sichtbar)

Kasten mit Transparenz (25% Sichtbar)

Schritt 3 - Transparenz RGBA

HEX2RGB Konverter
Schritt 4

Bild zu Schritt 4  -

Aber schauen wir uns das mal an einem Beispiel an:

PHP-Code

.kasten {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    background-color: #9C0;
    padding: 10px;
    margin-left: 10px;
}
.kasten_rgba {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 20px;
    background-color: rgb(153,204,0); /* fallback */
    background-color: rgba(153,204,0,0.25);
    padding: 10px;
    margin-left: 10px;
}
.text_rgba {
    color: rgb(0,0,0); /* fallback */
    color: rgba(0,0,0,0.25);
}



Code:


Kasten mit Hintergrundtransparenz / ohne Texttransparenz (RGBA - Transparenz 25%)

Kasten ohne Hintergrundtransparenz / mit Texttransparenz(RGBA - Transparenz des Texts 25%)

PHP-Code
.text_rgba 
{ 
    color: rgb(0,0,0); /* fallback */ 
    color: rgba(0,0,0,0.25); 
}

Der CSS Code wurde erfolgreich in den Browsern in Mozilla Firefox, Google Chrome, Opera und Internet Explorer 8 getestet.

Keine Bewertung.

Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: transparenz opacity css3

Kommentare

Kommentare schreiben
Um einen Kommentar zu schreiben musst du eingeloggt sein.

Noch nicht registriert?

ńhnliche Tutorials

ńhnliche Tutorials zu 'Transparenz - CSS3 Opacity'