Share
Da CSS3 robuster wird und breiter unterstützt wird, sind die Optionen für moderne Designelemente, die ohne Grafiken erstellt werden können, nahezu unbegrenzt! Für ein aktuelles Projekt habe ich beschlossen, ein zentriertes Ribbon-Banner mit reinem CSS3 zu erstellen. In diesem Tutorial erfahren Sie, wie es gemacht wurde.
Wie sich herausgestellt hat, ist es dank der Magie der border-width-Eigenschaft eigentlich ganz einfach, nur einfaches semantisches HTML und einige CSS3-Tricks zu verwenden. Einziger Vorbehalt: Wie bei allen neuen CSS3-Techniken kann es in einigen IE-Browsern etwas unkonventionell wirken? Wir werden das am Ende des Tutorials ansprechen.
Hier ist wie:
Wir möchten eine Navigations-Linkleiste erstellen. Wir beginnen mit einer einfachen ungeordneten Liste [ul] mit Links in [a]. Dies ist einer der grundlegendsten Bausteine für Markup. gut für das Erstellen von Listen von Elementen, die auf ähnliche Weise gestaltet werden sollen, wie wir es hier tun werden:
Der Code:
Wir möchten, dass die Links horizontal über die Seite verschoben werden. Daher fügen wir die folgenden Stile hinzu:
Zuerst möchten wir das Aufzählungszeichen aus den Listenelementen entfernen, sie links nebeneinander schweben lassen und ein wenig Abstand zwischen ihnen einfügen.
#navigation li list-style: none; Bildschirmsperre; Schwimmer: links; Marge: 1em;
Als Nächstes fügen wir ein wenig Textschatten hinzu, entfernen die Unterstriche des Links und fügen Textfarbe und -größe hinzu.
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0,5); Bildschirmsperre; Textdekoration: keine; Farbe: # f0f0f0; Schriftgröße: 1.6em; Marge: 0,5 em;
Ich mag es auch, ein paar sanfte Animationseffekte für Hover hinzuzufügen:
#navigation li a: hover margin-top: 2px;
Um die Sterne hinzuzufügen, habe ich eine HTML-Entität platziert ✭ (was sieht so aus?) innerhalb jedes Links. Dies ist rein dekorativ und wird für die Funktionalität nicht benötigt.
Zu diesem Zeitpunkt haben wir bereits einen schönen verwendbaren Linkbereich für die Navigation, den wir in eine Seite einfügen könnten. Aber wir werden weiterhin ein schönes Band erstellen, in das diese Links eingefügt werden können.
Die Randbreiten-Technik, die wir verwenden werden, erfordert, dass dem Markup 4 zusätzliche Elemente hinzugefügt werden. Es ist zwar nicht ideal, fremde Elemente hinzuzufügen, aber auf lange Sicht ist es wahrscheinlich immer noch effizienter als das Laden zusätzlicher Grafiken, und wir machen die Sache so einfach wie möglich.
Zuerst erstellen wir ein Containerelement um die Links. Auf diese Weise können wir eine Breite festlegen, um alle Bannerelemente zusammen zu halten:
- ✭ Link 1
- ✭ Link 2
- ✭ Link 3
- ✭ Link 4
Wir werden den folgenden Stil hinzufügen, um die Breite festzulegen und das Containerelement zu zentrieren:
#navigation_container margin: 0 auto; Breite: 960px;
Als Nächstes fügen wir das Rechteck hinzu, das der Hauptteil des Menübands sein wird:
- link 1
- Verbindung 2
- link 3
- link 4
Wir fügen die folgenden Stile hinzu, um den Hintergrund des Farbbandkörpers zu erstellen. Wir setzen einen Z-Index von 500, da das Rechteck über den Dreiecken gestapelt werden muss, die als Nächstes erstellt werden. Ich füge sowohl -moz-box-shadow als auch box-shadow zum Konto für Firefox bzw. -webkit / IE9 hinzu:
.Rechteck Hintergrund: # E5592e; Höhe: 62px; Position: relativ; -moz-box-shadow: 0px 0px 4px rgba (0,0,0,0,55); Box-Schatten: 0px 0px 4px rgba (0,0,0,0,55); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; z-Index: 500; / * Stapelreihenfolge: Vordergrund * / Marge: 3em 0;Als Nächstes fügen wir die Dreiecke an den Rändern des Farbbands hinzu:
- link 1
- Verbindung 2
- link 3
- link 4
Zum Schluss fügen wir noch etwas Magie in der Breite hinzu. Der Schlüssel dazu ist das Festlegen einer transparenten Rahmenfarbe für jede Seite des Elements mit Ausnahme der unteren (für die oberen Dreiecke) und der oberen (für die unteren Dreiecke). Dann setzen wir eine Randbreite von 50px. Dadurch entsteht ein gleichschenkliges Dreieck, das wir hinter dem Hauptkörper des Bandes positionieren werden:
.l-triangle-top border-color: # d9542b transparent transparent; Bordüre: solide; Randbreite: 50px; Höhe: 0px; Breite: 0px; Position: relativ; Schwimmer: links; oben: 1px; links: -50px; .l-triangle-bottom border-color: transparent transparent # d9542b; Bordüre: solide; Randbreite: 50px; Höhe: 0px; Breite: 0px; Position: relativ; Schwimmer: links; oben: -40px; links: -150px;Wir machen das Gleiche für die rechte Seite:
.r-triangle-top border-color: # d9542b transparent transparent; Bordüre: solide; Randbreite: 50px; Höhe: 0px; Breite: 0px; Position: relativ; schweben rechts; rechts: -45px; oben: -107px; .r-triangle-bottom border-color: transparent transparent # d9542b; Bordüre: solide; Randbreite: 50px; Höhe: 0px; Breite: 0px; Position: relativ; schweben rechts; oben: -149px; rechts: -145px;Und wir sind fertig! Dies wird in Firefox- und Webkit-Browsern perfekt dargestellt. IE ist bekanntermaßen schlecht in der Verwendung dieser CSS3-Eigenschaften, daher wird es dort nicht perfekt gerendert, aber wir werden unser Bestes tun, um es mit ein paar benutzerdefinierten Stylesheets näher zu bringen.
Für IE8 und IE9 fügen wir über das Stylesheet "ie.css" einige benutzerdefinierte Positionierungsregeln hinzu:
.L-Dreieckspitze links: 150px; oben: 50px; .l-triangle-bottom left: 50px; oben: -12px; .r-triangle-top .r-triangle-bottom oben: -169px;Um auf der sicheren Seite zu sein (und da wir an progressive Verbesserungen glauben), fügen wir auch einen Fix für IE7 hinzu, der entweder im Kopfbereich Ihrer Seite oder in einem separaten IE7-Stylesheet platziert werden kann. Ich entschied mich für ein Update, einfach die Dreiecke in Browsern unter IE8 auszublenden. Die Browserbreite-Eigenschaft wird in IE7 unterstützt, der Abstand ist jedoch etwas geringer. Es liegt an Ihnen, ob Sie die zusätzliche Zeit verwenden möchten, um die Elemente in IE7 neu zu positionieren:
Verpacken
Die Hintergrundbilder sind nur zum Spaß - Sie können eigene hinzufügen und um dieses Dokument herum bauen? Oder packen Sie einfach alles darüber und lassen Sie es in Ihr eigenes Design fallen. Um jedoch umfassend zu sein, haben wir hier das CSS, das diese Bilder hinzufügt:
html background: # 77d5fb url ('bottom_bg.jpg') unten in der Mitte keine Wiederholung; body background: transparente URL ('top_bg.png') oben in der Mitte keine Wiederholung; Breite: 100%; Höhe: 100%; Marge: 0 0;Credits: Die Bilder stammen von iStockPhoto - wir können das untere Inselbild mit der Demo nicht verteilen, aber Sie können es hier selbst erwerben.
Das ist es!
Ich hoffe, euch hat es gefallen! Denken Sie daran, dass dies eine ziemlich neue Reihe von Techniken ist? Wenn Ihr Ziel also 100% ige Stabilität bei allen bekannten Browsern ist, gibt es stabilere Möglichkeiten, dies zu erreichen, indem Sie grundlegende Bilder für den Hintergrund verwenden. Hinterlassen Sie Ihre Kommentare und Fragen unten;)
Weitere Informationen zum Erstellen eines Farbbands oder zum Falten eines Effekts finden Sie hier:
Erstellen Sie einen 3D-Ribbon-Wrap-Around-Effekt (plus eine kostenlose PSD!)
Ich dachte, es könnte Spaß machen, ein Tutorial für den beliebten 3D-Wrap-Around-Farbbandeffekt zu erstellen, der in diesem Jahr so sehr aufgetaucht ist. Dies ist eine großartige Möglichkeit, um Ihren Designs mehr Tiefe zu verleihen.
Besuchen Sie die Post
Schneller Tipp: Praktische CSS-Formen
In letzter Zeit ist es üblich, einen Falteffekt zu erzeugen, bei dem es so aussieht, als würde eine Überschrift hinter ihrem Container liegen. Dies wird im Allgemeinen durch die Verwendung von kleinen Bildern erreicht. Mit CSS können wir diesen Effekt jedoch sehr leicht nachahmen. Ich zeige dir wie in vier Minuten.
Besuchen Sie die Post
Accentsconagua
