Share
Vandaag starten we met een tutorial over hoe je je eigen sappige tagwolk kunt ontwerpen en coderen met behulp van Photoshop, CSS en een paar kleine afbeeldingen! We zullen de eeuwenoude schuifdeuren-techniek gebruiken, maar we zullen een aantal geavanceerde CSS-selectormethoden aan het einde toevoegen voor het geval je de envelop wilt duwen en gebruiken in WordPress. Klaar voor de start, af!
Een beetje Pools op de juiste plekken kan een anders standaard paginaontwerp extra opfleuren. Vandaag gaan we doorlopen hoe u uw eigen aangepaste variant van het "tag cloud" -element kunt maken die u tegenwoordig in vrijwel elk blogsysteem kunt vinden.
We zullen snel door het ontwerp bladeren (het is gemakkelijk plassen), en dan graven in de CSS die dit alles samenbrengt. Gebruik het in je eigen projecten, laat het in een persoonlijke blog vallen, het is helemaal aan jou? laten we erin duiken!
De CSS-puristen in het publiek kunnen zich ineenkrimpen omdat we Photoshop gaan openen. Waarom? Omdat we een volledig aangepast tagontwerp willen maken. Kan dit specifieke label dat we vandaag gebruiken worden behaald in CSS? Waarschijnlijk - ik ben er zeker van dat sommige CSS-ninja's daar snel op zullen wijzen dat dit slechts basisvormen zijn? maar wat als je textuur wilde toevoegen? Of een geheel andere vorm (geschulpte randen, niemand)?
Afgezien van de browserhoofdpijnen om te proberen dit alleen met CSS te laten werken, komt het erop neer dat het goed is om te weten hoe je afbeeldingen en CSS tegelijk kunt gebruiken, dus dat is precies wat we gaan doen.
Ga je gang en start Photoshop. Open een nieuw document met de afmetingen 71px bij 29px.
De breedte maakt hier eigenlijk niet zoveel uit? maar de hoogte zal iets zijn dat je wilt onthouden.
Laten we vervolgens tekenen afgeronde rechthoek op ons document met een straal van 2px. Laat een beetje ruimte over voor een slagschaduw later? in ons geval heb ik 2px aan de onderkant en zijkanten achtergelaten.
Nu is het tijd om onze aangepaste vorm te maken. We zullen Photoshop's gebruiken Voeg punt toe en Converteer punt hulpmiddelen. Er is niet veel meer dan alleen maar sleutelen aan de punten totdat je de vorm hebt die je wilt, dus speel wat rond. Hier is de onze:
We hebben echter een klein gaatje in onze tag nodig? weet je, dus mensen kunnen er een virtuele string doorheen lussen. Ok, misschien niet, maar het voegt een beetje extra flair voor ons toe die niet mogelijk zou zijn met CSS. Gebruik de Elliptical Marquee tool en teken een cirkelvormige selectie (houd de Shift-toets ingedrukt terwijl je tekent om het perfect te houden).
Nadat u uw selectie hebt gemaakt, selecteert u de inverse van de selectie (Selecteer> Inverse) en verander het in een vectormasker over je tagvorm met behulp van de Breng een laag masker aan knop onderaan het laaginspecteur.
Omwille van de beknoptheid (we willen toch bij het codeergedeelte komen?), Laten we hier de laagstijlen doornemen. U kunt uw eigen aanpassingen toevoegen, maar hier ziet onze eruit:
Het eindresultaat zou er als volgt uit moeten zien:
Je zult het opmerken in de PSD (in de map Downloaden voor deze zelfstudie) die ik ook in onze tekst heb toegevoegd. Voel je vrij om hetzelfde te doen voor het geval je dit in een ontwerpmodel moet gebruiken.
Notitie: U kunt de richting van de tag eenvoudig zelf omkeren. In de coderingsfase laten we u zien hoe u de tag met naar links gericht en naar rechts gericht kunt maken.
Woot! Dus we hebben onze tag ontworpen? maar hoe gaan we het gebruiken in een echte webpagina? We beginnen met het opdelen van onze tag in drie delen:
Sla deze allemaal op als PNG-afbeeldingen om de transparantie te behouden en op te slaan in een map met de naam "afbeeldingen".
Nu moeten we onze standaardmarkup maken. We gaan dit beginnen met een eenvoudige, logische benadering met lagen van DIV's, maar zoals met alle dingen gerelateerd aan de code, kunnen we dit opruimen (en de benodigde hoeveelheid code verminderen) in de latere stappen.
Dit is onze standaardmarkering voor elke tag:
Ontwerp
Laten we dit snel bekijken: we hebben in essentie een hoofdtagwikkelaar DIV (.tag), met drie geneste DIV's:
U kunt dit codeblok enkele keren herhalen om meerdere naast elkaar gestapelde tags uit te testen.
Nu is het tijd om onze CSS toe te voegen.
We beginnen de CSS door enkele basisregels toe te passen op elk van onze div's. Ik zal je de code voor elk tonen en dan uitleggen wat het doet:
Accentsconagua
.tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); zweven: links; / * Zorgt ervoor dat elke tag in één stuk bijelkaar blijft * / marge: 5px; .tag .center background: url ("images / gradient.png") repeat-x scroll naar links naar boven transparant; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: auto; opvulling: 0px 6px; / * Geef de tekst een beetje ruimte om te ademen * / .tag .center a vertical-align: middle; / * Belangrijk voor het perfect invoegen van de tekst * / regelhoogte: 21pt; / * Belangrijk voor het perfect inpassen van de tekst * / color: # 0f2d39; tekstdecoratie: geen; Dit codeblok stelt het element in dat zich om onze tag wikkelt; Houd er rekening mee dat we hier enkele typevoorschriften toevoegen, een eenvoudige float en een marge tussen elke tag om ze weg te strepen.
De tweede twee regels in de bovenstaande CSS dekken het middelste gedeelte van de tag - het vaststellen van de achtergrondgradiënt en enige spatiëring.
Op dit punt zou u een aantal tags moeten hebben die er als volgt uitzien:
Laten we nu wat styling voor de linker- en rechterelementen toevoegen.
.tag-left .left background: url ("images / tagleft_left.png") no-repeat scroll naar links naar boven transparant; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 15px; / * Idem als de breedte van uw afbeelding * / .tag-left .recht background: url ("images / tagleft_right.png") no-repeat scroll right top transparent; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 4px; / * Hetzelfde als de breedte van uw afbeelding * / Het bovenstaande codeblok doet drie belangrijke dingen:
Nu moeten je tags bijna in de buurt komen om te voltooien:
Maar wat als we een ander type tag willen opnemen? zeg iemand die de andere kant op kijkt? Dat is waar de "tag-links" en "tag-right" selectors in het spel komen. Door deze op het hoogste niveau toe te voegen, kunnen we eigenlijk nog een paar regels aan onze CSS toevoegen om een compleet andere tag toe te staan:
.tag-right .left background: url ("images / tagright_left.png") no-repeat scroll naar links naar boven transparant; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 4px; / * Idem als de breedte van uw afbeelding * / .tag-right .recht background: url ("images / tagright_right.png") no-repeat scroll right top transparent; weergave: blok; zweven: links; hoogte: 29 px; / * Idem als de hoogte van uw afbeelding * / width: 16px; / * Hetzelfde als de breedte van uw afbeelding * / Welke u de juiste "right-tag" -stijl moet geven:
Gedaan! Nou, sorta? om eerlijk te zijn, dit is een heel zware manier om dit effect te hanteren. In de volgende stap nemen we u mee naar enkele meer geavanceerde CSS-kiezers voor een meer sierlijke aanpak.
Google Fonts Opmerking: U hebt misschien gemerkt dat ik hier een aangepast lettertype gebruik (Droid Sans). Je eigen aangepaste lettertype toevoegen is eenvoudig, ga naar de Google Fonts-site, zoek het lettertype dat je leuk vindt en voeg de insluitcode en CSS-regel voor het lettertype toe.
Het mooie aan de Google-lettertypen (of iets dergelijks) is dat je de meeste CSS-lettertypen kunt toepassen op de tekst? dit betekent dat we attributen zoals kunnen gebruiken schaduw tekst om het subtiele lichteffect te creëren.
Iedereen die al een tijdje codeert, vertelt je dat er ALTIJD een manier is om een stuk code te verbeteren. Dat is precies wat we in deze laatste stap gaan doen.
Laten we beginnen door te bekijken wat er is onbevallig over de vorige aanpak.
Hier is een andere benadering met behulp van CSS :voor en :na selectors om de last lichter te maken.
Laten we beginnen met het bekijken van de originele CSS in zijn geheel, en het dan opnieuw schrijven met behulp van onze selectors:
/ * Generieke tagstijl / typografie ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag font-size: 11pt; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); zweven: links; / * Zorgt ervoor dat elke tag in één stuk bijelkaar blijft * / marge: 5px; .tag .center background: url ("images / gradient.png") repeat-x scroll naar links naar boven transparant; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: auto; opvulling: 0px 6px; / * Geef de tekst een beetje ruimte om te ademen * / .tag .center a vertical-align: middle; / * Belangrijk voor het perfect invoegen van de tekst * / regelhoogte: 21pt; / * Belangrijk voor het perfect inpassen van de tekst * / color: # 0f2d39; tekstdecoratie: geen; / * Regels voor linkslabels ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++ * / .tag-left .left background: url ("images / tagleft_left.png") no-repeat scroll links boven transparant; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 15px; / * Idem als de breedte van uw afbeelding * / .tag-left .recht background: url ("images / tagleft_right.png") no-repeat scroll right top transparent; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 4px; / * Idem als de breedte van uw afbeelding * / / * Regels voor rechtslabels +++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * / .tag-right .left background: url ("images / tagright_left .png ") no-repeat scroll naar links boven transparant; weergave: blok; zweven: links; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 4px; / * Idem als de breedte van uw afbeelding * / .tag-right .recht background: url ("images / tagright_right.png") no-repeat scroll right top transparent; weergave: blok; zweven: links; hoogte: 29 px; / * Idem als de hoogte van uw afbeelding * / width: 16px; / * Hetzelfde als de breedte van uw afbeelding * / / * Generieke tagstijl / typografie ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++ * / .tag float: left; marge: 5px; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: auto; .tag a background: url ("images / gradient.png") repeat-x scroll naar links naar boven transparant; zweven: links; hoogte: 29 px; opvulling: 5px 6px; kleur: # 0F2D39; lettergrootte: 11pt; tekstdecoratie: geen; text-shadow: 0 1px 1px rgba (255, 255, 255, 0.4); .tag: before content: "; background: url (" images / tagleft_left.png ") no-repeat scroll 0 0 transparent; display: block; float: left; height: 29px; / * idem als uw beeldhoogte * / width: 15px; / * Idem als de breedte van uw afbeelding * / .tag: after content: "; achtergrond: url ("images / tagleft_right.png") no-repeat scroll 0 0 transparent; weergave: blok; zweven: rechts; hoogte: 29 px; / * Gelijk aan uw afbeeldingshoogte * / width: 4px; / * Gelijk aan de breedte van uw afbeelding * / / * Flip-tag-regels +++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++ * / .tag.flip: voor content: "; background: url ( "images / tagright_left.png") no-repeat scroll naar links boven transparant; weergave: blok; zwevend: links; hoogte: 29px; / * Gelijk aan uw beeldhoogte * / breedte: 4px; / * Gelijk aan uw beeldbreedte * / .tag.flip: na content: "; achtergrond: url ("images / tagright_right.png") no-repeat scroll rechts boven transparant; weergave: blok; zweven: rechts; hoogte: 29 px; / * Idem als de hoogte van uw afbeelding * / width: 16px; / * Hetzelfde als de breedte van uw afbeelding * / Wat is anders? Om te beginnen hebben we de behoefte aan de linker- en rechterelementen binnen de DIV geëlimineerd.
Vergelijk hier gewoon de oude markup en de nieuwe markup:
Ontwerp
Ontwerp Door de :voor en :na selectors, we kunnen onze 'schuifdeuren' effectief in de opmaak injecteren zonder extra belasting. Het resultaat is een veel schoner stuk markup en een die echt werkt op alle moderne browsers! We zijn ook overgeschakeld van het gebruik van DIV-elementen naar eenvoudige SPAN-elementen (SPANs zijn hier iets logischer).
Dus wat als we een hover-status willen voor onze tags? Het is eigenlijk gewoon eigenlijk - voeg gewoon een paar nieuwe regels toe met de : hover selector geplaatst tussen onze class-selector en de :voor en :na selectors.
Bijvoorbeeld:
.tag: hover: vóór
Dat behandelt het selectieprobleem - vanaf hier kun je eigenlijk je eigen variatie toevoegen van wat er gebeurt met de muisaanwijzer. U kunt alles doen, van het wijzigen van de tekstkleur tot de dekking, of zelfs de eigenlijke achtergrondafbeeldingen wijzigen. Dit is wat we in de demo hebben gebruikt:
/ * Muis-zweefregels ++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++ * / .tag a: hover background: url ("images / gradient_hover.png") repeat-x scroll naar links naar boven transparant; .tag: hover: before background: url ("images / tagleft_left_hover.png") no-repeat scroll 0 0 transparent; .tag: hover: after background: url ("images / tagleft_right_hover.png") no-repeat scroll 0 0 transparent; .tag.flip: hover: before background: url ("images / tagright_left_hover.png") no-repeat scroll naar links naar boven transparant; .tag.flip: hover: after background: url ("images / tagright_right_hover.png") no-repeat schuif rechts bovenaan transparant; Merk op dat het uitwisselen van de afbeelding een snel flikkeringseffect kan geven wanneer de beelden voor het eerst worden geladen? er zijn manieren om hiermee om te gaan, maar dat is een andere tutorial;)
Het gebruik van deze kleine truc in WordPress is ook vrij eenvoudig. Bekijk de WordPress Codex-pagina op de "the_tags" -functie die u normaal gesproken zou gebruiken in een van de sjabloonbestanden? we zullen kijken hoe we de markeringen kunnen wijzigen die worden gebruikt om de tags uit te spuwen.
Hier is een voorbeeld van hoe je de gesmolten tags kunt veranderen in een ongeordende lijst:
We zouden dat gewoon veranderen om ons eigen systeem te evenaren:
'''''); ?> Dat is het! Voeg de bijbehorende CSS toe aan uw style.css-bestand (of welk CSS-bestand dan ook dat u in uw thema gebruikt) en u zou enkele geweldige kleine aangepaste tags klaar moeten hebben om te gaan!
Bedankt voor het volgen van iedereen :) Opmerkingen over hoe we dit kunnen verbeteren of het anders kunnen doen, zijn altijd welkom!
