Share
Vandaag gaan we Orman Clark's Menu Notification Badges ontwerpen en bouwen met HTML en CSS. We zullen een aantal manieren bekijken om het effect te bereiken, inclusief het gebruik van HTML5-gegevensattributen waarmee u mogelijk niet vertrouwd bent. Laten we erin duiken!
Laten we beginnen door wat basismarkeringen in te voeren. We zullen het HTML5-doctype tijdens de zelfstudie gebruiken. We maken het menu zelf door eerst een hoofd-div toe te voegen, gevolgd door lijstitems die elke menulink maken. We hebben ook het script HTML5 shiv (of shim) in de kop van ons document opgenomen. Dit wordt meegenomen bij oudere versies van Internet Explorer, waardoor ze HTML5-elementen kunnen herkennen en opmaken.
Menu-notificatiebadges
Om de structuur van ons menu te maken gebruiken we een niet-geordende lijst met 4 lijstitems en een ankertag erin. U kunt de lijst ook binnen een nesten nesten tag voor implementatie.
Voor deze demonstratie maken we een div-element rond het menu met een klasse wrapper. Dit wordt alleen gebruikt om het menu naar het midden van de pagina te verplaatsen.
Uw opmaak zou er ongeveer zo uit moeten zien;
Menu-notificatiebadges
- Profiel
- omgeving
- meldingen
- Uitloggen
Voordat we het menu gaan stylen, voegen we enkele resets en een aantal pagina-opmaak toe. We zullen eerst een reset uitvoeren om eventuele marges, opvulling enz. Uit de standaardstijl van de browser te verwijderen. Vervolgens passen we een achtergrondkleur toe op het hoofdgedeelte en een lettergrootte van 16px. Deze vaste lettergrootte verzekert de basisgrootte voor onze demo, maar u kunt deze het liefst instellen op 100%, zodat de gebruiker de grootte van zijn browsertype kan bepalen. We zullen een breedte van 70% toepassen op de wrapper en deze centreren met een marge van 200 px.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acroniem, adres, 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, dd, ol, ul, li, fieldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td margin: 0; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant; body line-height: 1; ol, ul lijststijl: geen; 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; body background: #ededed; font-size: 16px; .wrapper width: 70%; marge: 200 px auto;
Om te beginnen met het stylen van het menu, richten we ons eerst op de basis ervan. Target eerst de niet-geordende lijst, die een categorie 'menu' heeft gekregen. We geven het een weergave van inline-block, waardoor we de breedte / hoogte ervan kunnen bepalen, afhankelijk van de inhoud, zoals een blokelement.
Vervolgens passen we een verloopachtergrond toe met alle voorvoegsels van de browser. Voeg dan een randstraal toe, maar wat zijn die ems ?! We gebruiken ems (in plaats van pixels) om de randstraal te vergroten ten opzichte van de lettergrootte. Bekijk de demo; je ziet de straal proportioneel meegroeien met de grotere tekst.
Om de gewenste grootte te bepalen, nemen we er 3 (onze gewenste grensradius in px) en verdelen we deze met 16 px (onze lettergrootte). Dus 3px / 16px = 0,188 maar dat wordt afgerond tot 0,2.
Vervolgens passen we een eenvoudige grijze rand toe, daarna een doosschaduw met een druppel en inzetschaduw. Vergeet ook deze voorvoegsels van de browser niet!
.menu display: inline-block; achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (249, 249, 249), rgb (240, 240, 240)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (249, 249, 249), rgb (240, 240, 240)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (249, 249, 249), rgb (240, 240, 240)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (249, 249, 249), rgb (240, 240, 240)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (249, 249, 249), rgb (240, 240, 240)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f9f9f9', EndColorStr = "# f0f0f0"); -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; border-radius: 0.2em; rand: 1px solide #cecece; -webkit-box-shadow: inzet 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-shadow: inzet 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); box-shadow: inzet 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06);
Verder gaan we het menu verbeteren door de lijstitems te stylen. Eerst zweven we de lijstitems naar links, zodat ze allemaal op één regel staan en niet worden vermeld. We plaatsen ze dan relatief, dit is later nodig wanneer we de badges maken. Vervolgens voegen we een rand aan de linkerkant toe en een rand aan de rechterkant.
Nu moeten we het eerste lijstitem en het laatste lijstitem targeten, dus we doen dit met behulp van de pseudo-kiezers; :eerstgeborene en :laatste kind (houd rekening met de browser-ondersteuning wanneer u deze gebruikt). Voor de eerste verwijderen we de rand links en verwijderen we de rechterrand van het laatste lijstitem.
.menu li float: links; position: relative; border-right: 1px solid # d8d8d8; border-left: 1px solid #ffffff; .menu li: first-child border-left: none; .menu li: last-child border-right: none;
Het volgende dat we moeten doen, is de ankertags stijlen. Eerst geven we ze een lettertypegroep van Helvetica Neue met een aantal lettertypestacks voor mensen die het lettertype Helvetica niet hebben. Vervolgens geven we ze een lettergrootte van 0.75em (13px / 16px = 0.75). Vervolgens passen we een lettertypegewicht van vet toe, gevolgd door een kleur van # 666666 en passen we een tekstschaduw toe.
We zullen nu wat opvulling aanbrengen aan de linker- en rechterkant van 1em (13px / 13px = 1) en enige lijnhoogte om de tekst verticaal te centreren. We hebben de lijnhoogte gebaseerd op 30 px, geïnterpreteerd in ems.
.menu li a font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; color: # 666666; text-shadow: 0px 1px 0px #ffffff; weergave: blok; opvulling: 0 1em; line-height: 2.5em;
Ons menu begint er nu behoorlijk goed uit te zien!
Tijd om de coole kleine meldingsbubbels toe te voegen. Eerst moet u de HTML-opmaak van uw menu vervangen door het volgende. We maken de bubbels met behulp van span-tags en vervolgens passen we voor elke kleur een geschikte klasse toe. Ik heb roze, geel en blauw toegevoegd.
- Profiel2
- omgeving3
- meldingen6
- Uitloggen
Om de notificatie-bubbels te maken, maken we de span-tags eerst met alles op, behalve de kleur en randkleur. Op deze manier kunnen we de kleuren eenvoudig veranderen door eenvoudig klassennamen te wijzigen.
Eerst maken we enkele breedtes en hoogtes, neem 18px / 12px = 1.5em. Dan moeten we ze absoluut plaatsen (0,5em van rechts en -2em vanaf de bovenkant). Vervolgens wordt een lijnhoogte toegepast om het getal verticaal te centreren en wordt het tekstuitlijningscentrum horizontaal gebruikt om horizontaal te centreren.
Een lettertypefamilie wordt toegepast met Helvetica Neue, opnieuw met fallbacks voor gebruikers zonder Helvetica. We maken het vetgedrukt, passen een witte kleur toe en voegen een tekstschaduw toe. Vervolgens voegen we wat vakschaduwen toe (we voegen er twee toe, één slagschaduw en één inzetschaduw). Vergeet niet om deze te maken tijdens het gebruik van browser-voorvoegsels. Nu voegen we een grensradius toe van 4em (ongeveer 50px).
Voor de volgende fase in het proces maken we gebruik van een aantal CSS3-technieken en werken het hovereffect. We zullen eerst de bel verbergen met een dekking van 0. Vervolgens maken we voor onze coole kleine animaties enkele overgangen. We richten ons op de top en de dekking en geven aan dat het over een periode van 0,3 seconden (3 milliseconden) zal afnemen. Hiervoor zijn de gebruikte browser-prefixen nodig, inclusief -o- en -ms-.
overspanning positie: absoluut; top: -2em; rechts: 0,5em; breedte: 1,5em; hoogte: 1,5em; line-height: 1.5em; text-align: center; ont-familie: 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold; color: # fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-vak-schaduw: inzet 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; ondoorzichtigheid: 0; filter: alpha (opacity = 0); -webkit-overgang: .3s topentertainment, .3s opacity ease-in; -moz-overgang: .3s topgemak, Dekking van inaciteit van .3s; -o-overgang: .3s topgemak, Dekking van inaciteit van .3s; -ms-overgang: .3s topgemak, diepte-transparantie van .3s; overgang: .3s topgemak, in3 gemak in in;
Tijd voor de laatste esthetische raakt aan de bubbels; CSS toevoegen om de kleuren te stylen. Onthoud de klassen die we hebben toegevoegd aan de span-tags? Deze maken dingen eenvoudig genoeg, we richten ons op elke kleur, passen een verloop en een randkleur toe.
.roze background-image: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); rand: 1px vast # ce4f5e; .gele background-image: -webkit-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); rand: 1px vast # dea94f; .blauw background-image: -webkit-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -moz-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb;
Natuurlijk zijn onze bubbels prachtig vormgegeven, maar volledig onzichtbaar. We moeten een aantal CSS toevoegen om de bubbels te laten weergeven bij zweven. Voeg eerst wat kleur toe aan de ankertags wanneer ze zijn overgeheveld, gewoon een eenvoudig donkergrijs. Vervolgens targeten we de reeks wanneer het bovenliggende lijstitem over zweeft. We voegen een dekking van 1 toe om deze zichtbaar te maken en de waarde van de bovenste positie te wijzigen zodat deze lijkt te verdwijnen.
.menu li: hover a color: # 343434; .menu li: hover a span top: -1em; opaciteit: 1; filter: alpha (opacity = 100);
Dus hoe zit het met HTML5-gegevenskenmerken?
Blij dat je vroeg ...
Om ons menu met HTML5-gegevensattributen te maken, moeten we eerst onze HTML-markering wijzigen. We gaan enkele aangepaste kenmerken gebruiken om de bubbels te maken. HTML5 introduceerde een nieuw data-attribuut waarbij de attribuutnaam alles kan zijn zolang het maar 1 karakter lang is en begint met 'data-'.
Voor deze tutorial gebruiken we 'data-bubble'. Hiermee kunnen we onze meldingswaarden opslaan en openen zonder onnodige markup-structuur aan ons document toe te voegen. U ziet dat we ook onze kleurklassen hebben verplaatst naar de ankertags.
- Profiel
- omgeving
- meldingen
- Uitloggen
Omdat we niet langer met de span-elementen werken, moet je teruggaan naar je CSS en de volgende regels verwijderen;
overspanning positie: absoluut; top: -2em; rechts: 0,5em; breedte: 1,5em; hoogte: 1,5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; color: # fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-vak-schaduw: inzet 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; ondoorzichtigheid: 0; filter: alpha (opacity = 0); -webkit-overgang: .3s topentertainment, .3s opacity ease-in; -moz-overgang: .3s topgemak, Dekking van inaciteit van .3s; -o-overgang: .3s topgemak, Dekking van inaciteit van .3s; -ms-overgang: .3s topgemak, diepte-transparantie van .3s; overgang: .3s topgemak, in3 gemak in in; .pink background-image: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); rand: 1px vast # ce4f5e; .gele background-image: -webkit-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); rand: 1px vast # dea94f; .blauw background-image: -webkit-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -moz-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb; .menu li: hover a span top: -1em; opaciteit: 1; filter: alpha (opacity = 100);
Laten we ons nu richten op onze gegevenskenmerken, we moeten enkele regels aan onze CSS toevoegen.
Het lijkt erg op wat we hebben gebruikt voor onze span-elementen. Deze keer richten we ons echter op de: na pseudo-elementen van ankertags met een attribuut van "data-bubble". Om dit te doen gebruiken we CSS-kenmerkkeuzes.
Omdat we een: na pseudo (en dus het genereren van inhoud) gebruiken, moeten we wat vlees erin definiëren met inhoud: ". We gebruiken opnieuw ons aangepast kenmerk dat we in onze HTML hebben gemaakt en voegen dat in.
Nogmaals, om de zichtbaarheid van onze bubbel te beheren, geven we deze een opaciteit van 1 wanneer de link over de muis blijft hangen. Helaas kunnen we vanwege beperkingen met attribuutselectoren ze niet animeren met CSS zelf.
.menu li a [data-bubble]: na content: attr (data-bubble); positie: absoluut; top: -1.25em; rechts: 0,5em; breedte: 1,5em; hoogte: 1,5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; color: # fff; text-shadow: 0px 1px 0px rgba (0,0,0, .15); -webkit-vak-schaduw: inzet 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); box-shadow: inzet 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 4em; ondoorzichtigheid: 0; filter: alpha (opacity = 0); .menu li: hover a [data-bubble]: after onacity: 1; filter: alpha (opacity = 100);
Ten slotte moeten we de gegenereerde inhoud stijlen in de verschillende klassen, zodat we de kleuren gemakkelijk kunnen wijzigen (precies zoals we deden met de span-elementen).
a.pink [data-bubble]: na background-image: -webkit-linear-gradient (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (247, 130, 151), rgb (244, 102, 119)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); rand: 1px vast # ce4f5e; a.yellow [data-bubble]: na background-image: -webkit-linear-gradient (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -moz-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -o-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (254, 218, 113), rgb (254, 186, 72)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); rand: 1px vast # dea94f; a.blue [data-bubble]: na background-image: -webkit-linear-gradient (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -moz-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (172, 228, 248), rgb (108, 205, 243)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); border: 1px solid # 79b5cb;
We hebben met succes een menu gemaakt, samen met enkele handige meldingen en geanimeerd! We zijn zelfs verder gegaan en hebben gebruikgemaakt van nieuwe technieken binnen HTML5.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua