Share
Taggar är en känd egenskap hos många Web 2.0-tjänster, webbplatser och särskilt bloggar. Under denna handledning kommer vi att använda CSS3 för att skapa biljettliknande taggar, utan att förlita sig på några bilder.
Här är en snabb uppdelning av processen:
Låt oss först börja med att lägga till markeringen inuti huvud av vårt dokument. Vi har lagt till två stilark: "tut.css" och "tickets.css"; Du kan ta bort den tidigare när du vill genomföra ditt eget arbete, men vi använder det i demo. Stilsorten "tickets.css" innehåller alla stilar som formaterar våra verktygstips. Här är vår dokumenthuvudmarkering:
Ren CSS3 biljettliknande taggar
Nu måste vi lägga till markeringen för taggarna. Vi har använt en division för varje tagg med klassattribut biljett som vi ska använda för att stämpla taggarna. Då har vi en spänning med klassattribut cirkel. Slutligen ser du en länk med text för taggarna. Här är taggarna markup (jag lade till fyra taggar som ett exempel, men du kan lägga till så många som du vill):
CSS3HTML5DesignUtveckling
Låt oss börja med att stifta huvudkoderna div (.biljett). Här ställer vi in teckensnittsstilar, ställ position till släkting så att vi kan ha absoluta positioner inuti det (märker det har !Viktig för utan detta kan vi inte uppnå de resultat vi vill ha), bakgrundsfärg, flytande till vänster som du också kan ställa in på höger, då äntligen några vadderingar och marginaler för avstånd.
.biljett font-family: Arial; fontstorlek: 12px; font-weight: bold; position: relativ! viktigt; bakgrund: # 8dc63f; flyta till vänster; vaddering: 7px 3px; marginal: 0 5px 5px 0;
Våra taggar ska se ut så här.
Nu utformar vi de två översta hörnen så att det ser ut som ett urklippskvartal av en cirkel. För att skapa detta ska vi använda pseudoelement efter och innan. Båda pseudoelementen har samma styling, den enda skillnaden är det efter är placerad vänster medan innan är placerad rätt.
Börja med att ställa in innehållsvärdet till ingenting, position absolut, z-index till 100 eller något stort positivt värde, ställ dess position från topp, vänster eller höger och noll. Ställ in gränsbotten stilen och vänster eller höger, äntligen ställer vi gränsen till 20px (nederst till höger för efter och längst ner till vänster för innan.
Om du vill lära dig mer om att skapa former som använder CSS-gränssnitt kan du se detta
guide.
.biljett: efter innehåll: ""; position: absolut! viktigt; z-index: 100; topp: 0; vänster: 0; gränsen-höger: #fff 7px solid; border-bottom: #fff 7px solid; -moz-gränsen-radien: 0 0 20px 0; -webkit-gränsradien: 0 0 20px 0; gränsstråle: 0 0 20px 0; .ticket: före innehåll: ""; position: absolut! viktigt; z-index: 100; topp: 0; höger: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-gränsen-radien: 0 0 0 20px; -webkit-gränsradien: 0 0 0 20px; gränsstråle: 0 0 0 20px;
Våra taggar ska se ut så här.
Inom länkarna kan vi nu skapa effekten av sömnad genom att använda gränser och konturer. Vi utformar länkarna med a streckade 1px kontur med 40% transparent vit färg, sätt gränserna med 30% genomskinlig svart färg, vadderar för att göra syningen mer realistisk på kanterna, ingen textdekoration, sätt textfärg till 50% transparent vit (så att vi inte har för att ändra textfärgen varje gång vi ändrar bakgrundsfärgen på taggarna) och ställa in vitt utrymme till nowrap. Slutligen ställer vi in svarta textfärgen till 50% transparent svart.
.biljett en skiss: 1px rgba (255,255,255,0,4) dashed; gränsen: 1px rgba (0,0,0,0,3) streckad; vaddering: 4px 10px 4px 20px; text-dekoration: ingen; färg: rgba (255,255,255,0,5); white-space: nowrap; .ticket a: svävar färg: rgba (0,0,0,0,5);
Våra taggar ska se ut så här. Observera att båda utklippshornen ligger ovanpå sömmen.
För de nedre hörnen kommer vi också att använda pseudoelement efter och innan men den här gången inom länken. Styling av dessa två hörn är uppenbarligen liknande de övre hörnen, vi ändrar bara positionen och gränsen för att matcha deras position.
.biljett a: efter innehåll: ""; position: absolut! viktigt; z-index: 100; botten: 0; vänster: 0; gränsen-höger: #fff 7px solid; border-top: #fff 7px solid; -moz-gränsen-radien: 0 20px 0 0; -webkit-gränsradien: 0 20px 0 0; gränsstråle: 0 20px 0 0; .ticket a: före innehåll: ""; position: absolut! viktigt; z-index: 1000; botten: 0; höger: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-gränsen-radien: 20px 0 0 0; -webkit-gränsradien: 20px 0 0 0; gränsen: 20px 0 0 0;
Våra taggar ska nu se ut så här.
I HTML-märkningen har vi redan lagt till ett tomt spännelement med klassnamnet cirkel och det används främst för att skapa vår stanshålseffekt. Vi använder gränser och radie för att skapa cirklar med nollhöjd och breddvärden. Vi ställer in sin position till absolut, z-index till ett stort positivt tal, 50% från toppen, 8px från vänster med en boxskugga för att få det att se mer realistiskt ut, och slutligen en toppmarginal på -5px att anpassa det perfekt till mitten.
.biljett .circle position: absolut! viktigt; z-index: 100; gränsen: 5px #fff solid; -moz-gränsen-radien: 10px; -webkit-gräns-radie: 10px; gränsstråle: 10px; marginal-topp: -5px; bredd: 0; höjd: 0; topp: 50%; vänster: 8px; -moz-box-skugga: 0-1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-box-skugga: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); boxskugga: 0-1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3);
Våra taggar ska se ut att vara kompletta!
Mitt sätt att skapa dessa biljetter har ett problem. De fyra hörnen och det stansade hålet ändrar inte färgen om bakgrundsfärgen ändras. Med andra ord är de inte transparenta och du behöver ändra färg varje gång du ändrar bakgrundsfärgen.
När det gäller webbläsarkompatibilitet har detta testats för att fungera Firefox 4.5+, Chrome 13, Opera 11 och IE9.
Ditt slutresultat bör se ut som bilden ovan. För att ditt slutresultat ska kunna se ut precis som vår demo bör du använda stilerna inom "tut.css", men gärna lägga till egna justeringar.
Jag hoppas att du har lärt dig några tekniker från den här CSS-handledningen! Dela dina tankar nedan :)
Accentsconagua