Share
Tags zijn een vertrouwde functie van veel Web 2.0-services, websites en vooral blogs. Tijdens deze zelfstudie gebruiken we CSS3 om kaartachtige tags te maken, zonder te vertrouwen op afbeeldingen.
Dit is een snel overzicht van het proces:
Laten we beginnen door eerst de opmaak toe te voegen binnen de hoofd van ons document. We hebben twee stijlbladen toegevoegd: "tut.css" en "tickets.css"; Je kunt het eerste verwijderen wanneer je je eigen werk wilt implementeren, maar we gebruiken het in de demo. Het typogram "tickets.css" bevat alle stijlen die onze tooltips zullen opmaken. Dit is onze opmaak van het documentkop:
Zuivere CSS3-kaartachtige tags
Nu moeten we de markup voor de tags toevoegen. We hebben een indeling gebruikt voor elke tag met class-kenmerk ticket die we zullen gebruiken om de tags te stylen. Dan hebben we een bereik met klassenattribuut cirkel. Ten slotte ziet u een koppeling met tekst voor de tags. Hier is de markeringen van de tags (ik heb vier tags toegevoegd als voorbeeld, maar u kunt er zoveel toevoegen als u wilt):
CSS3HTML5OntwerpOntwikkeling
Laten we beginnen met het stylen van de hoofdtags div (.ticket). Hier stellen we letterstijlen in, positie instellen op familielid zodat we absolute elementen erin kunnen plaatsen (merk op !belangrijk omdat zonder dit we niet de gewenste resultaten kunnen bereiken), achtergrondkleur, zwevend naar links waar je ook op kunt instellen rechts, dan eindelijk wat opvulling en marges voor afstand.
.ticket font-family: Arial; lettergrootte: 12px; lettertype: vet; positie: relatief! belangrijk; achtergrond: # 8dc63f; zweven: links; opvulling: 7px 3px; marge: 0 5px 5px 0;
Onze tags moeten er zo uitzien.
Nu stylen we de bovenste twee hoeken om het eruit te laten zien als een uitgesneden kwart van een cirkel. Om dit te creëren gaan we pseudo-elementen gebruiken na en voor. Beide pseudo-elementen hebben dezelfde stijl, het enige verschil is dat na is links geplaatst terwijl voor is gepositioneerd.
Begin met het instellen van de inhoudswaarde op niets, positie absoluut, z-index naar 100 of een grote positieve waarde, stel de positie in van boven, links of rechts en nul. Stel de border-bottom-stijl in en links of rechts, dan stellen we tenslotte randradius in op 20px (rechter benedenhoek voor na en linksonder voor voor.
Voor meer informatie over het maken van vormen met CSS-randenstijlen kunt u dit bekijken
gids.
.ticket: na content: ""; positie: absoluut! belangrijk; z-index: 100; boven: 0; links: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; grensradius: 0 0 20px 0; .ticket: vóór content: ""; positie: absoluut! belangrijk; z-index: 100; boven: 0; rechts: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; grensradius: 0 0 0 20px;
Onze tags moeten er zo uitzien.
Binnen de links kunnen we nu het effect van naaien creëren door randen en contouren te gebruiken. We stylen de links met een gestippeld 1px omtrek met 40% transparante witte kleur, stel de randen in met 30% transparante zwarte kleur, opvulling om de naden er realistischer uit te laten zien aan de randen, geen tekstversiering, stel de tekstkleur in op 50% transparant wit (zodat we geen om de tekstkleur te veranderen telkens wanneer we de achtergrondkleur van de tags wijzigen) en stel witruimte in op nowrap. Ten slotte stellen we de tekstkleur van de zweeftekst in op 50% transparant zwart.
.ticket a outline: 1px rgba (255,255,255,0,4) onderbroken; rand: 1px rgba (0,0,0,0.3) gestreept; opvulling: 4px 10px 4px 20px; tekstdecoratie: geen; kleur: rgba (255,255,255,0,5); white-space: nowrap; .ticket a: hover color: rgba (0,0,0,0.5);
Onze tags moeten er nu zo uitzien. Merk op dat zowel de uitgesneden hoeken bovenop het stiksel liggen.
Voor de onderste hoeken gaan we ook pseudo-elementen gebruiken na en voor maar deze keer binnen de link. De vormgeving van deze twee hoeken is duidelijk vergelijkbaar met de bovenste hoeken, we veranderen gewoon de positie en de rand om hun positie te matchen.
.ticket a: after content: ""; positie: absoluut! belangrijk; z-index: 100; onderkant: 0; links: 0; border-right: #fff 7px solid; border-top: #fff 7px solide; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; grensradius: 0 20px 0 0; .ticket a: before content: ""; positie: absoluut! belangrijk; z-index: 1000; onderkant: 0; rechts: 0; border-left: #fff 7px solid; border-top: #fff 7px solide; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; grensradius: 20 px 0 0 0;
Onze tags moeten er nu zo uitzien.
In de HTML-markering hebben we al een leeg bereikelement met de klassenaam toegevoegd cirkel en het wordt voornamelijk gebruikt om ons 'punched hole'-effect te creëren. We gebruiken opnieuw randen en randradius om cirkels te maken met nul- en breedtewaarden. We zullen hun positie bepalen absoluut, z-index naar een groot positief getal, 50% van boven, 8px van links met een doosschaduw om het er realistischer uit te laten zien, en tot slot een topmarge van -5px om het perfect op het midden uit te lijnen.
.ticket .cirkel positie: absoluut! belangrijk; z-index: 100; border: 5px #fff solid; -moz-border-radius: 10px; -webkit-border-radius: 10px; grensradius: 10px; margin-top: -5px; breedte: 0; hoogte: 0; top: 50%; links: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0,3); -webkit-vak-schaduw: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0,3); vakschaduw: 0 -1px 0 rgba (0,0,0,0.5), 0 1px 0 rgba (255,255,255,0,3);
Onze tags moeten er compleet uitzien!
Mijn aanpak voor het maken van deze tickets heeft een probleem. De vier hoeken en het geponste gat veranderen niet van kleur als de achtergrondkleur wordt gewijzigd. Met andere woorden, ze zijn niet transparant en u moet hun kleur veranderen elke keer dat u de achtergrondkleur verandert.
Wat betreft browsercompatibiliteit is getest om aan te werken Firefox 4.5+, Chrome 13, Opera 11 en IE9.
Uw eindresultaat moet er uitzien als de afbeelding hierboven. Om er precies zo uit te zien als onze demo, zou je de stijlen in "tut.css" moeten gebruiken, maar voel je vrij om je eigen aanpassingen toe te voegen.
Ik hoop dat jullie allemaal wat technieken uit deze CSS-tutorial hebben geleerd! Deel je gedachten hieronder :)
Accentsconagua