Share
Hej killar, idag skapar vi Premium Pixels Tagtastic Tag Cloud. Som ett experiment i alternativa tillvägagångssätt skapar vi taggarna med hjälp av gradienter, skuggor och (viktigast) CSS-omvandlingar, som kommer att utgöra punkten för varje tagg. Efter avslutat tar vi även ett steg vidare och tillgodoser IE.
Vi har tagit taggar innan på Webdesigntuts +, men vid detta tillfälle kommer vi att undersöka en alternativ metod för att skapa alla kompositbitar och bitar. Det kan finnas skarpare sätt att skapa effekten, men vårt exempel kommer att avstå från bilder, använda mycket ren markering och lite ovanlig styling. Låt oss fastna i!
Låt oss börja med att slänga in någon grundläggande markup, inklusive den välbekanta HTML5-doktypen. Vi hänvisar också till vårt stilark i huvudet på vårt dokument.
För syftet med denna handledning skapar vi en omslag / behållare för att hålla våra taggar. Du kommer sannolikt att behöva något liknande om du vill använda dessa i, till exempel, en blogg sidobar.
För oss skapar vi helt enkelt en div med en klass av omslag, tillämpa en bredd på 340px och en marginal på 50px auto för att centrera omslaget på sidan. Jag har lagt till 50px i stället för 0 bara för att lägga till en bit av marginal toppen så att våra taggar inte räcker överst i webbläsarfönstret. Medan du slänger in den här CSS lägger vi till en del styling för kroppen (till exempel en bakgrundsbild) och tillämpar en återställning.
html, kropp, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, en, förkortat, och, adress, citera, kod, del, DFN, em, img, ins, kbd, q, s, samp, liten, slag, stark, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, bilda, etikett, legend, bord, bildtext, tbody, tfoot, thead, tr, th, td, artikeln, åt sidan, duk, detaljer, bädda, figur, figcaption, sidfot, sidhuvud, hgroup, meny, nav, produktion, ruby, avsnitt, sammanfattning, tid, markera, ljud, video, insats, textarea, välj bakgrund: transparent; kant: 0; font-size: 100%; marginal: 0; kontur: 0; padding: 0; vertikal-align: baslinje artikel, åt sidan , detaljer, figcaption, figur, sidfot, sidhuvud, hgroup, meny, nav, avsnitt display: block kropp line-height: 1 blockquote, q citat: inga blockquote: före, blockquote: after, q: före , q: efter innehåll: none
kropp font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; bakgrund: url (... /images/bg.jpg) repeat; -webkit-typsnitt-utjämning: antialiased; .wrapper maxbredd: 340px; marginal: 50px auto;
Jag har strukturerat dessa taggar helt enkelt; allt vi ska använda är en ankare-tagg (ett logiskt val eftersom dessa troligtvis kommer att fungera som länkar till någonstans eller något). För denna handledning har jag gett den en klass av "tag" men det kan ändras till vad som helst du vill.
hög upplösning
Höger, vidare till nästa del! Vi ska nu börja med att utforma taggen - det finns en hel del kod här men låt inte det förvirra dig, jag förklarar vad som händer.
Jag har först lagt till några grundläggande grejer här;
Därefter har vi definierat vissa teckensnittsinställningar, storlek, familj och vikt, följt av en färg och en textskugga. Därefter har vi applicerat en del vadderar, med hjälp av ems så att allt är stort i förhållande till kroppstypstorleken eller webbläsarens teckenstorlek. Därefter en enkel gräns, men vi har inte tillämpat en till vänster. Ems har poppat upp igen! Den här gången kommer vi att tillämpa dem på radie men bara högra och nedre högra hörn. Okej är du fortfarande vaken? Det finns mer ... nästa använder vi några CSS3-gradienter (jag har gått vidare och använt den snygga Gradient-appen för att beräkna värdena). Slutlig del är några boxskuggor, en insats och drop shadow. Kom ihåg de prefixen!
.tagg float: left; marginal: 0 0 7px 20px; positioner: relativ; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: # 996.633; textskugga: 0px 1px 0px rgba (255,255,255, .4); vaddering: 0,417em 0,417em 0,417em 0,917em; border-top: 1px solid # d99d38; gränsen-höger: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-gräns-radie: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; gränsstråle: 0 0.25em 0.25em 0; bakgrundsbild: -webkit-linjär-gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: -moz-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: -o-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: -ms-linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: linjär gradient (topp, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-skugga: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-skugga: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); boxskugga: inset 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-index: 100;
Okej, vi har slutfört huvuddelen av taggen, nästa del är att skapa pilen. För att lägga till detta använder vi :innan pseudoelement. Vi ska också experimentera med några avancerade tekniker här från CSS; transformationer. Att skapa dessa pilar innebar en hel del försök och fel. Jag var tvungen att prova olika bredder och höjder tillsammans med positionering av topp och botten för att få det så perfekt som möjligt! Någon feedback är därför mycket välkommen ...
Vi har använt samma bakgrundsgradient som tidigare men med en mindre förändring: eftersom vi roterar torget vi ska göra måste vi också rotera gradienten så att den matchar huvuddelen av märka. Gradient app var till hjälp för att jag skulle ändra gradientens riktning. Nästa del är att skapa några gränser, till vänster och under. Allt som är kvar med avseende på pilen är att lägga till en gränsradio för att släta bort punkten och slutligen tillämpa våra omvandlingar. Vi roterar torget som vi har gjort 45 grader så det ser ut som en pil. Vi har använt transform: 45; tillsammans med de prefixade.
.tagg: före innehåll: "; bredd: 1,30em; höjd: 1,358em; bakgrundsbild: -webkit-linjär-gradient (vänster topp, rgb (254, 218, 113), rgb (254, 186, 71)) ; bakgrundsbild: -moz-linjär gradient (vänstra toppen, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: -o-linjär gradient (vänster topp, rgb 254, 218, 113), rgb (254, 186, 71)), bakgrundsbild: -ms-linjär gradient (vänster topp, rgb (254, 218, 113), rgb (254, 186, 71)); bakgrundsbild: linjär gradient (vänster topp, rgb (254, 218, 113), rgb (254, 186, 71)), filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); position: absolut; vänster: -0.69em; topp: .2em; -webkit-transform: rotera (45deg); -moz-transform: rotera (45deg); -o-transformera: rotera (45deg), omvandla: rotera (45deg), gräns vänster: 1px fast # d99d38; gränsbotten: 1px fast # d99d38; -webkit-gränsradien: 0 0 0 0.25em; -moz-gränsen-radien: 0 0 0 0.25em; gränslinjen: 0 0 0 0.25em; z-index: 1;
Du borde nu ha något liknande följande: Obs! Jag har zoomat in så att du kan se var pilen ansluter till huvuddelen, det här är knappt notiticable när den ses vid normal storlek.
Den sista delen för att slutföra vår tagg är att skapa det lilla hålet på den. Här använder vi en pseudo igen, men den här gången :efter element. Vad vi har gjort för att skapa hålet är ganska enkelt. Vi har definierat en bredd och höjd i ems så det kommer att växa smidigt. Därefter har vi lagt till en stor gränsradie som skapar en cirkel med en gräns för att skissera den. Efter detta har vi lagt till en droppskugga som liknar textskuggan. Slutligen har vi placerat den (medan du använder ems).
.tagg: efter innehåll: "; bredd: 0.5em; höjd: 0.5em; bakgrund: #fff; -webkit-gränsradien: 4.167em; -moz-gränsen-radien: 4.167em; gränsenradien: 4.167em; gränsen: 1px solid # d99d38; -webkit-box-skugga: 0 1px 0 #faeaba; -moz-box-skugga: 0 1px 0 #faeaba; boxskugg: 0 1px 0 #faeaba; position: absolut; topp: 0.667 em; vänster: -0.083em; z-index: 9999;
För att göra våra taggar ännu mer fantastiska lägger vi till några sveverstilar. Vi måste lägga till detta till huvuddelen av taggen och pilen (samtidigt som vi kommer ihåg att rotera gradienten för pilen). Vi har också ändrat gränsvärdet på båda.
.tagg: hover background-image: -webkit-linear-gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -moz-linjär-gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -o-linjär gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -ms-linjär gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: linjär gradient (topp, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160; .tag: svängare: före bakgrundsbild: -webkit-linjär-gradient (vänster topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -moz-linjär-gradient (vänster topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -o-linjär gradient (vänster topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: -ms-linjär gradient (vänster topp, rgb (254, 225, 141), rgb (254, 200, 108)); bakgrundsbild: linjär gradient (vänster topp, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160;
Om du fortfarande vill visa dina taggar i fullständig ära för IE-användare måste du ta ett annat tillvägagångssätt mot dessa taggar, och börja med att skapa ett IE-specifik stilark. Jag förklarar varför ... För det första kommer många av våra CSS3-effekter inte att fungera i versioner tidigare än IE9 (bara ett par arbeten i IE9 som det är), men det största problemet här är omvandlingar som inte fungerar. För att tillgodose IE-användare ska vi redigera vår kod lite. Vi börjar med att ändra vår HTML först genom att ersätta omslag div och allt inne i det med:
hög upplösning
Vi använder en ankare igen men med 3 spänner inuti den; vi behöver en för att skapa pilen, huvuddelen och slutet som har gränsenradie.
För att säkerställa att våra taggar ska fungera i IE måste vi använda bilder. Börja med att ta bort allt under .wrapper-stilar, allt tagg relaterat! Du måste nu klistra in i följande kod. Vi applicerar helt enkelt lite bakgrundsbilder här, men upprepar också textbakgrunden på x-axeln, eftersom texten kan vara vilken längd som helst! Även Supercalafragalisticexpialadoshus!
.pil bredd: 15px; höjd: 25px; flyta till vänster; bakgrund: url (... /images/arrow.png) no-repeat; .text height: 25px; flyta till vänster; padding-vänster: 4px; padding-right: 4px; bakgrund: url (... /images/text.png) repeat-x; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; color: # 996.633; textskugga: 0px 1px 0px rgba (255,255,255, .4); line-height: 23px; .end bredd: 4px; höjd: 25px; flyta till vänster; bakgrund: url (... /images/end.png) no-repeat; .tag: sväva .arrow background-image: url (... /images/arrow_hover.png); .tag: sväva .text background-image: url (... /images/text_hover.png); .tag: sväva .end background-image: url (... /images/end_hover.png);
Jo det är det! Det är en annan handledning komplett och det ser bra ut! Vi har tagit dessa tagtastic-taggar och skapat dem med CSS samtidigt som vi catering till IE samtidigt. Dessa taggar kan användas för alla sorters saker - fortsätt och använd dem i ett sidofält, en blogg, vad du än vill!
Jag hoppas att du gillade den här handledningen, tack för att du läste.
Accentsconagua