Share
Hallo allemaal, vandaag maken we Tagstastic Tag Cloud van Premium Pixels. Als een experiment in alternatieve benaderingen, zullen we de tags maken met behulp van verlopen, schaduwen en (vooral) CSS-transformaties, die het punt van elke tag vormen. Na voltooiing zullen we zelfs een stap verder gaan en tegemoet komen aan IE.
We hebben eerder labels behandeld op Webdesigntuts +, maar bij deze gelegenheid gaan we een alternatieve methode onderzoeken om alle samengestelde bits en stukken te maken. Er kunnen scherpere manieren zijn om het effect te creëren, maar ons voorbeeld zal zich onthouden van afbeeldingen, gebruik heel schone opmaak en een ongewone styling. Laten we vast komen te zitten!
Laten we beginnen met een paar elementaire markeringen, waaronder het vertrouwde HTML5-doctype. We verwijzen ook naar ons stylesheet in de kop van ons document.
Voor deze tutorial maken we een wrapper / container om onze tags te houden. Je hebt waarschijnlijk iets soortgelijks nodig als je dit gebruikt, bijvoorbeeld in een zijbalk van een blog.
Voor de onze maken we eenvoudig een div met een klasse wrapper, passen een breedte van toe 340px en een marge van 50px auto om de wrapper op de pagina te centreren. Ik heb 50px toegevoegd in plaats van 0 om een beetje marge toe te voegen, zodat onze tags de bovenkant van het browservenster niet raken. Terwijl we in deze CSS gooien, voegen we wat styling toe voor het lichaam (zoals een achtergrondafbeelding) en passen we een reset toe.
html, body, div, overspanning, applet, object, iframe, H1, H2, H3, H4, h5, h6, p, blockquote, pre, a, abbr, en, adres, citeren, code, del, DFN, em, img, ins, kbd, q, s, samp, kleine, staking, sterke, sub, sup, tt, var, b, U, I, dl, dt, dd, ol, ul, li, fieldset, vorm, etiket, legende, tafel, het bijschrift tbody, tfoot, thead, tr, th, td, artikel, opzij, canvas, details, embed, figuur, figcaption, footer, header, hgroup, menu, nav, output, robijn, sectie, samenvatting, tijd, mark, audio, video, input, textarea, select background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: basislijn artikel, afgezien , details, figcaption, cijfer, footer, header, hgroup, menu, navigatie, section display: block body regelhoogte: 1 blockquote, q citaten: none blockquote: vóór, blockquote: na, q: vóór , q: na inhoud: none
lichaam font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; achtergrond: url (... /images/bg.jpg) herhalen; -webkit-font-smoothing: antialiased; .wrapper max-width: 340px; marge: 50px auto;
Ik heb deze tags heel eenvoudig gestructureerd; alles wat we zullen gebruiken is een ankertag (een logische keuze omdat deze waarschijnlijk als links naar ergens of iets zullen fungeren). Voor deze tutorial heb ik het een klasse van "tag" gegeven, maar dit kan worden veranderd naar wat je maar wilt.
hoge resolutie
Goed, door naar het volgende deel! We beginnen nu met het inrichten van de tag - er zit hier behoorlijk wat code maar laat je niet in verwarring brengen, ik zal uitleggen wat er aan de hand is.
Ik heb hier eerst een paar basisdingen toegevoegd;
Vervolgens hebben we enkele lettertype-instellingen, grootte, familie en gewicht gedefinieerd, gevolgd door een kleur en een tekstschaduw. Daarna hebben we wat opvulling toegepast, met behulp van ems, zodat alles de juiste maat heeft ten opzichte van het lettertype of de lettergrootte van de browser. Vervolgens een eenvoudige rand, hoewel we er geen hebben toegepast aan de linkerkant. De ems zijn weer opgedoken! Deze keer passen we ze toe op grensradius, maar alleen de rechterboven- en rechterbenedenhoeken. Oké, ben je nog steeds wakker? Er is meer ... hierna zullen we wat CSS3-gradiënten gebruiken (ik ben doorgegaan en heb de nette Gradient-app gebruikt om de waarden te berekenen). Laatste deel is een aantal doosschaduwen, een inzet- en slagschaduw. Onthoud die voorvoegsels!
.tag float: left; marge: 0 0 7px 20px; position: relative; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: # 996633; tekst-schaduw: 0px 1px 0px rgba (255,255,255, 0,4); opvulling: 0.417em 0.417em 0.417em 0.917em; border-top: 1px solid # d99d38; border-right: 1px solid # d99d38; border-bottom: 1px solid # d99d38; -webkit-border-radius: 0 0,25em 0,25em 0; -moz-border-radius: 0 0,25em 0,25em 0; grensradius: 0 0,25em 0,25em 0; achtergrondafbeelding: -webkit-lineaire gradiënt (boven, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: -moz-lineaire gradiënt (bovenste, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: -ms-lineaire gradiënt (top, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# feda71', EndColorStr = "# feba47"); -webkit-box-shadow: inzet 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); -moz-box-shadow: inzet 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); box-shadow: inzet 0 1px 0 #faeaba, 0 1px 1px rgba (0,0,0, .1); z-index: 100;
Oké, we hebben het hoofdgedeelte van de tag voltooid, het volgende deel is om de pijl te maken. Om dit toe te voegen, gebruiken we de :voor pseudo element. We zullen hier ook experimenteren met een aantal geavanceerde technieken van CSS; transformaties. Het maken van deze pijlen kostte veel vallen en opstaan. Ik moest verschillende breedtes en hoogtes proberen samen met de positionering van de boven- en onderkant om het zo perfect mogelijk te krijgen! Alle feedback is daarom van harte welkom ...
We hebben dezelfde achtergrondgradiënt gebruikt als eerder maar met een kleine wijziging: omdat we het vierkant dat we nu gaan maken zullen roteren, moeten we ook het verloop roteren zodat het overeenkomt met het grootste deel van de label. De app Gradient was handig om me de richting van het verloop te laten wijzigen. Het volgende deel is om enkele randen te maken, links en onderaan. Het enige dat overblijft met betrekking tot de pijl is om een grensradius toe te voegen om het punt glad te strijken en om uiteindelijk onze transformaties toe te passen. We roteren het vierkant dat we 45 graden hebben gemaakt zodat het op een pijl lijkt. We hebben gebruikt transform: 45; samen met de vooraf ingestelde.
.tag: voor content: "; width: 1.30em; height: 1.358em; background-image: -webkit-linear-gradient (left top, rgb (254, 218, 113), rgb (254, 186, 71)) ; achtergrondafbeelding: -moz-lineaire gradiënt (links boven, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: -o-lineaire gradiënt (links boven, rgb ( 254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: -ms-lineaire gradiënt (linksboven, rgb (254, 218, 113), rgb (254, 186, 71)); achtergrondafbeelding: lineair verloop (linksboven, rgb (254, 218, 113), rgb (254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# feda71' , EndColorStr = "# feba47"); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -o-transform: rotate (45deg); transformeren: roteren (45deg); linksonder: 1px vast # d99d38; randbodem: 1px vast # d99d38; -webkit-randradius: 0 0 0 0,25em; -moz-border-radius: 0 0 0 0.25em; grensradius: 0 0 0 0.25em; z-index: 1;
Je zou nu iets moeten hebben dat lijkt op het volgende; Opmerking Ik heb ingezoomd, zodat u kunt zien waar de pijl op het hoofdonderdeel is aangesloten, dit is nauwelijks merkbaar bij weergave op normale grootte.
Het laatste onderdeel om onze tag te voltooien is om het kleine gaatje erop te maken. Hier zullen we opnieuw een pseudo gebruiken, maar deze keer, de :na element. Wat we hebben gedaan om het gat te maken is vrij eenvoudig. We hebben in ems een breedte en hoogte gedefinieerd, zodat deze soepel groeit. Vervolgens hebben we een grote randradius toegevoegd, waarmee een cirkel met een rand wordt gemaakt om deze te omlijnen. Hierna hebben we een slagschaduw toegevoegd die vergelijkbaar is met de tekstschaduw. Eindelijk hebben we het gepositioneerd (tijdens het gebruik van ems).
.tag: after content: "; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid # d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; positie: absoluut; top: 0.667 em; links: -0.083em; z-index: 9999;
Om onze tags nog leuker te maken, voegen we enkele hover-stijlen toe. We moeten dit toevoegen aan het hoofdgedeelte van de tag en de pijl (terwijl we eraan denken om het verloop voor de pijl te roteren). We hebben ook de randkleur op beide gewijzigd.
.tag: hover background-image: -webkit-linear-gradient (top, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -moz-lineaire gradiënt (bovenste, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -o-lineaire gradiënt (bovenste, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -ms-lineaire gradiënt (bovenste, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: lineaire gradiënt (boven, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160; .tag: hover: before background-image: -webkit-linear-gradient (links boven, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -moz-lineaire gradiënt (linkerbovenkant, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -o-lineaire gradiënt (linksboven, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: -ms-lineaire gradiënt (linksboven, rgb (254, 225, 141), rgb (254, 200, 108)); achtergrondafbeelding: lineaire gradiënt (linksboven, rgb (254, 225, 141), rgb (254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 1, StartColorStr = '# fee18d', EndColorStr = "# fec86c"); border-color: # e1b160;
Als u uw tags nog steeds in volle glorie wilt tonen voor IE-gebruikers, moet u deze tags op een andere manier benaderen, door een IE-specifieke stylesheet te maken. Ik zal uitleggen waarom ... Ten eerste zullen veel van onze CSS3-effecten niet werken in versies eerder dan IE9 (slechts een paar werken in IE9 zoals het is), maar het grootste probleem hier is transformaties die niet werken. Om tegemoet te komen aan IE-gebruikers, zullen we onze code een beetje aanpassen. We beginnen met het wijzigen van onze HTML-code door de. Te vervangen wikkel div en alles erin met:
hoge resolutie
We zullen opnieuw een ankertag gebruiken maar met 3 overspanningen erin; we hebben er een nodig om de pijl te maken, het hoofddeel en het einde met de grensradius.
Om ervoor te zorgen dat onze tags in IE werken, moeten we afbeeldingen gebruiken. Begin met het verwijderen van alles onder de .wrapper-stijlen, alles gerelateerd aan tags! U moet nu het volgende fragment plakken. We passen hier eenvoudig enkele achtergrondafbeeldingen toe, maar herhalen ook de tekstachtergrond op de x-as omdat de tekst elke lengte kan hebben! Zelfs Supercalafragalisticexpialadoshus!
.pijl width: 15px; hoogte: 25 pixels; float: left; achtergrond: url (... /images/arrow.png) geen herhaling; .text height: 25px; float: left; padding-left: 4px; padding-right: 4px; achtergrond: url (... /images/text.png) repeat-x; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; color: # 996633; tekst-schaduw: 0px 1px 0px rgba (255,255,255, 0,4); line-height: 23px; .end width: 4px; hoogte: 25 pixels; float: left; achtergrond: url (... /images/end.png) geen herhaling; .tag: hover .arrow background-image: url (... /images/arrow_hover.png); .tag: hover .text background-image: url (... /images/text_hover.png); .tag: hover .end background-image: url (... /images/end_hover.png);
Nou, dat is het dan! Dat is weer een tutorial compleet en het ziet er goed uit! We hebben deze tagtastic-tags gebruikt en deze samen met CSS gemaakt terwijl tegelijkertijd IE werd bediend. Deze tags kunnen voor allerlei dingen worden gebruikt - ga je gang en gebruik ze in een zijbalk, blog, wat je maar wilt!
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen.
Accentsconagua