Die eleganteste Methode zur Gestaltung von Innenrahmen bietet uns CSS3 mit der Regel outline bzw. outline-offset. Doch Achtung: die Regel outline-offset wird nicht vom Internet Explorer interpretiert. Das betrifft alle Versionen des IEs. Der Grund dafür liegt in der mangelhaften CSS3-Unterstützung durch den IE.Sonntag, 12. Februar 2017
CSS: Innen-Rahmen mit outline und outline-offset
Die eleganteste Methode zur Gestaltung von Innenrahmen bietet uns CSS3 mit der Regel outline bzw. outline-offset. Doch Achtung: die Regel outline-offset wird nicht vom Internet Explorer interpretiert. Das betrifft alle Versionen des IEs. Der Grund dafür liegt in der mangelhaften CSS3-Unterstützung durch den IE.img {
outline: 10px solid #8787ff;
outline-offset: -10px;
}
outline: 10px solid #8787ff;
outline-offset: -10px;
}
Die Anweisung outline erzeugt einen äußeren Rahmen, outline-offset mit Minuswerten verschiebt diesen nach innen. Im Internet Explorer wird stattdessen ein normaler Außenrahmen angezeigt. Das Ergebnis:
Live-Demo:
Original-Bild:
Das funktioniert auch in Verbindung mit CSS3-Transparenz:
img {
outline-width: 10px;
outline-style: solid;
outline-color:rgb(135,135,255);
outline-color: rgba(135,135,255,0.5);
outline-offset: -10px;
}
outline-width: 10px;
outline-style: solid;
outline-color:rgb(135,135,255);
outline-color: rgba(135,135,255,0.5);
outline-offset: -10px;
}
Zu beachten ist, dass auch die CSS3-Farbangabe rgba nicht von allen Browsern unterstützt wird. Daher sollte eine alternative rgb-Farbe vorangestellt werden.
Live-Demo:
Eine Variante für innere Rahmen, die praktisch in allen Browsern funktioniert, wird hier beschrieben: CSS: Rahmen nach innen, transparente Rahmen innen
Trackbacks
Trackback-URL für diesen Eintrag
Keine Trackbacks
Kommentare
Ansicht der Kommentare:
(Linear | Verschachtelt)
Zu diesem Artikel können leider keine Kommentare gepostet werden.
WinFuture News
