Share
Tags sind ein bekanntes Merkmal vieler Web 2.0-Dienste, Websites und insbesondere Blogs. In diesem Lernprogramm werden wir CSS3 verwenden, um ticketähnliche Tags zu erstellen, ohne auf Bilder angewiesen zu sein.
Hier ist eine kurze Aufschlüsselung des Prozesses:
Beginnen wir mit dem Hinzufügen des Markups in der Kopf unseres Dokuments. Wir haben zwei Stylesheets hinzugefügt: "tut.css" und "tickets.css"; Sie können das erstere jederzeit entfernen, wenn Sie Ihre eigene Arbeit implementieren möchten, aber wir werden es in der Demo verwenden. Das Stylesheet "tickets.css" enthält alle Stile, mit denen unsere Tooltips formatiert werden. Hier ist unser Markenkopf für Dokumente:
Reine CSS3-Ticket-ähnliche Tags
Jetzt müssen wir das Markup für die Tags hinzufügen. Wir haben für jedes Tag eine Division mit Klassenattribut verwendet Fahrkarte die wir verwenden, um die Tags zu gestalten. Dann haben wir eine Spanne mit Klassenattribut Kreis. Zum Schluss wird ein Link mit Text für die Tags angezeigt. Hier das Markup für Tags (ich habe vier Tags als Beispiel hinzugefügt, Sie können jedoch beliebig viele hinzufügen):
CSS3HTML5DesignEntwicklung
Beginnen wir mit der Gestaltung der wichtigsten Tags div (.Fahrkarte). Hier setzen wir Schriftstile, setzen die Position auf relativ so dass wir absolute Elemente in ihr positionieren können !wichtig denn ohne das können wir nicht die gewünschten Ergebnisse erzielen.) Hintergrundfarbe links das kannst du auch einstellen Recht, dann endlich etwas Polsterung und Randabstände.
.ticket Schriftfamilie: Arial; Schriftgröße: 12px; Schriftdicke: fett; Position: relativ! wichtig; Hintergrund: # 8dc63f; Schwimmer: links; Polsterung: 7px 3px; Marge: 0 5px 5px 0;
Unsere Tags sollten so aussehen.
Jetzt gestalten wir die oberen beiden Ecken so, dass sie wie ein Viertelausschnitt eines Ausschnitts aussehen. Um dies zu erstellen, werden wir Pseudo-Elemente verwenden nach dem und Vor. Beide Pseudoelemente haben den gleichen Stil, der einzige Unterschied besteht darin nach dem ist links positioniert, während Vor ist rechts positioniert.
Setzen Sie zunächst den Inhaltswert auf "Position" absolut, z-index zu 100 oder einen großen positiven Wert, setzen Sie seine Position von oben, links oder rechts und Null. Setzen Sie den Rahmen unten und links oder rechts, und schließlich setzen wir den Randradius auf 20px (rechte untere Ecke für nach dem und unten links für Vor.
Um mehr über das Erstellen von Formen mit CSS-Rahmenstilen zu erfahren, können Sie dies anzeigen
führen.
.Ticket: nach content: ""; Position: absolut! wichtig; z-Index: 100; oben: 0; links: 0; Rahmen rechts: #fff 7px fest; border-bottom: #fff 7px fest; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; Grenzradius: 0 0 20px 0; .ticket: before content: ""; Position: absolut! wichtig; z-Index: 100; oben: 0; rechts: 0; Rahmen links: #fff 7px fest; border-bottom: #fff 7px fest; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; Grenzradius: 0 0 0 20px;
Unsere Tags sollten so aussehen.
Innerhalb der Verknüpfungen können wir nun den Effekt des Zusammennähens mithilfe von Rändern und Konturen erzeugen. Wir gestalten die Links mit einem gestrichelt 1px Umriss mit 40% transparentem Weiß, setzen Sie die Umrandung mit 30% transparentem Schwarz, Polsterung, um die Naht an den Rändern realistischer zu gestalten, keine Textdekoration, setzen Sie die Textfarbe auf 50% transparentes Weiß (damit wir dies nicht haben um die Textfarbe jedes Mal zu ändern, wenn wir die Hintergrundfarbe der Tags ändern) und den Leerraum auf setzen jetzt rappen. Schließlich setzen wir die Textfarbe für den Hover-Status auf 50% transparentes Schwarz.
.Ticket a Gliederung: 1px rgba (255,255,255,0,4) gestrichelt; Rand: 1px rgba (0,0,0,0,3) gestrichelt; Polsterung: 4px 10px 4px 20px; Textdekoration: keine; Farbe: rgba (255,255,255,0,5); Leerraum: Nowrap; .ticket a: hover color: rgba (0,0,0,0,5);
Unsere Tags sollten jetzt so aussehen. Beachten Sie, dass die beiden ausgeschnittenen Ecken auf der Naht liegen.
Für die unteren Ecken werden auch Pseudoelemente verwendet nach dem und Vor aber diesmal im link. Die Gestaltung dieser beiden Ecken ist offensichtlich ähnlich wie bei den oberen Ecken. Wir ändern lediglich die Position und den Rand, um sie an ihre Position anzupassen.
.Ticket a: after content: ""; Position: absolut! wichtig; z-Index: 100; unten: 0; links: 0; Rahmen rechts: #fff 7px fest; border-top: #fff 7px fest; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; Grenzradius: 0 20px 0 0; .ticket a: before content: ""; Position: absolut! wichtig; z-Index: 1000; unten: 0; rechts: 0; Rahmen links: #fff 7px fest; border-top: #fff 7px fest; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; Grenzradius: 20px 0 0 0;
Unsere Tags sollten jetzt so aussehen.
Im HTML-Markup haben wir bereits ein leeres span-Element mit dem Klassennamen hinzugefügt Kreis und es wird hauptsächlich verwendet, um unseren Locheffekt zu erzeugen. Wir werden Rahmen und Randradius erneut verwenden, um Kreise mit Werten für Höhe und Breite von Null zu erstellen. Wir setzen ihre Position auf absolut, Z-Index auf eine große positive Zahl, 50% von oben, 8px von links mit einem Kästchenschatten, damit er realistischer wirkt, und schließlich einen oberen Rand von -5px perfekt auf die Mitte ausrichten.
.ticket .circle position: absolut! wichtig; z-Index: 100; border: 5px #fff fest; -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; Rand oben: -5px; Breite: 0; Höhe: 0; Spitze: 50%; links: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); Box-Schatten: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3);
Unsere Tags sollten vollständig sein!
Mein Ansatz zum Erstellen dieser Tickets hat ein Problem. Die vier Ecken und das gestanzte Loch ändern ihre Farbe nicht, wenn die Hintergrundfarbe geändert wird. Mit anderen Worten, sie sind nicht transparent und Sie müssen ihre Farbe jedes Mal ändern, wenn Sie die Hintergrundfarbe ändern.
In Bezug auf die Browserkompatibilität wurde dies getestet Firefox 4.5+, Chrome 13, Opera 11 und IE9.
Ihr Endergebnis sollte wie das Bild oben aussehen. Damit Ihr Endergebnis genau wie unsere Demo aussieht, sollten Sie die Stile in "tut.css" verwenden. Sie können jedoch auch Ihre eigenen Anpassungen vornehmen.
Ich hoffe, dass Sie alle einige Techniken aus diesem CSS-Tutorial gelernt haben! Teilen Sie Ihre Gedanken unten mit :)
Accentsconagua