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-trucjes die u kunt gebruiken voor dingen zoals het verticaal uitlijnen van inhoud. Omdat CSS een steeds evoluerende entiteit is, stuiteren we keer op keer op coole CSS-trucs die leuk zijn om te weten.

In het bericht van vandaag introduceer ik je nog 10 CSS-attributen en -trucs die je misschien nog niet kent .

1. Schrijf verticaal

Er is een CSS-attribuut genaamd writing-mode die een van deze drie waarden accepteert; horizontal-tb, vertical-rl en vertical-lr .

horizontal-tb is de standaardinstelling en veroorzaakt de typische horizontale naar links horizontal-tb tekstflow in een element.

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

Dit is handig voor het weergeven van talen zoals Chinees en Japans 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.

Opmerking: als u de richtingen van afzonderlijke 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 trefwoord currentColor bevat de waarde van het currentColor en kan worden gebruikt in andere kenmerken die kleurwaarden zoals background accepteren.

 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 overvloeimodus. 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 met het beeld van een roos en een span met een grafische achtergrond, stapelde ze en paste een paar mix-blend-modi toe.

5. Negeer aanwijzergebeurtenissen

U kunt een element maken dat u zich niet bewust bent van een pointergebeurtenis door een enkel kenmerk met de naam pointer-events . Door pointer-events de waarde van none in een element te geven, voorkomt dit dat dit 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 bevatten pointer-events: none, waardoor we kunnen klikken op het selectievakje eronder 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, kun je box-decoration-break:clone .

Om dit nu te vervolledigen met een voorbeeld en een vroege "Kerst in de horizon" herinnering, hier is een lijst van Santa's Reindeer die allemaal in een enkele span getypt! Ho! Ho! Ho!

Opmerking : hoewel modern IE wel degelijk box-decoration-break, aan de rand van de grens van het gesplitste gedeelte, is rendering niet soepel en ziet de achtergrond eruit als gesegmenteerd. Maar het maakt doosschaduw 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

visibility: collapse is een kenmerk dat visibility: collapse is gemaakt voor de tabelelementen, zoals rijen en kolommen. Bij gebruik voor iets anders zal het zich gedragen als visibility: hidden . Chrome behandelt het echter zelfs hidden voor tabelelementen.

Wanneer u visibility: collapse toewijst visibility: collapse op een tabelelement, het is verborgen en de ruimte wordt gevuld door de inhoud in de buurt, zoals hoe het zich zou gedragen op het display:none plaats daarvan.

Maar in tegenstelling tot display:none die de tabelindeling wijzigt nadat de ruimte is verwijderd, blijft de opmaak hetzelfde bij visibility:collapse . U kunt hier meer in detail zien hoe het werkt.

8. Kolommen maken

U kunt een kolomlay-out voor uw inhoud maken met het kenmerk columns . Hiermee kunt u opgeven hoeveel kolommen ( column-count ) en hoe elke kolombreedte ( column-width ) in een element moet worden gerenderd.

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 column-count gebruikt om aan te geven 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 de CSS3- resize . 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. Hierdoor kunnen we mooie achtergronden voor elementen maken zonder externe afbeeldingen te gebruiken . Om het te laten werken, is misschien wat oefening nodig.

40 prachtige kerstkaarten die u gegarandeerd vrolijk maken

Je zou het vakantieseizoen kunnen verwarren met winkelen, schenken en pauzeren, maar het is ook de tijd van het jaar waarin we losse eindjes maken, opnieuw contact maken met vrienden en familie en terugkijken op onze prestaties van het jaar.Het is ook de perfecte tijd om onze waardering en dank te sturen naar de mensen die ons het hele jaar door hebben gesteund, en een manier om dat te doen is door hen een aangepaste kerstkaart te sturen

(Technische en ontwerptips)

5 manieren om jezelf gefocust op het werk te houden

Jezelf gefocust houden op je werk kan soms moeilijk zijn. Dit is een gebeurtenis die je te vaak ziet - je begint je dag door jezelf voor te houden dat je vandaag (hoeveelheid ingegoten) taken zult krijgen. Hoe vastberaden je ook bent, je krijgt misschien een botte conversatie met je vrienden, antwoordt en verstuurt e-mails en krijgt natuurlijk echt druk op sociale contacten - net als de meesten van ons hier

(Technische en ontwerptips)