10 (More) CSS triks du sannsynligvis oversett

Det er mange CSS-utdrag som webutviklere kan bruke til å oppnå bestemte resultater, og så er det CSS-triks som du kan bruke for ting som tilpasser innholdet vertikalt. Med CSS som en stadig evolusjonerende enhet, snubler vi gang på gang på kule CSS-triks som er morsomme å vite.

I dagens innlegg, introduserer jeg deg til 10 flere CSS-attributter og triks som du kanskje ikke vet.

1. Skriv vertikalt

Det er et CSS-attributt som heter skrive-modus som aksepterer en av disse tre verdiene; horisontal-tb, vertical-rl og vertical-lr.

horisontal-tb er standard og det forårsaker den typiske venstre til høyre horisontale tekstflyten i et element.

De innbyrdes vertikalt * verdiene er imidlertid for vertikal blokkstrøm, noe som forårsaker at tekst skrives fra topp til bunn av nettleserne. I vertical-rl, Nye linjer legges til venstre for de forrige og omvendt for vertical-lr.

Dette er nyttig for viser språk som kinesisk og japansk som vanligvis skrives fra topp til bunn, og også for når du ønsker å vise tekst vertikalt for å lagre horisontal plass, som i tabelloverskrifter.

Merk: Hvis du vil kontrollere individuelle bokstaveres retninger, kan du bruke tekstorientering å snu dem oppreist eller sidelengs, etter ønske.

 -webkit-skrivemodus: vertikal-rl; -ms-skrivemodus: tb-rl; skrivemodus: vertikal-rl; 

2. Gjenbruk Farge Verdi

Søkeordet current bærer verdien av farge attributt og kan brukes i andre attributter som godtar fargeverdier som bakgrunn.

div bakgrunn: lineær gradient (90deg, nåværendeColor 50%, svart 50%); ... farge: # FFD700; / * currentColor er # FFD700 * / 

3. Blend Bakgrunn

Et element kan ha mer enn én bakgrunn (en bakgrunnsfarge og flere bakgrunnsbilder). De Bakgrunnen-blanding-modus blander dem alle sammen i henhold til den givne blandingstilstanden. Det er i alt totalt 16 blandingstilstander for øyeblikket.

bakgrunnsblandingsmodus: forskjell; 

4. Blandingselementer

mix-blend-modus blander innholdet og bakgrunnene til overlappende elementer. Chrome ser ikke ut til å støtte alle modiene, selv om Firefox gjør det.

blandingsmodus: farge; 

Jeg tok to elementer, en img viser bildet av en rose og a span med en grafisk bakgrunn, stablet dem og anvendt noen blandingsmoduser.

5. Ignorer Pointer Events

Du kan gjøre et element uvitende om noen pekerhendelse ved å bruke et enkelt attributt som heter peker-hendelser. Ved å gi peker-hendelser verdien av ingen i et element forhindrer dette at det er et mål å peke hendelser. IE11 + støtte inkludert.

I den følgende demoen er det en avkrysningsboks under to bilder stablet over hverandre. Begge bildene bærer peker-hendelser: ingen, slik at vi kan klikke i boksen begravet under dem. Basert på den merkede statusen i avkrysningsboksen, vises ønsket bilde mens den andre er skjult.

6. Dekorer Split Boxes

Vanligvis når en boks er delt (som når et inlineelement opplever linjeskift), er kantene på de splittede delene blottet for noen boksestiler og ser skiver ut. For å unngå det, kan du bruke box-dekorasjon-break: klone.

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

Merk: Selv om moderne IE støtter box-dekorasjon-break, På kanten av delingsgrensen er rendering ikke jevn og bakgrunnen ser skiver ut. Men det gjør det box-shadow pent, derfor brukte jeg boksskygger for både grense og bakgrunn. Det er også mangel på horisontal polstring i kantene i IE som du kanskje vil fylle med mellomrom.

7. Skjul tabellelementer

synlighet: kollaps er et attributt laget bare for tabellelementene, som rader og kolonner. Hvis brukt på noe annet, vil det oppføre seg som synlighet: skjult. Chrome skjønner likevel det skjult selv for bordelementer.

Når du tilordner synlighet: kollaps På et bordelement er det skjult og dets plass er fylt av nærliggende innhold - som hvordan det ville oppføre seg ved bruk display: none i stedet.

Men i motsetning til display: none som endrer tabelloppsettet etter å ha fjernet plassen, forblir layoutet det samme synlighet: kollaps. Du kan se hvordan det fungerer mer detaljert her.

8. Lag kolonner

Du kan opprette en kolonneoppsett for innholdet ditt ved hjelp av kolonner Egenskap. Den lar deg angi hvor mange kolonner (kolonne-count) og hvordan hver kolonnebredde (kolonnebredde) skal gjengis i et element.

Hvis innholdet er annet enn tekst, som for eksempel et bilde, må du huske at den er bredde respektive til kolonnens. For det følgende eksempelet brukte jeg bare kolonne-count å angi hvor mange kolonner jeg vil ha.

-webkit-kolonne-telling: 2; -moz-kolonne-telling: 2; kolonne telling: 2; 

9. Gjør elementene tilpasningsbare

Et element kan gjøres omformet (vertikalt, horisontalt eller begge deler) med CSS3-attributten endre størrelse på . Endringsstørrelsen i a textarea kan deaktiveres med det samme.

endre størrelse: vertikal; endre størrelse: horisontal; endre størrelse: begge deler; endre størrelse: ingen; 

10. Lag mønstre

Det kan være flere CSS3-gradienter (både lineær og radial) for et enkelt element, og de kan piles på hverandre for å lage mønstre. Dette tillater oss å Lag fine bakgrunner for elementer uten å bruke eksterne bilder. Å gjøre det arbeid kan kreve litt øvelse skjønt.