Share
Heute werden wir die Menübenachrichtigungs-Badges von Orman Clark gestalten und mithilfe von HTML und CSS erstellen. Im Folgenden werden einige Möglichkeiten beschrieben, wie Sie den Effekt erzielen können, einschließlich der Verwendung von HTML5-Datenattributen, mit denen Sie möglicherweise nicht vertraut sind. Lass uns eintauchen!
Beginnen wir damit, etwas grundlegendes Markup einzufügen. Wir werden den HTML5-Doctype im gesamten Tutorial verwenden. Wir erstellen das Menü selbst, indem wir zuerst ein Haupt-Div und anschließend Listenelemente hinzufügen, um die einzelnen Menü-Links zu erstellen. Wir haben auch das HTML5-Shiv (oder Shim) -Skript in den Kopf unseres Dokuments eingefügt. Dies wird mit älteren Versionen von Internet Explorer ins Spiel gebracht, sodass sie HTML5-Elemente erkennen und formatieren können.
Menü-Benachrichtigungsabzeichen
Um die Struktur unseres Menüs zu erstellen, verwenden wir eine ungeordnete Liste mit 4 Listenelementen und einem Ankertag. Sie können die Liste auch in ein verschachteln Tag für die Bereitstellung.
Für diese Demonstration erstellen wir ein Div mit einer Klasse von Wrapper. Dies wird nur verwendet, um das Menü in die Mitte der Seite zu verschieben.
Ihr Markup sollte ungefähr so aussehen.
Menü-Benachrichtigungsabzeichen
- Profil
- Rahmen
- Benachrichtigungen
- Ausloggen
Bevor wir mit dem Gestalten des Menüs beginnen, fügen wir einige Rücksetzvorgänge und einige Seitengestaltungen hinzu. Wir werden zuerst einen Reset durchführen, um alle Ränder, Füllungen usw. aus dem Standard-Stylesheet des Browsers zu entfernen. Als Nächstes wenden wir dem Hintergrund eine Hintergrundfarbe und eine Schriftgröße von 16px an. Diese feste Schriftgröße stellt die Basisgröße für unsere Demo sicher. Sie können jedoch die Einstellung auf 100% festlegen, sodass der Benutzer die Schriftgröße des Browsers festlegen kann. Wir wenden eine Breite von 70% auf den Wrapper an und zentrieren ihn mit einem Rand von 200 Pixeln.
html, körper, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, del, dfn, em, font, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, zentrum, dl, dt, dd, ol, ul, li, feldset, formular, beschriftung, legende, tabelle, bildunterschrift, tbody, tfoot, thead, tr, th, td margin: 0; Polsterung: 0; Grenze: 0; Umriss: 0; Schriftgröße: 100%; vertikal ausrichten: Grundlinie; Hintergrund: transparent; body Zeilenhöhe: 1; ol, ul list-style: none; blockquote, q Anführungszeichen: keine; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus gliederung: 0; ins text-decoration: none; del text-decoration: line -through; table border-collapse: collapse; border-spacing: 0; a text-decoration: none; body background: #eded; font-size: 16px; .wrapper width: 70%; Marge: 200px auto;
Um die Gestaltung des Menüs zu beginnen, konzentrieren wir uns zunächst auf die Basis. Richten Sie zuerst die nicht geordnete Liste aus, die eine Klasse von "Menü" erhalten hat. Wir geben ihm eine Anzeige des Inline-Blocks, sodass wir die Breite / Höhe abhängig von seinem Inhalt wie ein Blockelement bestimmen können.
Als Nächstes wenden wir einen Hintergrund mit Farbverlauf mit allen Browser-Präfixen an. Fügen Sie dann einen Grenzradius hinzu, aber was sind das für Ems ?! Wir verwenden ems (anstelle von Pixeln), um den Rahmenradius relativ zur Schriftgröße zu bestimmen. Schauen Sie sich die Demo an. Der Radius wächst proportional mit dem größeren Text.
Um die Größe herauszufinden, die wir brauchen, nehmen wir 3 (unsere gewünschte Randradiusgröße in px) und teilen sie durch 16px (unsere Schriftgröße für den Körper). Also 3px / 16px = 0,188, aber wir werden auf 0,2 aufrunden.
Als Nächstes wenden wir einen einfachen grauen Rahmen und dann einen Kästchenschatten mit einem Schatten- und Einfügungsschatten an. Vergessen Sie auch nicht diese Browser-Präfixe!
.Menü Anzeige: Inline-Block; Hintergrundbild: -webkit-linearer Gradient (oben, rgb (249, 249, 249), rgb (240, 240, 240)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (249, 249, 249), rgb (240, 240, 240)); Hintergrundbild: -o-linearer Gradient (oben, rgb (249, 249, 249), rgb (240, 240, 240)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (249, 249, 249), rgb (240, 240, 240)); Hintergrundbild: linearer Gradient (oben, rgb (249, 249, 249), rgb (240, 240, 240)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0,2 em; -moz-Grenzradius: 0.2em; Grenzradius: 0,2 mm; Grenze: 1px fest #cecece; -webkit-box-shadow: Einfügung von 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-shadow: Einfügung 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); Box-Schatten: Einfügung 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06);
Lassen Sie uns nun das Menü verbessern, indem Sie die Listenelemente gestalten. Zuerst verschieben wir die Listenelemente nach links, sodass sie alle in einer Zeile und nicht aufgeführt sind. Wir werden sie dann relativ positionieren. Dies wird später benötigt, wenn wir die Abzeichen erstellen. Als nächstes fügen wir links und rechts einen Rand hinzu.
Jetzt müssen wir das erste Listenelement und das letzte Listenelement als Ziel festlegen. Dazu verwenden wir die Pseudo-Selektoren. :erstes Kind und :letztes Kind (Beachten Sie die Browser-Unterstützung, wenn Sie diese verwenden.) Beim ersten entfernen wir den linken Rand und den rechten Rand des letzten Listenelements.
.Menü li float: left; Position: relativ; Rahmen rechts: 1px fest # d8d8d8; Rahmen links: 1px fest #ffffff; .menu li: first-child border-left: none; .menu li: last-child border-right: none;
Als nächstes müssen wir die Ankertags stylen. Zuerst geben wir ihnen eine Schriftfamilie von Helvetica Neue mit einigen Font-Stapeln für Leute, die nicht die Helvetica-Schrift besitzen. Als nächstes geben wir ihnen eine Schriftgröße von 0,75em (13px / 16px = 0,75). Dann wenden wir eine Schrift mit Fettdruck an, gefolgt von einer Farbe von # 666666, und wenden einen Textschatten an.
Wir werden jetzt links und rechts von 1em (13px / 13px = 1) etwas Abstand nehmen und etwas Zeilenhöhe, um den Text vertikal zu zentrieren. Wir haben die Zeilenhöhe auf 30px bezogen und in ems interpretiert.
.menu li a Schriftfamilie: 'Helvetica Neue', Helvetica, serifenlos; Schriftgröße: 0.75em; Schriftdicke: fett; Farbe: # 666666; Text-Schatten: 0px 1px 0px #ffffff; Bildschirmsperre; Polsterung: 0 1em; Zeilenhöhe: 2.5em;
Unser Menü sieht jetzt ziemlich gut aus!
Zeit, die coolen kleinen Benachrichtigungsblasen hinzuzufügen. Zuerst müssen Sie Ihr HTML-Markup im Menü durch Folgendes ersetzen. Wir erstellen die Blasen mit Span-Tags und wenden dann für jede Farbe eine entsprechende Klasse an. Ich habe Rosa, Gelb und Blau hinzugefügt.
- Profil2
- Rahmen3
- Benachrichtigungen6
- Ausloggen
Um die Benachrichtigungsblasen zu erstellen, formatieren wir zunächst die Span-Tags mit Ausnahme der Farbe und der Randfarbe. Auf diese Weise können wir die Farben einfach ändern, indem Sie die Klassennamen einfach ändern.
Zuerst erstellen wir einige Breiten und Höhen, nehmen Sie 18px / 12px = 1.5em. Dann müssen wir sie absolut positionieren (0.5em von rechts und -2em von oben). Als nächstes wird eine Linienhöhe angewendet, um die Zahl vertikal zu zentrieren. Textausrichtung wird zum horizontalen Zentrieren verwendet.
Bei Helvetica Neue wird eine Schriftfamilie verwendet, auch für Anwender ohne Helvetica. Wir machen es fett, wenden eine weiße Farbe an und fügen dann einen Textschatten hinzu. Als nächstes fügen wir einige Box-Schatten hinzu (wir fügen zwei hinzu; einen Schlagschatten und einen Schattenschatten). Denken Sie daran, diese zu erstellen, während Sie Browser-Präfixe verwenden. Jetzt fügen wir einen Grenzradius von 4em hinzu (ungefähr 50px)..
Für die nächste Phase des Prozesses werden wir einige CSS3-Techniken nutzen und den Hover-Effekt zum Laufen bringen. Die Blase wird zunächst mit einer Deckkraft von 0 ausgeblendet. Als Nächstes werden zur Erstellung unserer coolen kleinen Animationen einige Übergänge verwendet. Wir werden die Oberkante und die Deckkraft anvisieren und sie über einen Zeitraum von 0,3 Sekunden (3 Millisekunden) anschwellen lassen. Dazu müssen die Browser-Präfixe verwendet werden, einschließlich -o- und -ms-.
span position: absolut; oben: -2em; rechts: 0,5 em; Breite: 1.5em; Höhe: 1.5em; Zeilenhöhe: 1.5em; Text ausrichten: Mitte; Familie: Helvetica Neue, Helvetica, serifenlos; Schriftdicke: fett; Farbe: #fff; Text-Schatten: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); Box-Schatten: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; Grenzradius: 4em; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); -webkit-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -Moz-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -o-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -ms-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg;
Zeit für die endgültige Ästhetik der Blasen; CSS hinzufügen, um die Farben zu gestalten. Erinnern Sie sich an die Klassen, die wir den span-Tags hinzugefügt haben? Dadurch werden die Dinge einfach genug. Wir werden jede Farbe anvisieren, einen Verlauf und eine Randfarbe anwenden.
.pink Hintergrundbild: -webkit-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -o-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); Grenze: 1px fest # ce4f5e; .yellow Hintergrundbild: -webkit-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -o-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); Grenze: 1px fest # dea94f; .blue Hintergrundbild: -webkit-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -o-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); Grenze: 1px fest # 79b5cb;
Natürlich sind unsere Blasen wunderschön gestaltet, aber völlig unsichtbar. Wir müssen CSS hinzufügen, damit die Blasen im Schwebeflug angezeigt werden. Fügen Sie zunächst den Ankertags etwas Farbe hinzu, wenn sie über dem Mauszeiger in der Schwebe gehalten werden, nur ein einfaches dunkelgrau. Als Nächstes zielen wir auf die Spanne, wenn das übergeordnete Listenelement darüber angezeigt wird. Wir fügen eine Deckkraft von 1 hinzu, um sie sichtbar zu machen, und ändern den oberen Positionswert, um den Eindruck zu erwecken, als würde er nach unten rutschen.
.menü li: hover a color: # 343434; .menu li: hover a span top: -1em; Deckkraft: 1; Filter: Alpha (Deckkraft = 100);
Was ist also mit HTML5-Datenattributen??
Ich bin froh, dass Sie gefragt haben…
Um unser Menü mit HTML5-Datenattributen zu erstellen, müssen Sie zunächst unser HTML-Markup ändern. Wir werden einige benutzerdefinierte Attribute verwenden, um die Blasen zu erzeugen. In HTML5 wurde ein neues Datenattribut eingeführt, bei dem der Attributname beliebig sein kann, solange er mindestens 1 Zeichen lang ist und mit 'data-' beginnt..
Für dieses Tutorial verwenden wir 'Datenblase'. Dadurch können wir unsere Benachrichtigungswerte speichern und darauf zugreifen, ohne dass unserem Dokument eine unnötige Markup-Struktur hinzugefügt wird. Beachten Sie, dass wir auch unsere Farbklassen auf die Ankertags verschoben haben.
- Profil
- Rahmen
- Benachrichtigungen
- Ausloggen
Da wir nicht mehr mit den span-Elementen arbeiten werden, müssen Sie zu Ihrem CSS zurückkehren und die folgenden Regeln löschen:
span position: absolut; oben: -2em; rechts: 0,5 em; Breite: 1.5em; Höhe: 1.5em; Zeilenhöhe: 1.5em; Text ausrichten: Mitte; Schriftfamilie: "Helvetica Neue"; Schriftdicke: fett; Farbe: #fff; Text-Schatten: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); Box-Schatten: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; Grenzradius: 4em; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); -webkit-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -Moz-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -o-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; -ms-Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; Übergang: .3s Top-Einstieg, .3s Deckkraft-Einstieg; .pink Hintergrundbild: -webkit-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -o-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); Grenze: 1px fest # ce4f5e; .yellow Hintergrundbild: -webkit-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -o-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); Grenze: 1px fest # dea94f; .blue Hintergrundbild: -webkit-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -o-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); Grenze: 1px fest # 79b5cb; .menu li: hover a span top: -1em; Deckkraft: 1; Filter: Alpha (Deckkraft = 100);
Lassen Sie uns stattdessen auf unsere Datenattribute abzielen, müssen wir unserem CSS einige Regeln hinzufügen.
Es wird sehr ähnlich aussehen wie bei unseren Spannelementen. Dieses Mal zielen wir jedoch auf die Pseudo-Elemente der Anker-Tags mit dem Attribut "Datenblase" ab. Zu diesem Zweck verwenden wir CSS-Attributselektoren.
Da wir ein: after Pseudo verwenden (und dadurch Inhalte erzeugen), müssen wir etwas Fleisch mit Inhalt definieren: ". Wieder verwenden wir unser benutzerdefiniertes Attribut, das wir in unserem HTML-Code erstellt haben, und fügt es ein.
Um die Sichtbarkeit unserer Blase zu bewältigen, geben wir ihr eine Deckkraft von 1, wenn der Link über den Link gezogen wird. Leider können wir sie aufgrund von Einschränkungen bei Attributselektoren nicht mit CSS selbst animieren.
.Menü li a [Datenblase]: after content: attr (Datenblase); Position: absolut; oben: -1.25em; rechts: 0,5 em; Breite: 1.5em; Höhe: 1.5em; Zeilenhöhe: 1.5em; Text ausrichten: Mitte; Schriftfamilie: "Helvetica Neue"; Schriftdicke: fett; Farbe: #fff; Text-Schatten: 0px 1px 0px rgba (0,0,0, 0,15); -webkit-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); Box-Schatten: Einfügung 0px 1px 0px rgba (255,255,255, 0,35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; Grenzradius: 4em; Deckkraft: 0; Filter: Alpha (Deckkraft = 0); .menu li: hover a [Datenblase]: nach Deckkraft: 1; Filter: Alpha (Deckkraft = 100);
Schließlich müssen wir den generierten Inhalt innerhalb der verschiedenen Klassen gestalten, damit wir die Farben leicht ändern können (genau wie bei den Spannelementen)..
a.pink [Datenblase]: nach Hintergrundbild: -webkit-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -o-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); Hintergrundbild: linearer Gradient (oben, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); Grenze: 1px fest # ce4f5e; a.yellow [Datenblase]: after Hintergrundbild: -webkit-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -o-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); Hintergrundbild: linearer Gradient (oben, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); Grenze: 1px fest # dea94f; a.blue [Datenblase]: after Hintergrundbild: -webkit-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -moz-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -o-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: -ms-linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); Hintergrundbild: linearer Gradient (oben, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); Grenze: 1px fest # 79b5cb;
Wir haben erfolgreich ein Menü mit einigen hübschen Benachrichtigungsblasen erstellt und animiert! Wir sind sogar noch weiter gegangen und haben neue Techniken in HTML5 genutzt.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
Accentsconagua