Eine Bildreflektion in reinem CSS erstellen [Code Poem #24]

News
Tools
Bücher
Fotos
Impressum
Be social!
Finden

Eine Bildreflektion in reinem CSS erstellen [Code Poem #24]

Kann ich Reflektionen bei einem Bild nur mit CSS erstellen?

Ja das geht, aber nur mit proprietären CSS-Attributen:

img.reflektion {
  -webkit-box-reflect: 
    below 4px -webkit-gradient(linear, left top, left bottom, 
    from(transparent), color-stop(.7, transparent), 
    to(white));
}

Eine Bildreflektion in reinem CSS erstellen [Code Poem #24] wurde am 27. 6. 2010 um etwa 11 Uhr gepostet und am 29. 1. 2011 um etwa 16 Uhr geändert.
Design wären noch interessante Themen.
Dies könnte Dich auch interessieren: Bilder, CSS, QuellCode, Reflexion, Spiegelung.
Bis jetzt haben zwei Personen diesen Post kommentiert. Schreib auch Du einen Kommentar.

Weitere Posts zu diesem Thema

Verläufe mit CSS erstellen

Wir können zwar unsere CSS-Dateien jederzeit selber erstellen. Aber ist dies wirklich notwendig? Eigentlich nicht, wir können uns doch von dem einen [...]
Buttons im Google-Stil erstellen [Code Poem #8]

Ich hätte auch gerne die hübschen Buttons wie Google sie darstellt. Das ist mit CSS3 und ein wenig Tipparbeit im Stylesheet gar kein Problem. Aber au [...]
Den Titel eines Posts mit einem Band hinterlegen [Code Poem #7]

Ich hätte als Titel gerne ein Band über einem Hintergrund, so wie es auf dem Bild aussieht: Dies geht eigentlich ganz einfach mit den neuen Techniken [...]
Text mit CSS3 rotieren

Ich finde jetzt immer mehr Techniken um mit CSS3 und HTML (bis vor kurzem HTML 5) zu arbeiten. Immer mehr Browser untersützen jetzt die neuen Versione [...]
Einfacher Schatten mit CSS bei Bildern

Bilder lockern unseren Blog auf, dass ist sicherlich unbestritten. Auch das Design der meisten Themes pass ganz gut. Aber manchmal möchten wir einfac [...]

Der Guru 2.0 Blog lebt von Deinem Kommentar

Es existieren zwei Antworten zu diesem Post

nesQuick von [web]
schrieb am 28. 6. 2010 um etwa 23 Uhr:Cooooooooool :) Gibts sowas auch für FF? also mit-moz?

Guru 2.0 von [web]
schrieb am 29. 6. 2010 um etwa 9 Uhr:Leider nicht. Aber Du kannst sowas auch mit JavaScript nachbauen. Schau einfach mal unter http://www.andreaslinde.com/archives/2005/12/23/image-reflections-with-javascript/