Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Transparente Umrandungen mit Hilfe der border-Eigenschaft scheinen auf den ersten Blick kein Problem zu sein. In der Praxis stellt sich jedoch schnell heraus, dass es nicht so funktioniert, wie in der Theorie gedacht. Und so entstehen oft völlig überflüssige <div>-Verschachtelungen. Um euch vor solch peinlichen Konstruktionen zu bewahren, zeigen wir euch in diesem Beitrag wie es sauberer umgesetzt wird und rufen in diesem Zusammenhang die Eigenschaft background-clip in Erinnerung

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Die background-clip-Eigenschaft

Die CSS-Eigenschaft background-clip legt fest, über welche Boxen des Box Modells ein Hintergrund gerendert wird. Der Standardwert ist border-box. Daher hilft es nicht, einfach nur einen transparenten Farbwert für die Umrandung zu verwenden. Wie im folgenden Beispiel erkennbar ist, schimmert der blaue Hintergrund des <div> nach wie vor durch.

div {
 height:100px;
 width: 100px;
 background:#19667a;
 border:10px solid rgba(255,255,255,0.5);
}

transparente-borders-1

Beispiel anschauen

background-clip: padding-box;

Um den Hintergrund hinter dem Rahmen zu entfernen, muss lediglich die folgende Zeile CSS-Code hinzugefügt werden:

background-clip: padding-box;

Anschließend wird die Hintergrundfarbe nur noch über die Content- und Padding-Box gerendert; mit dem Ergebnis, dass der Rahmen transparent angezeigt wird.

transparente-borders-2

Beispiel anschauen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Daniel
    schrieb am 27.07.2016 um 13:17 Uhr:

    Hallo,

    genau das habe ich schon einmal probiert in meinem Blog. Es hat auch funktioniert und wurde so dargestellt wie ich es haben wollte. Nun aber meine Frage: Ich habe das ganze wieder rausgenommen, da ich mir somit eine Hand Voll W3C Fehler in die Seite geholt habe und laut SEO Tool kam die Fehlermeldung das ich mit veralteten Tags arbeite :-(

    Habe ich etwas falsch gemacht oder ist das normal ?

    Antworten

Schreibe einen Kommentar zu Anonymous Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: