ByStones

Codeschnipsel - Glaseffekte #1

Ich möchte hier zeigen wie man Bilder mit einem Schriftzug versehen kann und dabei das Ganze mit einem Glaseffekt aufhübscht.

Als erstes brauchen wir ein Bild, dafür einfach im persönlichen Archiv stöbern, oder kurz in Google nachsehen. Ich hab Schloss Neuschwanstein genommen: Quelle

Als erstes brauchen wir eine Box für das Bild, also erst mal eine div-Tag angelegt und mit folgenden CSS-Eigenschaften versehen:

.glas-container {
    position:relative;
    width:600px;  /* Breite von unserem Bild */
    height:337px; /* Höhe von unserem Bild */
    background-image: url([Pfad zum Bild]);
    overflow:hidden;
}

Das position: relative ist dafür notwendig, damit wir nachher den Schriftzug positionieren können. Alles was größer ist als unser Bild wird einfach abgeschnitten, dafür sorgt overflow: hidden.
Nun erstellen wir in unserer ersten Box eine zweite, die dann den Schriftzug enthalten wird. Auch diese Box braucht wieder einige CSS-Eigenschaften:

.glas-container div {
    position:absolute;
    bottom: 10%;
    width:100%;
    padding: 5px 0px 5px 10px;
    font-size: 2.3em;

    background: #fff;
    background: rgba(255, 255, 255, 0.6);
}

Position: absolute und bottom: 10% machen, dass unsere Box im unteren Drittel des Bildes liegt. Danach kommt die Eigenschaft width mit einer Angabe von 100%, was dafür sorgt, dass unser Glas-Schriftzug die komplette Breite einnimmt. Die padding-Eigenschaft sorgt dafür, dass die Box einen Innenabstand zum Text hat, die vier Werte beziehen sich auf Innenabstand Oben (5px), Rechts (0px), Unten (5px) und Links (10px).
Zum Schluss kommen dann noch 2 background-Eigenschaften, wobei die erste nur für Browser da ist, die noch keine RGBA-Farbwerte unterstützen. Der letzte Wert (0.6) bei der zweiten background-Eigenschaft bestimmt wie transparent der Hintergrund ist. Der Wert 1 steht für "nicht transparent" und der Wert 0 steht für "vollständige Transparenz".
Der HTML-Code sieht nun folgender Masen aus:

    

        Schriftzug
    

Als Alternative zu der halb-transparenten Hintergrundfarbe kann man auch ein PNG-Bild nehmen, das eine gewisse Transparenz aufweist:

.glas-container div {
    position:absolute;
    bottom: 10%;
    width:100%;
    padding: 5px 0px 5px 10px;
    font-size: 2.3em;

    background: url([Pfad zum Bild]) repeat;
}

Hier sind 2 Beispielbilder:

• Beispiel 1:
• Beispiel 2:

So könnte das ganz dann aussehen: