Share
Idag ska vi ta Orman Clarks menymeddelande märkesdesign och bygga den med hjälp av HTML och CSS. Vi ska titta på ett par sätt att uppnå effekten, inklusive användningen av HTML5-dataattribut som du kanske inte känner till. Låt oss dyka in!
Låt oss börja med att kasta in någon grundläggande markup. Vi använder HTML5-doktypen under hela handledningen. Vi skapar menyn själv genom att först lägga till en huvud div följt av listobjekt som skapar varje menykoppling. Vi har också inkluderat HTML5 shiv (eller shim) -skriptet i huvudet på vårt dokument. Detta kallas i spel med äldre versioner av Internet Explorer, så att de kan känna igen och utforma HTML5-element.
Meny Meddelande märken
För att skapa strukturen i vår meny använder vi en obeställd lista med 4 listobjekt och en ankerkod inuti. Du kan också vilja hysa listan inom en tagg för implementering.
För den här demonstrationens skull skapar vi en div runt menyn med en klass av omslag. Detta kommer bara att användas för att flytta menyn till mitten av sidan.
Din markering ska se ut så här;
Meny Meddelande märken
- Profil
- Miljö
- anmälningar
- Logga ut
Innan vi börjar ställa in menyn lägger vi till några återställningar och lite sidstilning. Vi slänger först in en återställning för att ta bort eventuella marginaler, vaddering etc från webbläsarens standardstilark. Nästa applicerar vi en bakgrundsfärg till kroppen och en fontstorlek på 16px. Denna fasta skriftstorlek garanterar basstorleken för vår demo, men du kanske föredrar att ställa in den till 100% vilket gör det möjligt för användaren att definiera sin fontstorlek för webbläsare. Vi applicerar en bredd på 70% till omslaget och centrerar den med en marginal på 200px.
html, ht, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adress, stor, citera, kod, del, dfn, em, typsnitt, img, ins, kbd, q, s, samp, liten, strejk, stark, sub, sup, tt, var, du, jag, center, dl, dt, dd, ol, ul, li, fältet, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td margin: 0; vaddering: 0; gräns: 0; kontur: 0; typsnittstorlek: 100%; vertikaljustering: baslinje; bakåt: transparent; kropp linjehöjd: 1; ol, ul listestil: none; blockquote, q quotes: none; blockquote: före, blockquote: efter, q: före, q: efter innehåll: "; innehåll: ingen;: fokus översikt: 0; ins text-decoration: none; del text-decoration: line -through; table border-collapse: collapse; border-spacing: 0; a text-decoration: none; body background: #ededed; fontstorlek: 16px; .wrapper width: 70%; marginal: 200px auto;
För att sparka ut stilen på menyn fokuserar vi först på basen av den. Rikta in den först beställda listan först, vilken fick en klass av "meny". Vi ger det en inline-blockvisning, så att vi kan bestämma bredden / höjden av det beroende på dess innehåll som ett blockelement.
Nästa applicerar vi en gradientbakgrund med alla webbläsarprefix. Lägg sedan till en viss gränsradie, men hej, vad är dessa ems ?! Vi använder ems (istället för pixlar) för att dimensionera gränserna i förhållande till teckenstorleken. Kolla in demo; Du ser radien växa proportionellt tillsammans med den större texten.
För att utarbeta den storlek vi behöver tar vi 3 (vår önskade gränslinje i px) och dela den med 16px (vår kroppstypstorlek). Så 3px / 16px = 0,188 men vi runda det upp till 0,2.
Nästa applicerar vi en enkel grå gräns, sedan en boxskugga med en droppe och insatsskugga. Glöm inte de här webbläsarens prefix!
.meny display: inline-block; bakgrundsbild: -webkit-linjär-gradient (topp, rgb (249, 249, 249), rgb (240, 240, 240)); bakgrundsbild: -moz-linjär gradient (topp, rgb (249, 249, 249), rgb (240, 240, 240)); bakgrundsbild: -o-linjär gradient (topp, rgb (249, 249, 249), rgb (240, 240, 240)); bakgrundsbild: -ms-linjär gradient (topp, rgb (249, 249, 249), rgb (240, 240, 240)); bakgrundsbild: linjär gradient (topp, 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; gräns: 1px solid #cecece; -webkit-box-skugga: inset 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); -moz-box-skugga: inset 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06); boxskugga: inmatning 0px 1px 0px #fff, 0px 1px 2px rgba (0,0,0, .06);
Flytta på, låt oss förbättra menyn genom att ställa in listobjekten. Först flyter vi listobjekten till vänster så att de är alla på en rad och inte listade. Vi placerar dem relativt, det kommer att behövas senare när vi skapar märkena. Nästa lägger vi till en gräns till vänster och en gräns till höger.
Nu måste vi rikta in det första listobjektet och det sista listobjektet, så vi gör det genom att använda pseudo-selektorerna. :förstfödde och :sista barnet (använd webbläsarstöd i åtanke när du använder dessa). För det första tar vi bort gränsen till vänster och vi tar bort den rätta gränsen från det sista listobjektet.
.meny li float: left; positioner: relativ; gränsen-höger: 1px solid # d8d8d8; gränsen till vänster: 1px solid #ffffff; .menu li: första barnet gränsen-vänster: ingen; .menu li: sista barnet gränsen-höger: ingen;
Nästa sak som vi behöver göra är att utforma ankarkoderna. Först ska vi ge dem en fontfamilj av Helvetica Neue med några fontstackfallbackar för personer som inte har Helvetica-teckensnittet. Nästa ger vi dem en teckenstorlek på 0.75em (13px / 16px = 0.75). Då applicerar vi en fetstil med fetstil följt av en färg på # 666666 och tillämpar en textskugga.
Vi lägger nu på en del polstring till vänster och höger om 1em (13px / 13px = 1) och en viss linjehöjd för att centrera texten vertikalt. Vi har byggt linjens höjd på 30px, tolkad i ems.
.meny li font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; color: # 666666; textskugga: 0px 1px 0px #ffffff; display: block; vaddering: 0 1em; line-height: 2.5em;
Vår meny börjar se ganska bra nu!
Det är dags att lägga till de coola små anmälningsbubblorna. Först måste du ersätta din HTML HTML-uppställning med följande. Vi skapar bubblorna med spårstaggar, och för varje färg applicerar vi en lämplig klass. Jag har lagt till rosa, gul och blå.
- Profil2
- Miljö3
- anmälningar6
- Logga ut
För att skapa anmälningsbubblorna utformar vi först spårstaggarna med allt utom färg- och kantfärgen. På så sätt kan vi enkelt ändra färgerna genom att helt enkelt ändra klassnamn.
Först ska vi skapa några bredder och höjder, ta 18px / 12px = 1.5em. Då måste vi placera dem absolut (0.5em från höger och -2em från toppen). Därefter appliceras en linjehöjd för att centrera numret vertikalt och textjusteringscentrum används för att centrera horisontellt.
En font-familj kommer att appliceras med Helvetica Neue, igen med fallbacks för användare utan Helvetica. Vi gör det djärvt, applicera en vitfärg och lägg sedan till en textskugga. Nästa lägger vi till några rutaskuggor (vi lägger till två, en droppskugga och en insatsskugga). Kom ihåg att skapa dessa medan du använder webbläsarprefix. Nu lägger vi till en gränsradio på 4em (ungefär 50px).
För nästa steg i processen kommer vi att dra nytta av vissa CSS3-tekniker och få svängningseffekten att fungera. Vi gömmer först bubblan med en opacitet av 0. För att skapa våra coola små animationer använder vi några övergångar. Vi ska rikta toppen och opaciteten och berätta att den ska lindras över en tid av 0,3 sekunder (3 millisekunder). Dessa kommer att behöva använda webbläsarens prefix, inklusive -o- och -ms-.
span position: absolute; top: -2em; höger: 0.5em; bredd: 1,5em; höjd: 1.5em; line-height: 1.5em; text-align: center; ont-family: "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; färg: #fff; textskugga: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-skugga: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-skugga: inmatning 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); boxskugga: inmatning 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; opacitet: 0; filter: alfa (opacitet = 0); -webkit-övergång: .3s bästa lätthet, .3s opacitetslättnad; -moz-övergång: .3s bästa lätthet, .3s opacitetslättnad; -o-övergång: .3s topplättnad, .3s opacitetslättnad; -ms-övergång: .3s topplättnad, .3s opacitetslättnad; övergång: .3s bästa lätthet, .3s opacitetslättnad;
Tid för den sista estetiska handen på bubblorna; Lägger till lite CSS för att anpassa färgerna. Kommer du ihåg de klasser vi lagt till spårstaggarna? Dessa kommer att göra sakerna enkla, vi kommer att rikta in varje färg, tillämpa en lutning och en kantfärg.
.rosa bakgrundsbild: -webkit-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -o-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -ms-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); gränsen: 1px solid # ce4f5e; .yellow background-image: -webkit-linear-gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -moz-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -o-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -ms-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); gräns: 1px solid # dea94f; .blå bakgrundsbild: -webkit-linjär-gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -moz-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -o-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -ms-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); gräns: 1px fast # 79b5cb;
Naturligtvis är våra bubblor vackert utformade, men helt osynliga. Vi måste lägga till lite CSS för att låta bubblorna dyka upp. Lägg först lite färg på ankarkoderna när de svävar över, bara en enkel mörkgrå. Därefter kommer vi att rikta in spänningen när dess föräldralista är svängt över. Vi lägger till en opacitet av 1 för att göra den synlig och ändra toppositionens värde så att det verkar som om det glider ner.
.meny li: sväva en färg: # 343434; .menu li: sväng ett spår top: -1em; opacitet: 1; filter: alfa (opacitet = 100);
Så vad om HTML5-data attribut?
Glad att du frågade ...
För att skapa vår meny med HTML5-data attribut måste vi först ändra vår HTML Markup. Vi ska använda några anpassade attribut för att skapa bubblorna. HTML5 introducerade ett nytt data-attribut där attributnamnet kan vara något så länge det är minst 1 tecken långt och börjar med "data-".
För denna handledning använder vi "data-bubbla". Dessa tillåter oss att lagra och komma åt våra anmälningsvärden utan att lägga till onödig markupstruktur i vårt dokument. Observera att vi också har flyttat våra färgklasser på ankarkorgen.
- Profil
- Miljö
- anmälningar
- Logga ut
Eftersom vi inte längre ska arbeta med spanelementen behöver du gå tillbaka till din CSS och ta bort följande regler.
span position: absolute; top: -2em; höger: 0.5em; bredd: 1,5em; höjd: 1.5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; färg: #fff; textskugga: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-skugga: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-skugga: inmatning 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); boxskugga: inmatning 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; opacitet: 0; filter: alfa (opacitet = 0); -webkit-övergång: .3s bästa lätthet, .3s opacitetslättnad; -moz-övergång: .3s bästa lätthet, .3s opacitetslättnad; -o-övergång: .3s topplättnad, .3s opacitetslättnad; -ms-övergång: .3s topplättnad, .3s opacitetslättnad; övergång: .3s bästa lätthet, .3s opacitetslättnad; .pink background-image: -webkit-linear-gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -o-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -ms-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); gränsen: 1px solid # ce4f5e; .yellow background-image: -webkit-linear-gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -moz-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -o-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -ms-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); gräns: 1px solid # dea94f; .blå bakgrundsbild: -webkit-linjär-gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -moz-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -o-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -ms-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); gräns: 1px fast # 79b5cb; .menu li: sväng ett spår top: -1em; opacitet: 1; filter: alfa (opacitet = 100);
Låt oss nu rikta våra dataattribut i stället, vi måste lägga till några regler i vår CSS.
Det ser väldigt ut som det vi använde för våra spänningselement. Den här gången kommer vi att rikta oss till: efter pseudo-elementen i ankare-taggar med attributet "data-bubbla". För att göra så använder vi CSS Attribute Selectors.
När vi använder en: efter pseudo (och därigenom genererar innehåll) måste vi definiera lite kött inom det med innehåll: ". Återigen använder vi vår anpassade attribut vi skapade i vår HTML och sätter in det.
Återigen, för att hantera synligheten hos vår bubbla, ger vi den en opacitet av 1 när länken svängs över. Tyvärr, på grund av begränsningar med attributväljare kan vi inte animera dem med CSS själv.
.meny li en [databubbla]: efter innehåll: attr (data-bubbla); position: absolute; top: -1.25em; höger: 0.5em; bredd: 1,5em; höjd: 1.5em; line-height: 1.5em; text-align: center; font-family: "Helvetica Neue"; font-weight: bold; färg: #fff; textskugga: 0px 1px 0px rgba (0,0,0, .15); -webkit-box-skugga: inset 0px 1px 0px rgba (255,255,255,35), 0px 1px 1px rgba (0,0,0, .2); -moz-box-skugga: inmatning 0px 1px 0px rgba (255,255,255, .35), 0px 1px 1px rgba (0,0,0, .2); boxskugga: inmatning 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; opacitet: 0; filter: alfa (opacitet = 0); .menu li: sväva en [data-bubbla]: efter opacitet: 1; filter: alfa (opacitet = 100);
Slutligen måste vi utforma det genererade innehållet inom de olika klasserna så att vi enkelt kan ändra färgerna (precis som vi gjorde med spännelementen).
a.pink [databubbla]: efter background-image: -webkit-linear-gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -o-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: -ms-linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); bakgrundsbild: linjär gradient (topp, rgb (247, 130, 151), rgb (244, 102, 119)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f78297', EndColorStr = "# f46677"); gränsen: 1px solid # ce4f5e; a.yellow [data-bubbla]: efter background-image: -webkit-linear-gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -moz-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -o-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: -ms-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); bakgrundsbild: linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 72)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba48"); gräns: 1px solid # dea94f; a.blue [databubbla]: efter background-image: -webkit-linear-gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -moz-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -o-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: -ms-linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); bakgrundsbild: linjär gradient (topp, rgb (172, 228, 248), rgb (108, 205, 243)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# ace4f8', EndColorStr = "# 6ccdf3"); gräns: 1px fast # 79b5cb;
Vi har framgångsrikt skapat en meny tillsammans med några snygga anmälningsbubblor och animerade dem! Vi har till och med gått vidare och utnyttjat nya tekniker inom HTML5.
Jag hoppas att du haft denna handledning tack för att du läste!
Accentsconagua