10 (Meer) CSS-trucs die je waarschijnlijk hebt over het hoofd gezien

Er zijn veel CSS-fragmenten die webontwikkelaars kunnen gebruiken om bepaalde resultaten te bereiken, en er zijn CSS-trucs die u kunt gebruiken voor dingen zoals het verticaal uitlijnen van inhoud. Met CSS als een steeds evoluerende entiteit, stuiteren we keer op keer op coole CSS-trucs die leuk zijn om te weten.

In de post van vandaag introduceer ik je 10 extra CSS-attributen en -trucs die u misschien niet kent.

1. Schrijf verticaal

Er is een CSS-kenmerk genaamd schrijven-modus die een van deze drie waarden accepteert; horizontale-tb, verticale-rl en verticale-lr.

horizontale-tb is de standaard en veroorzaakt de typische horizontale naar links gerichte tekstflow in een element.

De verticaal-* waarden zijn echter voor verticale blokstroom, waardoor tekst van boven naar beneden wordt geschreven door de browsers. In verticale-rl, nieuwe regels worden toegevoegd aan de linkerkant van de vorige en vice versa voor verticale-lr.

Dit is handig voor talen zoals Chinees en Japans weergeven die meestal van boven naar beneden worden geschreven en ook voor wanneer u tekst verticaal wilt weergeven om horizontale ruimte te besparen, zoals in tabelkoppen.

Notitie: Als u de richtingen van individuele letters wilt bepalen, kunt u de tekstrichting gebruiken door ze naar wens rechtop of opzij te draaien.

 -webkit-schrijfmodus: verticaal-rl; -ms-write-mode: tb-rl; schrijfmodus: verticaal-rl; 

2. Kleurwaarde opnieuw gebruiken

Het sleutelwoord currentcolor heeft de waarde van kleur attribuut en kan worden gebruikt in andere attributen die kleurwaarden zoals accepteren achtergrond.

div background: lineair verloop (90deg, currentColor 50%, black 50%); ... kleur: # FFD700; / * currentColor is # FFD700 * / 

3. Meng achtergronden

Een element kan meer dan één achtergrond hebben (een achtergrondkleur en meerdere achtergrondafbeeldingen). De background-blend-mode mengt ze allemaal samen volgens de gegeven mengmodus. Er zijn momenteel in totaal 16 overvloeimodi.

achtergrond-blend-modus: verschil; 

4. Meng elementen

mix-blend-modus combineert de inhoud en achtergronden van overlappende elementen. Chrome lijkt niet alle modi te ondersteunen, ook al is Firefox dat wel.

mix-blend-modus: kleur; 

Ik nam twee elementen, een img het beeld van een roos en een tonen span met een grafische achtergrond, gestapeld en een paar mix-blend-modi toegepast.

5. Negeer Aanwijzergebeurtenissen

U kunt een element maken dat zich niet bewust is van een pointergebeurtenis door een enkel kenmerk te gebruiken pointer-events. Door te geven pointer-events de waarde van geen in een element voorkomt dit dat het een doelwit is om gebeurtenissen te verplaatsen. IE11 + ondersteuning inbegrepen.

In de volgende demo is er een selectievakje onder twee afbeeldingen die boven elkaar zijn gestapeld. Beide afbeeldingen dragen pointer-events: geen, zodat we kunnen klikken op het selectievakje onder deze begraven. Op basis van de gecontroleerde status van het selectievakje wordt de gewenste afbeelding weergegeven terwijl de andere wordt verborgen.

6. Versier splitsen

Wanneer een vak wordt gesplitst (bijvoorbeeld wanneer een inline-element regeleinden weergeeft), hebben de randen van de gesplitste delen meestal geen vakstijlen en zien ze er in plakken uit. Om dit te voorkomen, kunt u gebruiken box-decoration-break: kloon.

Nu om dat te volgen met een voorbeeld en een vroege "Kerst in de horizon" herinnering, hier is een lijst van Santa's Reindeer die allemaal in één span! Ho! Ho! Ho!

Notitie: Hoewel moderne IE wel ondersteunt box-decoration-break, aan de rand van de grens van het gesplitste gedeelte is de weergave niet vloeiend en ziet de achtergrond er in plakjes uit. Maar het wordt weergegeven box-shadow mooi, daarom heb ik doosschaduwen gebruikt voor zowel rand als achtergrond. Er is ook een afwezigheid van horizontale opvulling in de randen in IE die u mogelijk wilt opvullen met spaties.

7. Tafelelementen samenvouwen

zichtbaarheid: instorten is een kenmerk dat speciaal voor de tabelelementen is gemaakt, zoals rijen en kolommen. Als het op iets anders wordt gebruikt, gedraagt ​​het zich als zichtbaarheid: verborgen. Chrome behandelt het echter wel verborgen zelfs voor tafelelementen.

Wanneer u toewijst zichtbaarheid: instorten op een tabelelement is het verborgen en wordt de ruimte gevuld door de inhoud in de buurt, zoals hoe het zich zou gedragen bij het gebruik Geen weergeven in plaats daarvan.

Maar niet zoals Geen weergeven welke de tabelindeling wijzigt na het verwijderen van de spatie, de lay-out blijft hetzelfde in zichtbaarheid: collapse. U kunt hier meer in detail zien hoe het werkt.

8. Kolommen maken

U kunt een kolomlay-out voor uw inhoud maken met behulp van de kolommen attribuut. Hiermee kunt u opgeven hoeveel kolommen (column-count) en hoe elke kolombreedte (kolombreedte) moeten in een element worden weergegeven.

Als de inhoud anders is dan tekst, zoals bijvoorbeeld een afbeelding, moet u rekening houden met de breedte van de kolom voor die van de kolom. Voor het volgende voorbeeld heb ik alleen gebruikt column-count om te specificeren hoeveel kolommen ik wil.

-webkit-kolom-telling: 2; -moz-kolom-telling: 2; kolom aantal: 2; 

9. Maak elementen wijzigbaar

Een element kan worden aangepast (verticaal, horizontaal of beide) met het CSS3-attribuut verkleinen . De herbruikbaarheid in een textarea kan op dezelfde manier worden uitgeschakeld.

formaat wijzigen: verticaal; formaat wijzigen: horizontaal; formaat wijzigen: beide; formaat wijzigen: geen; 

10. Maak patronen

Er kunnen meerdere CSS3-gradiënten (zowel lineair als radiaal) voor een enkel element zijn en ze kunnen op elkaar worden gestapeld om patronen te maken. Dit stelt ons in staat om maak mooie achtergronden voor elementen zonder externe afbeeldingen te gebruiken. Om het te laten werken, is misschien wat oefening nodig.