() translation by (you can also view the original English article)
Heute werden wir Orman Clarks Menu Notification Badges entwerfen und es mit HTML und CSS erstellen. Wir werden uns einige Möglichkeiten ansehen, um den Effekt zu erzielen, einschließlich der Verwendung von HTML5-Datenattributen, mit denen Sie möglicherweise nicht vertraut sind. Lass uns eintauchen!
Schritt 1: HTML5-Basismarkierung
Beginnen wir damit, ein paar grundlegende Markups einzuwerfen. Wir verwenden den HTML5 Doctype während des gesamten Tutorials. Wir erstellen das Menü selbst, indem wir zuerst ein Hauptdiv gefolgt von Listenelementen hinzufügen, die jeden Menülink 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 in Verbindung gebracht, die HTML5-Elemente erkennen und formatieren können.
1 |
|
2 |
<!DOCTYPE html>
|
3 |
<html>
|
4 |
<head>
|
5 |
|
6 |
<!--Meta tags-->
|
7 |
<meta charset="utf-8"> |
8 |
|
9 |
<!--Title-->
|
10 |
<title>Menu Notification Badges</title> |
11 |
|
12 |
<!--Stylesheets-->
|
13 |
<link rel="stylesheet" href="styles.css"> |
14 |
|
15 |
<!--HTML5 Shiv-->
|
16 |
<!--[if lt IE 9]>
|
17 |
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
18 |
<![endif]-->
|
19 |
|
20 |
</head>
|
21 |
<body>
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
</body>
|
30 |
</html>
|
Schritt 2: Menüauszeichnung
Um die Struktur unseres Menüs zu erstellen, verwenden wir eine ungeordnete Liste mit 4 Listenelementen und einem Anker-Tag. Sie können die Liste auch in einem-Tag für die Bereitstellung verschachteln.
Für diese Demonstration erstellen wir ein div um das Menü mit einer Wrapper-Klasse. Dies wird nur verwendet, um das Menü in die Mitte der Seite zu verschieben.
Ihr Markup sollte ungefähr so aussehen.
1 |
|
2 |
<!DOCTYPE html>
|
3 |
<html>
|
4 |
<head>
|
5 |
|
6 |
<!--Meta tags-->
|
7 |
<meta charset="utf-8"> |
8 |
|
9 |
<!--Title-->
|
10 |
<title>Menu Notification Badges</title> |
11 |
|
12 |
<!--Stylesheets-->
|
13 |
<link rel="stylesheet" href="styles.css"> |
14 |
|
15 |
<!--HTML5 Shiv-->
|
16 |
<!--[if lt IE 9]>
|
17 |
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
18 |
<![endif]-->
|
19 |
|
20 |
</head>
|
21 |
<body>
|
22 |
|
23 |
|
24 |
|
25 |
<div class="wrapper"> |
26 |
<ul class="menu"> |
27 |
<li><a href="#">Profile</a></li> |
28 |
<li><a href="#">Setting</a></li> |
29 |
<li><a href="#">Notifications</a></li> |
30 |
<li><a href="#">Logout</a></li> |
31 |
</ul>
|
32 |
</div>
|
33 |
|
34 |
|
35 |
|
36 |
</body>
|
37 |
</html>
|
Schritt 3: Einige grundlegende CSS
Bevor wir mit dem Formatieren des Menüs beginnen, fügen wir einige Resets und einige Seitenstylings hinzu. Wir werden zunächst einen Reset einleiten, um alle Ränder, Abstände usw. vom Standard-Stylesheet des Browsers zu entfernen. Als nächstes werden wir eine Hintergrundfarbe auf den Körper und eine Schriftgröße von 16px anwenden. Diese feste Schriftgröße stellt die Grundgröße für unsere Demo sicher, Sie können es jedoch vorziehen, sie auf 100% zu setzen, damit der Benutzer seine Browserschriftgröße definieren kann. Wir werden eine Breite von 70% auf den Wrapper anwenden und ihn mit einem Rand von 200px zentrieren.
1 |
|
2 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; backound: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; } |
3 |
|
4 |
body { background:#ededed; font-size:16px; } |
5 |
|
6 |
|
7 |
|
8 |
.wrapper { |
9 |
width: 70%; |
10 |
margin: 200px auto; |
11 |
}
|
Schritt 4: Menü Basis Stile
Um das Menü zu starten, konzentrieren wir uns zunächst auf die Basis. Wählen Sie zuerst die nicht geordnete Liste aus, die eine Klasse von "Menü" erhalten hat. Wir geben ihm eine Anzeige von Inline-Block, so dass wir die Breite / Höhe davon abhängig von seinem Inhalt wie ein Blockelement bestimmen können.
Als Nächstes werden wir einen Verlaufshintergrund mit allen Browserpräfixen anwenden. Dann fügen Sie einen Randradius hinzu, aber hey, was sind diese ems ?! Wir verwenden ems (anstelle von Pixeln), um den Randradius relativ zur Schriftgröße zu bestimmen. Schau dir die Demo an. Sie werden sehen, dass der Radius proportional mit dem größeren Text wächst.
Um die Größe zu berechnen, die wir brauchen, nehmen wir 16px (unsere Körperschriftgröße) und teilen sie durch 3 (unsere gewünschte Randradiusgröße in px). Also 16px / 3px = 0,188, aber wir werden das auf 0,2 runden.
Als Nächstes werden wir einen einfachen grauen Rahmen und dann einen Box-Schatten mit einem Tropfen und einem eingefügten Schatten anwenden. Vergessen Sie nicht auch diese Browserpräfixe!
1 |
|
2 |
.menu { |
3 |
display: inline-block; |
4 |
|
5 |
background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240)); |
6 |
background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240)); |
7 |
background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240)); |
8 |
background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240)); |
9 |
background-image: linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240)); |
10 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0'); |
11 |
|
12 |
-webkit-border-radius:0.2em; |
13 |
-moz-border-radius:0.2em; |
14 |
border-radius:0.2em; |
15 |
|
16 |
border:1px solid #cecece; |
17 |
|
18 |
-webkit-box-shadow: |
19 |
inset 0px 1px 0px #fff, |
20 |
0px 1px 2px rgba(0,0,0,.06); |
21 |
-moz-box-shadow: |
22 |
inset 0px 1px 0px #fff, |
23 |
0px 1px 2px rgba(0,0,0,.06); |
24 |
box-shadow: |
25 |
inset 0px 1px 0px #fff, |
26 |
0px 1px 2px rgba(0,0,0,.06); |
27 |
}
|
Schritt 5: Elemente auflisten
Weiter geht es mit dem Verbessern des Menüs, indem Sie die Listenelemente formatieren. Zuerst werden die Listenelemente nach links verschoben, sodass sie alle in einer Zeile stehen und nicht aufgelistet 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 einen Rahmen und rechts einen Rahmen hinzu.
Jetzt müssen wir das erste Listenelement und das letzte Listenelement anvisieren, also tun wir dies mit den Pseudo Selektoren; : first-child und: last-child (bei der Verwendung der Browser-Unterstützung beachten. Bei der ersten werden wir den linken Rand entfernen und den rechten Rahmen vom letzten Listenelement entfernen.
1 |
|
2 |
.menu li { |
3 |
float:left; |
4 |
position:relative; |
5 |
|
6 |
border-right:1px solid #d8d8d8; |
7 |
border-left:1px solid #ffffff; |
8 |
}
|
9 |
.menu li:first-child { border-left:none; } |
10 |
.menu li:last-child { border-right:none;} |
Schritt 6: Anker Tags
Als nächstes müssen wir die Anker-Tags formatieren. Zuerst geben wir ihnen eine Font-Familie von Helvetica Neue mit einigen Font-Stack-Fallbacks für Leute, die nicht die Helvetica-Schriftart haben. Als nächstes geben wir ihnen eine Schriftgröße von 0.75em (13px / 16px = 0.75). Dann wenden wir eine Schriftstärke von fett, gefolgt von einer Farbe von # 666666 an und wenden einen Textschatten an.
Wir werden jetzt eine Auffüllung links und rechts von 1em (13px / 13px = 1) und etwas Zeilenhöhe anwenden, um den Text vertikal zu zentrieren. Wir werden jetzt eine Auffüllung links und rechts von 1em (13px / 13px = 1) und etwas Zeilenhöhe anwenden, um den Text vertikal zu zentrieren.
1 |
|
2 |
.menu li a { |
3 |
font-family:'Helvetica Neue', Helvetica, sans-serif; |
4 |
font-size:0.75em; |
5 |
font-weight:bold; |
6 |
color:#666666; |
7 |
text-shadow:0px 1px 0px #ffffff; |
8 |
|
9 |
display: block; |
10 |
padding:0 1em; |
11 |
line-height:2.5em; |
12 |
}
|
Wir haben die Zeilenhöhe auf 30px festgelegt und in ems interpretiert. Unsere Speisekarte fängt jetzt an, ziemlich gut auszusehen! Anchor-Tag-Stile
Schritt 7: Benachrichtigungsblasen-Markup
Zeit, die coolen kleinen Benachrichtigungsblasen hinzuzufügen. Zunächst müssen Sie das HTML-Markup Ihres Menüs durch Folgendes ersetzen. Wir erstellen die Blasen mithilfe von span-Tags. Für jede Farbe wird dann eine geeignete Klasse angewendet. Ich habe Rosa, Gelb und Blau hinzugefügt.
1 |
|
2 |
<div class="wrapper"> |
3 |
<ul class="menu"> |
4 |
<li><a href="#">Profile<span class="pink">2</span></a></li> |
5 |
<li><a href="#">Setting<span class="yellow">3</span></a></li> |
6 |
<li><a href="#">Notifications<span class="blue">6</span></a></li> |
7 |
<li><a href="#">Logout</a></li> |
8 |
</ul>
|
9 |
</div>
|
Schritt 8: Styling der Notification Bubbles
Um die Benachrichtigungsblasen zu erstellen, formatieren wir zuerst die span-Tags mit Ausnahme der Farbe und der Rahmenfarbe. Auf diese Weise können wir die Farben leicht ändern, indem wir einfach Klassennamen ändern.
Zuerst erstellen wir einige Breiten und Höhen, nehmen 18px / 12px = 1.5em. Dann müssen wir sie absolut positionieren (0,5 m von rechts und -2 m von oben). Als nächstes wird eine Zeilenhöhe angewendet, um die Zahl vertikal zu zentrieren, und die Textausrichtung wird verwendet, um horizontal zu zentrieren.
Eine Schriftfamilie wird mit Helvetica Neue angewendet, wiederum mit Fallbacks für Benutzer ohne Helvetica. Wir machen es fett, wenden eine weiße Farbe an und fügen dann einen Text-Schatten hinzu. Als nächstes fügen wir einige Box-Schatten hinzu (wir fügen zwei hinzu; einen Schlagschatten und einen Schatten). Denken Sie daran, diese unter Verwendung von Browserpräfixen zu erstellen. Jetzt fügen wir einen Umrandungsradius von 4em hinzu (ungefähr 50px).
Für die nächste Stufe des Prozesses werden wir einige CSS3-Techniken nutzen und den Hover-Effekt zum Laufen bringen. Wir werden zuerst die Blase mit einer Deckkraft von 0 verstecken. Als nächstes werden wir einige Übergänge verwenden, um unsere coolen kleinen Animationen zu erstellen. Wir zielen auf die Ober- und Deckkraft ab und sagen ihm, dass es sich über einen Zeitraum von 0,3 Sekunden (3 Millisekunden) beruhigt. Dazu müssen die Browser-Präfixe einschließlich -o- und -ms- verwendet werden.
1 |
|
2 |
span { |
3 |
position:absolute; |
4 |
top:-2em; |
5 |
right: 0.5em; |
6 |
|
7 |
width: 1.5em; |
8 |
height: 1.5em; |
9 |
|
10 |
line-height:1.5em; |
11 |
text-align:center; |
12 |
|
13 |
ont-family:'Helvetica Neue', Helvetica, sans-serif; |
14 |
font-weight:bold; |
15 |
color:#fff; |
16 |
text-shadow:0px 1px 0px rgba(0,0,0,.15); |
17 |
|
18 |
-webkit-box-shadow: |
19 |
inset 0px 1px 0px rgba(255,255,255,35), |
20 |
0px 1px 1px rgba(0,0,0,.2); |
21 |
-moz-box-shadow: |
22 |
inset 0px 1px 0px rgba(255,255,255,.35), |
23 |
0px 1px 1px rgba(0,0,0,.2); |
24 |
box-shadow: |
25 |
inset 0px 1px 0px rgba(255,255,255,.35), |
26 |
0px 1px 1px rgba(0,0,0,.2); |
27 |
|
28 |
-webkit-border-radius:4em; |
29 |
-moz-border-radius:4em; |
30 |
border-radius:4em; |
31 |
|
32 |
opacity:0; |
33 |
filter: alpha(opacity=0); |
34 |
|
35 |
-webkit-transition: .3s top ease-in, .3s opacity ease-in; |
36 |
-moz-transition: .3s top ease-in, .3s opacity ease-in; |
37 |
-o-transition: .3s top ease-in, .3s opacity ease-in; |
38 |
-ms-transition: .3s top ease-in, .3s opacity ease-in; |
39 |
transition: .3s top ease-in, .3s opacity ease-in; |
40 |
}
|
Schritt 9: Bubble-Farben
Zeit für die letzten ästhetischen Berührungen der Blasen; Hinzufügen von CSS zum Gestalten der Farben. Erinnerst du dich an die Klassen, die wir zu den Span-Tags hinzugefügt haben? Dies wird die Dinge einfach genug machen, wir werden jede Farbe auswählen, einen Farbverlauf und eine Rahmenfarbe anwenden.
1 |
|
2 |
.pink { |
3 |
background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
4 |
background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
5 |
background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
6 |
background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
7 |
background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
8 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677'); |
9 |
|
10 |
border:1px solid #ce4f5e; |
11 |
}
|
12 |
.yellow { |
13 |
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
14 |
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
15 |
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
16 |
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
17 |
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
18 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48'); |
19 |
|
20 |
border:1px solid #dea94f; |
21 |
}
|
22 |
.blue { |
23 |
background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
24 |
background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
25 |
background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
26 |
background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
27 |
background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
28 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3'); |
29 |
|
30 |
border:1px solid #79b5cb; |
31 |
}
|
Schritt 10: Hover Styles
Natürlich sind unsere Blasen schön gestylt, aber völlig unsichtbar. Wir müssen etwas CSS hinzufügen, damit die Blasen beim Schweben angezeigt werden. Zuerst fügen Sie den Anker-Tags eine Farbe hinzu, wenn sie über dem Objekt liegen, nur ein einfaches Dunkelgrau. Als Nächstes werden wir den Bereich anvisieren, wenn sich das übergeordnete Listenelement über ihm befindet. Wir werden eine Deckkraft von 1 hinzufügen, um sie sichtbar zu machen, und den Wert der obersten Position ändern, damit er so aussieht, als ob er nach unten rutscht.
1 |
|
2 |
.menu li:hover a { |
3 |
color: #343434; |
4 |
}
|
5 |
|
6 |
.menu li:hover a span { |
7 |
top:-1em; |
8 |
opacity:1; |
9 |
filter: alpha(opacity=100); |
10 |
}
|
Was ist mit HTML5-Datenattributen?
Froh, dass du gefragt hast ..
Schritt 11: Ändern Sie das Menü HTML Markup
Um unser Menü mit HTML5-Datenattributen zu erstellen, müssen wir zuerst unser HTML-Markup ändern. Wir werden einige benutzerdefinierte Attribute verwenden, um die Blasen zu erstellen. HTML5 führte ein neues Datenattribut ein, bei dem der Attributname beliebig lang sein kann, solange er mindestens 1 Zeichen lang ist und mit "Daten" beginnt.
Für dieses Tutorial verwenden wir 'Datenblase'. Dadurch können wir unsere Benachrichtigungswerte speichern und darauf zugreifen, ohne unserem Dokument eine unnötige Markup-Struktur hinzuzufügen. Beachten Sie, dass wir auch unsere Farbklassen auf die Anchor-Tags verschoben haben.
1 |
|
2 |
<div id="wrapper"> |
3 |
<ul class="menu"> |
4 |
<li><a href="#" class="pink" data-bubble="2">Profile</a></li> |
5 |
<li><a href="#" class="yellow" data-bubble="3">Setting</a></li> |
6 |
<li><a href="#" class="blue" data-bubble="6">Notifications</a></li> |
7 |
<li><a href="#">Logout</a></li> |
8 |
</ul>
|
9 |
</div>
|
Schritt 12: Entfernen einiger CSS
Da wir nicht mehr mit den span-Elementen arbeiten werden, müssen Sie zu Ihrem CSS zurückkehren und die folgenden Regeln löschen.
1 |
|
2 |
span { |
3 |
position:absolute; |
4 |
top:-2em; |
5 |
right: 0.5em; |
6 |
|
7 |
width: 1.5em; |
8 |
height: 1.5em; |
9 |
|
10 |
line-height:1.5em; |
11 |
text-align:center; |
12 |
|
13 |
font-family:"Helvetica Neue"; |
14 |
font-weight:bold; |
15 |
color:#fff; |
16 |
text-shadow:0px 1px 0px rgba(0,0,0,.15); |
17 |
|
18 |
-webkit-box-shadow: |
19 |
inset 0px 1px 0px rgba(255,255,255,35), |
20 |
0px 1px 1px rgba(0,0,0,.2); |
21 |
-moz-box-shadow: |
22 |
inset 0px 1px 0px rgba(255,255,255,.35), |
23 |
0px 1px 1px rgba(0,0,0,.2); |
24 |
box-shadow: |
25 |
inset 0px 1px 0px rgba(255,255,255,.35), |
26 |
0px 1px 1px rgba(0,0,0,.2); |
27 |
|
28 |
-webkit-border-radius:4em; |
29 |
-moz-border-radius:4em; |
30 |
border-radius:4em; |
31 |
|
32 |
opacity:0; |
33 |
filter: alpha(opacity=0); |
34 |
|
35 |
-webkit-transition: .3s top ease-in, .3s opacity ease-in; |
36 |
-moz-transition: .3s top ease-in, .3s opacity ease-in; |
37 |
-o-transition: .3s top ease-in, .3s opacity ease-in; |
38 |
-ms-transition: .3s top ease-in, .3s opacity ease-in; |
39 |
transition: .3s top ease-in, .3s opacity ease-in; |
40 |
}
|
41 |
|
42 |
.pink { |
43 |
background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
44 |
background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
45 |
background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
46 |
background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
47 |
background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
48 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677'); |
49 |
|
50 |
border:1px solid #ce4f5e; |
51 |
}
|
52 |
.yellow { |
53 |
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
54 |
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
55 |
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
56 |
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
57 |
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
58 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48'); |
59 |
|
60 |
border:1px solid #dea94f; |
61 |
}
|
62 |
.blue { |
63 |
background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
64 |
background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
65 |
background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
66 |
background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
67 |
background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
68 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3'); |
69 |
|
70 |
border:1px solid #79b5cb; |
71 |
}
|
72 |
|
73 |
.menu li:hover a span { |
74 |
top:-1em; |
75 |
opacity:1; |
76 |
filter: alpha(opacity=100); |
77 |
}
|
Schritt 13: Etwas CSS hinzufügen
Jetzt konzentrieren wir uns stattdessen auf unsere Datenattribute, wir müssen einige Regeln zu unserem CSS hinzufügen.
Es wird dem, was wir für unsere Span-Elemente verwendet haben, sehr ähnlich sehen. Diesmal werden wir jedoch die folgenden Pseudoelemente von Anchor-Tags mit dem Attribut "Data-Bubble" anvisieren. Um dies zu tun, verwenden wir CSS Attribute Selectors
Da wir ein: after pseudo verwenden (und damit Inhalte erzeugen), müssen wir etwas Fleisch darin mit Inhalt definieren: ''. Wir verwenden wieder unser benutzerdefiniertes Attribut, das wir in unserem HTML erstellt haben, und fügen es ein.
Um die Sichtbarkeit unserer Blase zu verwalten, geben wir ihr wiederum eine Deckkraft von 1, wenn die Verbindung schwebt. Leider können wir diese aufgrund von Einschränkungen mit Attributselektoren nicht mit CSS selbst animieren.
1 |
|
2 |
.menu li a[data-bubble]:after { |
3 |
content:attr(data-bubble); |
4 |
position:absolute; |
5 |
top:-1.25em; |
6 |
right: 0.5em; |
7 |
|
8 |
width: 1.5em; |
9 |
height: 1.5em; |
10 |
|
11 |
line-height:1.5em; |
12 |
text-align:center; |
13 |
|
14 |
font-family:"Helvetica Neue"; |
15 |
font-weight:bold; |
16 |
color:#fff; |
17 |
text-shadow:0px 1px 0px rgba(0,0,0,.15); |
18 |
|
19 |
-webkit-box-shadow: |
20 |
inset 0px 1px 0px rgba(255,255,255,35), |
21 |
0px 1px 1px rgba(0,0,0,.2); |
22 |
-moz-box-shadow: |
23 |
inset 0px 1px 0px rgba(255,255,255,.35), |
24 |
0px 1px 1px rgba(0,0,0,.2); |
25 |
box-shadow: |
26 |
inset 0px 1px 0px rgba(255,255,255,.35), |
27 |
0px 1px 1px rgba(0,0,0,.2); |
28 |
|
29 |
-webkit-border-radius:4em; |
30 |
-moz-border-radius:4em; |
31 |
border-radius:4em; |
32 |
|
33 |
opacity:0; |
34 |
filter: alpha(opacity=0); |
35 |
}
|
36 |
.menu li:hover a[data-bubble]:after { |
37 |
opacity:1; |
38 |
filter: alpha(opacity=100); |
39 |
}
|
Schritt 14: Farben für Attribute
Schließlich müssen wir den generierten Inhalt innerhalb der verschiedenen Klassen stylen, damit wir die Farben leicht ändern können (genau wie wir es mit den Span-Elementen gemacht haben).
1 |
|
2 |
|
3 |
a.pink[data-bubble]:after { |
4 |
background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
5 |
background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
6 |
background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
7 |
background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
8 |
background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119)); |
9 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677'); |
10 |
|
11 |
border:1px solid #ce4f5e; |
12 |
}
|
13 |
a.yellow[data-bubble]:after { |
14 |
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
15 |
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
16 |
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
17 |
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
18 |
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72)); |
19 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48'); |
20 |
|
21 |
border:1px solid #dea94f; |
22 |
}
|
23 |
a.blue[data-bubble]:after { |
24 |
background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
25 |
background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
26 |
background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
27 |
background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
28 |
background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243)); |
29 |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3'); |
30 |
|
31 |
border:1px solid #79b5cb; |
32 |
}
|
Fazit
Wir haben erfolgreich ein Menü zusammen mit einigen ordentlichen Benachrichtigungsblasen erstellt und animiert! Wir sind sogar noch weiter gegangen und haben neue Techniken in HTML5 genutzt.
Abgeschlossen Ich hoffe, dir hat dieses Tutorial gefallen, danke fürs Lesen!
