Share
Etiketter er kjent for mange Web 2.0-tjenester, nettsteder og spesielt blogger. Under denne opplæringen skal vi bruke CSS3 til å lage billettlignende koder uten å stole på noen bilder.
Her er en rask nedbryting av prosessen:
La oss begynne med å først legge til markeringen inni hode av dokumentet vårt. Vi har lagt til to stilark: "tut.css" og "tickets.css"; Du kan fjerne tidligere når du vil implementere ditt eget arbeid, men vi bruker det i demoen. Stilarket "tickets.css" inneholder alle stilene som vil formatere våre verktøytips. Her er vårt dokumenthodeoppslag:
Pure CSS3 Billett-lignende Tags
Nå må vi legge til merket for kodene. Vi har brukt en divisjon for hver tag med klassen attributt billett som vi skal bruke til å stile taggene. Da har vi et spenning med klassetributtet sirkel. Til slutt ser du en kobling med tekst for kodene. Her er merketeknikken (jeg la til fire koder som et eksempel, men du kan legge til så mange du ønsker):
CSS3HTML5DesignUtvikling
La oss begynne med å utforme hovedmerkene div (.billett). Her setter vi skriftstiler, sett posisjon til slektning slik at vi kan absolutt posisjonere elementer inne i det (legg merke til det har !viktig fordi uten dette kan vi ikke oppnå de resultatene vi vil ha), bakgrunnsfarge, flytende til venstre som du også kan sette til Ikke sant, så til slutt noen polstring og marginer for avstand.
.billett font-family: Arial; skriftstørrelse: 12px; font-weight: bold; posisjon: relativ! viktig; bakgrunn: # 8dc63f; flyte: venstre; polstring: 7px 3px; margin: 0 5px 5px 0;
Våre koder bør se slik ut.
Nå stiler vi de to øverste hjørner for å få det til å se ut som et utklippskvartal i en sirkel. For å lage dette skal vi bruke pseudo-elementer etter og før. Begge pseudoelementene har samme styling, den eneste forskjellen er det etter er plassert venstre mens før er plassert riktig.
Begynn med å sette innholdsverdien til ingenting, posisjon absolutte, z-indeks til 100 eller en hvilken som helst stor positiv verdi, sett posisjonen fra topp, venstre eller høyre og null. Sett grensebunnsstilen og venstre eller høyre, og til slutt angir vi grense-radius til 20px (nederst til høyre for etter og nederst til venstre for før.
Hvis du vil vite mer om å lage figurer som bruker CSS-grenser, kan du se dette
guide.
.billett: etter innhold: ""; posisjon: absolutt! viktig; z-indeks: 100; topp: 0; venstre: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-grense-radius: 0 0 20px 0; -webkit-grense-radius: 0 0 20px 0; grense-radius: 0 0 20px 0; .ticket: før innhold: ""; posisjon: absolutt! viktig; z-indeks: 100; topp: 0; høyre: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-grense-radius: 0 0 0 20px; -webkit-grense-radius: 0 0 0 20px; grense-radius: 0 0 0 20px;
Våre koder bør se slik ut.
Innenfor koblingene kan vi nå skape effekten av søm ved å bruke grenser og skisser. Vi utformer koblingene med a stiplede 1px oversikt med 40% gjennomsiktig hvit farge, angi kantene med 30% gjennomsiktig svart farge, polstring for å gjøre sømmen ser mer realistisk på kantene, ingen tekstdekorasjon, sett tekstfargen til 50% gjennomsiktig hvit (slik at vi ikke har for å endre tekstfargen hver gang vi endrer bakgrunnsfargen til kodene) og angi hvitt plass til NOWRAP. Til slutt setter vi svingestatistekstfargen til 50% gjennomsiktig svart.
.billett en disposisjon: 1px rgba (255,255,255,0,4) dashed; grense: 1px rgba (0,0,0,0,3) dashed; polstring: 4px 10px 4px 20px; tekst-dekorasjon: ingen; farge: rgba (255,255,255,0,5); hvit-rom: nowrap; .ticket a: svever farge: rgba (0,0,0,0,5);
Våre koder bør se nå ut som dette. Legg merke til at begge utsparingshjørner ligger på toppen av sømmen.
For de nederste hjørner skal vi også bruke pseudoelementer etter og før men denne gangen i lenken. Styling av disse to hjørnene er tydeligvis lik toppkanten, vi endrer bare posisjonen og grensen for å matche sin posisjon.
.billett a: etter innhold: ""; posisjon: absolutt! viktig; z-indeks: 100; bunn: 0; venstre: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-grense-radius: 0 20px 0 0; -webkit-grense-radius: 0 20px 0 0; grense-radius: 0 20px 0 0; .ticket a: før innhold: ""; posisjon: absolutt! viktig; z-indeks: 1000; bunn: 0; høyre: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-grense-radius: 20px 0 0 0; -webkit-grense-radius: 20px 0 0 0; grense-radius: 20px 0 0 0;
Våre koder bør nå se slik ut.
I HTML-oppslaget har vi allerede lagt til et tomt spanelement med klassenavnet sirkel og det er hovedsakelig brukt til å skape vår hullede effekt. Vi bruker grenser og kantlinje igjen for å lage sirkler med null høyde og breddeverdier. Vi stiller sin posisjon til absolutte, z-indeks til et stort positivt nummer, 50% fra toppen, 8 piksler fra venstre med en bokseskygge for å gjøre det ser mer realistisk ut, og til slutt en toppmargin på -5px å justere den perfekt til senteret.
.billett .circle posisjon: absolutt! viktig; z-indeks: 100; grense: 5px #fff solid; -moz-grense-radius: 10px; -webkit-grense-radius: 10px; border-radius: 10px; margin-topp: -5px; bredde: 0; høyde: 0; topp: 50%; igjen: 8px; -moz-boks-skygge: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-boks-skygge: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); boks-skygge: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3);
Våre koder bør se ut til å være komplette!
Min tilnærming for å skape disse billettene har et problem. De fire hjørnene og det hullede hullet endrer ikke farge hvis bakgrunnsfargen endres. Med andre ord, de er ikke gjennomsiktige, og du må endre fargen hver gang du endrer bakgrunnsfargen.
Når det gjelder nettleserkompatibilitet, har dette blitt testet for å fungere på Firefox 4.5+, Chrome 13, Opera 11 og IE9.
Ditt endelige resultat bør se ut som bildet ovenfor. For at sluttresultatet ditt skal se ut akkurat som vår demo, bør du bruke stilene i "tut.css", men vær så snill å legge til dine egne justeringer.
Jeg håper at du har alle lært noen teknikker fra denne CSS opplæringen! Del dine tanker nedenfor :)
Accentsconagua