15 nyttige CSS triks du kunne ha oversett

Hvis du har vært en frontend webutvikler for en stund, er det stor sjanse for at du har hatt et øyeblikk da du prøvde å finne ut hvordan du kodet noe og realisert etter litt googling, det “det er CSS for det”. Hvis du ikke hadde det, så er du i ferd med å.

Dette innlegget er en samling av slike CSS-koder, som kan gi deg funksjoner som slå et element klebrig, gi deg stiplede linjer understrekkende evner, flyt teksten til siden din i en spesiell form, eller oppnå parallax-effekt. Noen av dem støttes mye mens andre er på vei for full støtte fra alle nettlesere.

1. Nummeroverskrifter og underposisjoner

   Si at du har et sett med overskrifter og underposisjoner i dokumentet ditt, og du nummererer dem manuelt eller via et skript. I stedet kan du bruke CSS tellere til å gjøre dette. Det er allerede et grundig innlegg på det her. Og siden det er fra en CSS2-spesifikasjon, kan du satse på at den støttes av alle nettlesere, bortsett fra kanskje IE 6.

2. Spice Up Plain Underlines

   Noen ganger vil vi understreke med en fin prikket eller strekket linje i stedet for en solid en. Siden det ikke er noe alternativ for det, tar vi oss til nedre kant. Men nedre kant er ikke en god løsning hvis teksten du understreker wraps.

   CSS3 spesifiserte ikke en, men tre nye egenskaper for tekstdekorasjon text-decoration-farge, text-decoration Online, og text-decoration-stil som kan bli shorthanded i den gode gamle text-decoration.

   Du kan bruke dem til å understreke stil, overlinje, til og med gjøre tekst blink, og mer. Fra april 2015 støtter Firefox bare denne egenskapen, men du kan aktivere “eksperimentelle webplattformfunksjoner” å bruke den på Chrome.

3. Sitere et sitat

   Først og fremst er det ikke nødvendig å bry seg med å skrive de riktige krøllete sitatene for korte sitater fordi det er HTML for det: tag som indikerer inline sitater.

   De tag tar også vare på å sitere de indre sitatene med enkelt anførselstegn. Så, hvor er det “det er 'CSS' for det” øyeblikk i dette?

   La oss si at du ikke vil ha standard dobbeltsedler, eller hvis du har mer enn ett nivå av nestede anførselstegn, kan du definere sitatinnstillingene for sitatelementet med CSS ved hjelp av CSS2 sitater eiendom.

4. Administrere ustyrte tabeller

   Du har kanskje kommet over et stort bord med varierende innholdsstørrelse per celle som nekter å forbli innenfor en bredde du har oppgitt, uansett hva du prøver. Tame det bordet med tabell-layout eiendom (for lik kolonnehøyde, følg denne lenken).

   For å være spesifikk, er løsningen i tabelloppsett: fast; verdi. Når du tilordner en fast layout til bordet, bestemmes bordet og cellebredden av bredden på bordet eller den første raden av celler (som kan defineres av brukeren) og ikke av innholdet. Dette støttes av alle nettlesere.

5. Gjør det klebrig

   Sticky elementer er elementer på en side som ikke blir rullet ut av visningen. Med andre ord stikker det til et synlig område (visningsport eller rullingsboks). Du kan opprette dette med CSS ved hjelp av stilling: klebrig.

   De fungerer som relativt postioned elementer før noen rulling og senere som faste elementer når en rullende grense er nådd. For nå, bare Firefox støtter det.

6. Få din tekst i form

   Ønsker du at teksten på siden din skal snurre over et bilde du viser ved siden av det? Du kan prøve CSS figurer. For å implementere CSS-former kan vi benytte tre egenskaper form utenfor, form-margin og form-bilde-terskel. Fra og med april 2015 støttes CSS Shapes av webkit nettlesere.

7. Obligatoriske felt

   Hvis du har et skjema, er det en stor sjanse for at noen felt i det kreves mens andre ikke er. Du må la brukerne vite hvilken er hvilken. CSS for dette er : påbudt :valgfri pseudoklasser. Alle moderne nettlesere støtter dem.

8. Kresen med farger

   Hvis du ikke liker en bestemt farge, som blå, kan vi fargelegge det valgte området med en annen farge og :: utvalg pseudo-element er CSS for det. Dette støttes av alle moderne nettlesere.

9. Sjekket jeg det?

   I en situasjon der en avkrysningsboks er blitt sjekket, ville det være fint å ha en annen indikasjon fra hverandre danner det lille krysset i standard avmerkingsboksen for å angi at varen er sjekket.

   Det er CSS for det som utnytter bindingen mellom de nærmeste søsken, to elementer side om side. CSS har tilstøtende søskenvelger betegnet pluss + signere, og vi kan bruke den til å målrette etiketten ved siden av avmerkingsboksen. Men hva med å markere den merkede avkrysningsruten først? Det er :sjekket pseudoklasse for det.

10. Som en historiebok

    Da ville det ikke vært fint om den første “O” i “Det var en gang” ser pen ut? Vi kan få det til å se pen ut, det er jo CSS for det. Her er hvor ::første bokstav pseudo-elementet kommer til redning. Den retter seg mot første bokstav i den første linjen i det målrettede elementet. Les mer om det her.

11. Vil du vite mer?

    Et element kan ha klasse X eller data Y eller annen verdi til et attributt. Hvis vi noen gang trenger å vise en slik attributtverdi av et element i nærheten av det, kan vi bruke innhold: attr (X). Den henter verdien av attributt X av elementet, så kan vi vise det ved siden av elementet.

12. Litt litt mer til venstre

    Sentrering elementer for CSS nybegynnere er ganske en prestasjon. Ulike elementer krever forskjellige sett med CSS egenskaper for å sentrere dem. Vi vil se på et eksempel ut av mange som er tilgjengelige i verdensomspennende web, slik at du kan huske igjen at det er CSS å sentrere ting.

13. Oppgi filformat for lenker

    Har du sett et lite bilde i nærheten av en lenke som viser hva denne linken er? En PDF? eller en DOC? Ja, det er CSS for å oppnå det. De Innhold: url () er det vi skal bruke til å vise bildet bak linkene.

14. Trigger Parallax Effect

    Parallax-effekten er en effekt som brukes til å beskrive den tilsynelatende sakte bevegelsen av bakgrunnen i forhold til forgrunnen. Denne effekten er populær på nettsteder som implementerer parallell rulling. Det er forskjellige måter å implementere det på, eksempelet nedenfor fungerer i Firefox med bakgrunnsbeslutning: fast;.

15. Kraften til CSS Animasjoner

    Sannsynligvis ikke en stor “det er CSS for det” øyeblikk, fordi du alle er mest sannsynlig klar over CSS animasjoner nå. Men en liten påminnelse er ingen skade. Det er mange bruksområder for CSS animasjoner, men her er en for en enkel fargestyring.

Nå Les: 50 Nyttige CSS-utsnitt Hver designer burde ha