CSS Tipps und CSS3 Technik

Das Border-Verhalten von Browsern bietet eine Möglichkeit Kanten und dreieckige Elemente darstellen zu können. Hiermit ist also eine weitere Gestaltungsmöglichkeit neben CSS3 möglich. Die Technik wird auch mit älteren Browsern wie dem Internet Explorer 6 unterstützt und kann somit beliebig eingesetzt werden. Im Folgenden werde ich kurz ein kleines Beispiel für die Gestaltung dieser Kanten zeigen. Anlass für dieses Tutorial hat mir ein Artikel auf net.tutsplus.com gegeben. Wer Anmerkungen oder Vorschläge zur Verbesserung hat kann sich gerne melden.

Hier nun erst einmal die Grundlegende CSS Gestaltung:

.shadow{ border-right:70px solid #666; border-bottom:50px solid transparent; line-height: 0; width:0px; height:0px; position: relative; left:-70px; }
.content{ width:400px; border:1px solid #AAA; float:left; margin-left:70px; margin-bottom:30px; }
h1{ font-family: helvetica, arial, sans-serif; background-color:#444; color:#FFF; position: relative; width: 70%; left:-20px; padding: 5px; padding-left:10px; margin: 0px; margin-top:20px; }
.arrow{ width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #555; position: relative; left:-20px; }
<div class="content"> <h1>Überschrift</h1> <div class="arrow"></div> <p>Textinhalt</p> <div class="shadow">&nbsp;</div> </div> Das ergibt folgendes Ergebnis: Einfache Gestaltung Wenn jetzt noch ein wenig CSS3 mit ins Spiel kommt erhalten wir dieses Ergebnis: Gestaltet mit CSS3 /*CSS 3 Aenderungen*/ .content{ -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } h1{ background: -moz-linear-gradient(top, #555, #333); background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); -moz-box-shadow: 2px 1px 5px #444; -webkit-box-shadow: 2px 1px 5px #444; box-shadow: 2px 1px 5px #444; text-shadow: 1px 1px 2px #777; }

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s