Share
Hey Jungs, heute werden wir die Tagtastic Tag Cloud von Premium Pixels erstellen. Als Experiment in alternativen Ansätzen erstellen wir die Tags mit Farbverläufen, Schatten und (am wichtigsten) CSS-Transformationen, die den Punkt jedes Tags bilden. Nach Fertigstellung gehen wir noch einen Schritt weiter und sorgen für IE.
Wir haben bereits Tags auf Webdesigntuts + behandelt, aber bei dieser Gelegenheit werden wir eine alternative Methode zum Erstellen aller zusammengesetzten Bits und Teile untersuchen. Es gibt vielleicht schärfere Wege, um den Effekt zu erzeugen, aber unser Beispiel wird von Bildern Abstand nehmen, verwenden sehr Sauberes Markup und etwas ungewöhnliches Styling. Lass uns reinstecken!
Beginnen wir mit einem einfachen Markup, einschließlich des bekannten HTML5-Doctype. Wir beziehen uns auch auf unser Stylesheet im Kopf unseres Dokuments.
Für dieses Tutorial erstellen wir einen Wrapper / Container für unsere Tags. Sie werden höchstwahrscheinlich etwas Ähnliches benötigen, wenn Sie diese zum Beispiel in einer Blog-Sidebar verwenden.
Für unsere erstellen wir einfach ein div mit einer Klasse von Wrapper und wenden eine Breite von an 340px und eine Marge von 50px auto um den Wrapper auf der Seite zu zentrieren. Ich habe 50px anstelle von 0 hinzugefügt, nur um ein wenig Rand oben hinzuzufügen, damit unsere Tags nicht den oberen Rand des Browserfensters berühren. Beim Einfügen in dieses CSS fügen wir ein paar Stylings für den Körper hinzu (z. B. ein Hintergrundbild) und wenden einen Reset an.
html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, und adresse, zitieren, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, dl, dt, dd, ol, ul, li, fieldset, form, label, legende, tabelle, caption, tbody, tfoot, thead, tr, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hgroup, menü, nav, ausgabe, rubin, abschnitt, zusammenfassung, time, mark, audio, video, input, textarea, select background: transparent; border: 0; font-size: 100%; margin: 0; gliederung: 0; padding: 0; vertical-align: baseline -Artikel Details, figcaption, figure, footer, header, hgroup, menu, nav, section display: block body Zeilenhöhe: 1 blockquote, q Anführungszeichen: keine blockquote: before, blockquote: after, q: before , q: nach content: none
body Schriftfamilie: 'Helvetica Neue', Helvetica, Arial, serifenlos; Schriftgröße: 16px; Hintergrund: URL (… /images/bg.jpg) Wiederholung; -webkit-font-smoothing: antialiased; .wrapper max-width: 340px; Marge: 50px auto;
Ich habe diese Tags sehr einfach strukturiert. Alles, was wir verwenden werden, ist ein Anker-Tag (eine logische Wahl, da diese wahrscheinlich als Links zu irgendwo oder etwas fungieren). Für dieses Tutorial habe ich ihm eine Klasse von "Tags" gegeben, aber dies kann beliebig geändert werden.
hohe Auflösung
Richtig, weiter zum nächsten Teil! Wir beginnen jetzt mit der Gestaltung des Tags - hier gibt es eine Menge Code, aber lassen Sie sich nicht verwirren, ich erkläre, was los ist.
Ich habe hier zuerst einige grundlegende Sachen hinzugefügt;
Als Nächstes haben wir einige Schriftarteinstellungen, Größe, Familie und Gewichtung definiert, gefolgt von einer Farbe und einem Textschatten. Danach haben wir etwas aufgefüllt, indem wir ems verwenden, so dass alles in Bezug auf die Schriftgröße des Körpers oder die Schriftgröße des Browsers steht. Als nächstes eine einfache Umrandung, obwohl wir links keinen angelegt haben. Die Ems sind wieder aufgetaucht! Diesmal wenden wir sie auf den Randradius an, jedoch nur auf die oberen rechten und unteren rechten Ecken. Okay, bist du noch wach? Es gibt noch mehr… Als Nächstes verwenden wir einige CSS3-Farbverläufe (ich habe die ordentliche Verlaufs-App zur Berechnung der Werte verwendet). Der letzte Teil besteht aus einigen Kastenschatten, einem Einfügungs- und Schlagschatten. Erinnere dich an diese Präfixe!
.tag float: left; Marge: 0 0 7px 20px; Position: relativ; Schriftfamilie: 'Helvetica Neue', Helvetica, Arial, serifenlos; Schriftgröße: 0.75em; Schriftdicke: fett; Textdekoration: keine; Farbe: # 996633; Textschatten: 0px 1px 0px rgba (255,255,255, .4); Polsterung: 0,417em 0,417em 0,417em 0,917em; Border-Top: 1px fest # d99d38; Rahmen rechts: 1px fest # d99d38; Rahmen unten: 1px fest # d99d38; -webkit-border-radius: 0 0,25 em 0,25 em 0; -moz-border-radius: 0 0,25 em 0,25 em 0; Grenzradius: 0 0,25em 0,25em 0; Hintergrundbild: -webkit-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: -o-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: Einfügung 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: Einfügung 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); Box-Schatten: Einfügung 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-Index: 100;
Okay, wir haben den Hauptteil des Tags abgeschlossen. Der nächste Teil ist das Erstellen des Pfeils. Um dies hinzuzufügen, verwenden wir die :Vor Pseudoelement. Wir werden hier auch mit einigen fortgeschrittenen Techniken von CSS experimentieren. Transformationen. Das Erstellen dieser Pfeile war mit vielen Versuchen und Fehlern verbunden. Ich musste verschiedene Breiten und Höhen ausprobieren und oben und unten positionieren, um es so perfekt wie möglich zu machen! Jede Rückmeldung ist daher sehr willkommen…
Wir haben den gleichen Hintergrundverlauf wie zuvor verwendet, jedoch mit einer geringfügigen Änderung: Da wir das Quadrat, das wir gerade erstellen, drehen werden, müssen wir auch den Verlauf so drehen, dass er mit dem Hauptteil des übereinstimmt Etikett. Die Verlaufs-App war hilfreich, um die Richtung des Verlaufs ändern zu können. Der nächste Teil besteht darin, links und unten einige Ränder zu erstellen. In Bezug auf den Pfeil bleibt nur noch ein Randradius, um den Punkt zu glätten und schließlich unsere Transformationen anzuwenden. Wir drehen das Quadrat, das wir erstellt haben, um 45 Grad, sodass es wie ein Pfeil aussieht. Wir haben gebraucht verwandeln: 45; zusammen mit den vorangestellten.
.Tag: before content: "; Breite: 1.30em; Höhe: 1.358em; Hintergrundbild: -webkit-linearer Gradient (oben links, rgb (254, 218, 113), rgb (254, 186, 71)) ; Hintergrundbild: -moz-linearer Gradient (links oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: -o-linearer Gradient (links oben, rgb ( 254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: -ms-linearer Gradient (links oben, rgb (254, 218, 113), rgb (254, 186, 71)); Hintergrundbild: linearer Gradient (links oben, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71') , EndColorStr = "# feba47"); Position: absolut; links: -0.69em; oben: .2em; -webkit-transform: drehen (45 Grad); -moz-transform: Drehen (45 Grad); -o-transform: drehen (45 Grad); transformieren: drehen (45 Grad); Rand links: 1px fester # d99d38; Rand unten: 1px fester # d99d38; -webkit-Randradius: 0 0 0 0,25 em; -moz-Randradius: 0 0 0 0,25em; Grenzradius: 0 0 0 0,25em; Z-Index: 1;
Sie sollten jetzt etwas ähnliches wie das Folgende haben; Hinweis Ich habe vergrößert, sodass Sie sehen können, wo der Pfeil mit dem Hauptteil verbunden ist. Dies ist bei normaler Größe kaum zu bemerken.
Der letzte Teil unseres Tags besteht darin, das kleine Loch darauf zu erstellen. Hier verwenden wir wieder ein Pseudo, diesmal jedoch das :nach dem Element. Was wir getan haben, um das Loch zu schaffen, ist ziemlich einfach. Wir haben Breite und Höhe in Ems definiert, damit sie reibungslos wächst. Als Nächstes haben wir einen großen Umrandungsradius hinzugefügt, der einen Kreis mit einem Umrandungsbereich erstellt. Anschließend haben wir einen Schlagschatten hinzugefügt, der dem Textschatten ähnelt. Endlich haben wir es positioniert (bei Verwendung von ems).
.tag: after content: "; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid # -d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolut; oben: 0,667 em; links: -0,083em; z-Index: 9999;
Um unsere Tags noch schöner zu gestalten, fügen wir einige Hover-Stile hinzu. Wir müssen dies dem Hauptteil des Tags und dem Pfeil hinzufügen (während Sie daran denken, den Verlauf für den Pfeil zu drehen). Wir haben auch die Rahmenfarbe bei beiden geändert.
.Tag: hover Hintergrundbild: -webkit-linearer Gradient (oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -o-linearer Gradient (oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: linearer Gradient (oben, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); Rahmenfarbe: # e1b160; .tag: hover: vor Hintergrundbild: -webkit-linearer Gradient (oben links, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -moz-linearer Gradient (links oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -o-linearer Gradient (links oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: -ms-linearer Gradient (links oben, rgb (254, 225, 141), rgb (254, 200, 108)); Hintergrundbild: linearer Gradient (links oben, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); Rahmenfarbe: # e1b160;
Wenn Sie Ihre Tags immer noch in voller Pracht für IE-Benutzer anzeigen möchten, müssen Sie bei diesen Tags einen anderen Ansatz wählen, indem Sie zunächst ein IE-spezifisches Stylesheet erstellen. Ich erkläre warum… Erstens funktionieren viele unserer CSS3-Effekte in früheren Versionen als IE9 nicht (nur ein paar davon funktionieren in IE9), aber das Hauptproblem hier sind Transformationen, die nicht funktionieren werden. Um auf IE-Benutzer einzugehen, bearbeiten wir unseren Code ein wenig. Wir fangen damit an, zuerst unseren HTML-Code zu ändern, indem Sie den HTML-Code ersetzen Verpackung div und alles drin mit:
hohe Auflösung
Wir verwenden wieder ein Anker-Tag, jedoch mit 3 Feldern. Wir benötigen einen, um den Pfeil, den Hauptteil und das Ende mit dem Grenzradius zu erstellen.
Um sicherzustellen, dass unsere Tags in IE funktionieren, müssen wir Bilder verwenden. Beginnen Sie mit dem Löschen aller Elemente unterhalb der .wrapper-Stile. Sie müssen nun das folgende Snippet einfügen. Wir wenden hier lediglich einige Hintergrundbilder an, wiederholen aber auch den Texthintergrund auf der X-Achse, da der Text eine beliebige Länge haben kann! Auch Supercalafragalisticexpialadoshus!
.Pfeil Breite: 15px; Höhe: 25px; Schwimmer: links; Hintergrund: URL (… /images/arrow.png) keine Wiederholung; .text height: 25px; Schwimmer: links; Polsterung links: 4px; Polsterung rechts: 4px; Hintergrund: URL (… /images/text.png) repeat-x; Schriftfamilie: 'Helvetica Neue', Helvetica, Arial, serifenlos; Schriftgröße: 0.75em; Schriftdicke: fett; Farbe: # 996633; Textschatten: 0px 1px 0px rgba (255,255,255, .4); Zeilenhöhe: 23px; .end width: 4px; Höhe: 25px; Schwimmer: links; Hintergrund: URL (… /images/end.png) keine Wiederholung; .tag: hover .arrow background-image: url (… /images/arrow_hover.png); .tag: hover .text Hintergrundbild: URL (… /images/text_hover.png); .tag: hover .end Hintergrundbild: URL (… /images/end_hover.png);
Das war's! Das ist ein weiteres Tutorial, und es sieht gut aus! Wir haben diese Tagtastic-Tags mit CSS zusammengestellt und gleichzeitig auf IE eingestellt. Diese Tags können für alle möglichen Dinge verwendet werden - verwenden Sie sie in einer Seitenleiste, einem Blog oder was auch immer Sie möchten!
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen.
Accentsconagua