10 (More) CSS tricks du sandsynligvis overset

Der er masser af CSS-uddrag, som webudviklere kan bruge til at opnå bestemte resultater, og så er der CSS-tricks, som du kan bruge til ting som at tilpasse indhold lodret. Med CSS som en evigvarende enhed, snuble vi gang på gang på kølige CSS-tricks, der er sjove at vide.

I dagens post introducerer jeg dig til 10 flere CSS attributter og tricks, som du måske ikke kender.

1. Skriv lodret

Der er en CSS-attributter kaldet skrivning-tilstand der accepterer en af ​​disse tre værdier; vandret-tb, lodret-rl og lodret-lr.

vandret-tb er standard og det forårsager den typiske venstre til højre vandrette tekststrøm i et element.

Det lodret-* værdier er dog for vertikal blokstrøm, hvilket forårsager, at tekst skrives fra top til bund af browserne. I lodret-rl, Nye linjer tilføjes til venstre for de foregående og omvendt til lodret-lr.

Dette er nyttigt for viser sprog som kinesisk og japansk der typisk skrives fra top til bund, og også til, når du ønsker at vise tekst lodret for at gemme vandret rum, som i tabeloverskrifter.

Bemærk: Hvis du vil styre individuelle bogstaver, kan du bruge tekstorientering til at dreje dem oprejst eller sidelæns efter ønske.

 -webkit-skrive-mode: vertikal-rl; -ms-skrive-mode: tb-rl; skrive-mode: vertikal-rl; 

2. Genbrug farveværdi

Søgeordet currentColor bærer værdien af farve attribut og kan bruges i andre attributter, der accepterer farveværdier som baggrund.

div baggrund: lineær gradient (90deg, nuværendeColor 50%, sort 50%); ... farve: # FFD700; / * currentColor er # FFD700 * / 

3. Blend Baggrunde

Et element kan have mere end en baggrund (en baggrundsfarve og flere baggrundsbilleder). Det baggrund-blend-mode blander dem alle sammen i henhold til den givne blandingstilstand. I øjeblikket er der i alt 16 blandingsformer.

baggrundsmix-tilstand: forskel; 

4. Blandingselementer

mix-mix-mode blander indholdet og baggrunden af ​​overlappende elementer. Chrome ser ikke ud til at understøtte alle de tilstande, selvom Firefox gør det.

mix-blend-mode: farve; 

Jeg tog to elementer, en img viser billedet af en rose og a span med en grafisk baggrund, stablet dem og anvendt et par mix-mix-tilstande.

5. Ignorer pointer Events

Du kan gøre et element uvidende om enhver peger begivenhed ved at bruge en enkelt attribut, der hedder pointer-events. Ved at give pointer-events værdien af ingen i et element forhindrer dette det fra at være et mål for at pege arrangementer. IE11 + support inkluderet.

I den følgende demo er der en afkrydsningsfelt under to billeder stablet over hinanden. Begge billeder bærer peger-begivenheder: ingen, tillader os at klikke på afkrydsningsfeltet begravet under dem. Baseret på den markerede tilstand i afkrydsningsfeltet, vises det ønskede billede, mens det andet er skjult.

6. Dekorer split bokse

Typisk når en kasse er delt (som når et inlineelement vidner om linjeskift), er kanten af ​​de delte portioner blottet for eventuelle boksestile og ser skiverne ud. For at undgå det kan du bruge box-dekoration-break: klon.

Nu for at følge det med et eksempel og en tidlig "Jul i horisonten" påmindelse, her er en liste over Santa's Reindeer alle skrevet i en enkelt span! Ho! Ho! Ho!

Bemærk: Selvom moderne IE understøtter box-dekoration-break, Ved kanten af ​​delingsgrænsen er gengivelsen ikke glat og baggrunden ser skåret ud. Men det gør det box-shadow pænt, hvorfor jeg brugte boksskygger til både grænse og baggrund. Der er også mangel på vandret polstring i kanterne i IE, som du måske vil udfylde med mellemrum.

7. Skjul tabelelementer

synlighed: sammenbrud er en egenskab, der er oprettet kun for tabelelementerne, som rækker og kolonner. Hvis det bruges på noget andet, vil det opføre sig som synlighed: skjult. Chrome behandler det dog skjult selv for bordelementer.

Når du tildeler synlighed: sammenbrud på et bordelement er det skjult, og dets rum er fyldt med det nærliggende indhold - ligesom hvordan det ville opføre sig ved brug display: none i stedet.

Men i modsætning til display: none som ændrer bordlayoutet efter at have fjernet rummet, forbliver layoutet det samme synlighed: kollaps. Du kan se, hvordan det fungerer mere detaljeret herover.

8. Opret kolonner

Du kan oprette et kolonnelayout for dit indhold ved hjælp af kolonner attribut. Det lader dig angive, hvor mange kolonner (kolonne-count) og hvordan hver kolonnebredde (kolonne bredde) skal gengives i et element.

Hvis indholdet er andet end tekst, f.eks. Et billede, skal du huske på den pågældende bredde til kolonnen. I det følgende eksempel bruges jeg kun kolonne-count at angive, hvor mange kolonner jeg vil have.

-webkit-kolonneantal: 2; -moz-kolonneantal: 2; kolonneantal: 2; 

9. Gør elementer tilpasningsberettigede

Et element kan gøres omformet (lodret, vandret eller begge) med CSS3 attributten resize . Ændringsstørrelsen i a textarea kan deaktiveres ved hjælp af det samme.

ændre størrelse: lodret; ændre størrelse: vandret; ændre størrelse: begge resize: none; 

10. Opret mønstre

Der kan være flere CSS3 gradienter (både lineære og radiale) for et enkelt element, og de kan stables på hinanden for at skabe mønstre. Dette giver os mulighed for skabe gode baggrunde til elementer uden brug af eksterne billeder. At gøre det til arbejde kan dog kræve lidt øvelse.