10 (Več) CSS triki, ki ste jih verjetno spregledali

Obstaja veliko odlomkov CSS, ki jih spletni razvijalci lahko uporabijo za doseganje določenih rezultatov, nato pa obstajajo triki CSS, ki jih lahko uporabite za stvari, kot je poravnava vsebine navpično. Ker je CSS vedno razvijajoča se enota, vedno znova naletimo na kul CSS trike, ki so zabavni.

V današnji objavi vam predstavljam Še 10 atributov CSS in trikov, ki jih morda ne poznate.

1. Napišite navpično

Imenovan je atribut CSS način pisanja ki sprejema eno od teh treh vrednosti; horizontal-tb, vertical-rl in vertical-lr.

horizontal-tb je privzeta in povzroča značilen vodoravni tok besedila od leve proti desni v elementu.

The vertikalno * vrednosti pa so za navpični pretok bloka, zaradi česar brskalniki zapišejo besedilo od zgoraj navzdol. V vertical-rl, nove vrstice se dodajo levo od prejšnjih in obratno za vertical-lr.

To je koristno za prikaz jezikov, kot sta kitajščina in japonščina ki so običajno napisani od zgoraj navzdol, in tudi, če želite prikazati besedilo navpično, da shranite horizontalni prostor, tako kot v glavah tabele.

Opomba: Če želite nadzorovati smeri posameznih črk, lahko po želji uporabite usmerjenost v besedilo in jih obrnete pokončno ali vstran.

 -način pisanja webkit: navpično-rl; -ms-način pisanja: tb-rl; način pisanja: navpično-rl; 

2. Ponovno uporabite barvno vrednost

Ključna beseda trenutna barva nosi vrednost barve atribut in se lahko uporablja v drugih atributih, ki sprejemajo barvne vrednosti ozadju.

div ozadje: linearno gradient (90deg, currentColor 50%, črno 50%);… barva: # FFD700; / * currentColor je # FFD700 * / 

3. Blend ozadja

Element ima lahko več ozadij (barvo ozadja in več slik ozadja). The ozadje-mešanica-način združuje vse skupaj, glede na dani način mešanja. Trenutno je na voljo 16 načinov mešanja.

ozadje-mešanica-način: razlika; 

4. Mešajte elemente

mix-blend-mode združuje vsebino in ozadja prekrivajočih se elementov. Chrome kljub temu ne podpira vseh načinov, čeprav Firefox deluje.

način mešanja: barva; 

Vzel sem dva elementa, a img prikazuje podobo vrtnice in a razpon z grafičnim ozadjem, jih zložili in uporabili nekaj mešanih načinov.

5. Prezri dogodke kazalca

Element lahko pozabite na dogodek s kazalcem z enim samim atributom kazalci dogodkov. S podajanjem kazalci dogodkov vrednost. \ t nobena v elementu to preprečuje, da bi bil tarča dogodkov. Podpora za IE11 + je vključena.

V naslednjem prikazu je pod dvema slikama, postavljenima ena nad drugo, potrditveno polje. Obe sliki nosita kazalci dogodkov: nobenih, nam omogočajo, da kliknemo potrditveno polje, ki je pokrito pod njimi. Na podlagi preverjenega stanja potrditvenega polja se prikaže želena slika, druga pa skrita.

6. Okrasite razdelilne škatle

Običajno, ko je polje razdeljeno (tako kot pri elementu v vrstici, ki priča prelomu vrstice), so robovi razdeljenih delov brez stilov v polju in so videti narezani. Da bi se temu izognili, ga lahko uporabite box-decoration-break: klon.

Zdaj, da sledimo temu z zgledom in zgodnjim opomnikom "Božič v obzorju", je tukaj seznam vseh Božičkov jelenov, ki so vtipkani v enem samem razpon! Ho! Ho! Ho!

Opomba: Čeprav moderna IE podpira box-decoration-break, na robu meje deljenega dela, upodabljanje ni gladko in ozadje izgleda narezano. Ampak to pomeni box-shadow Lepo, zato sem uporabil senčne škatle za obrobo in ozadje. Obstaja tudi odsotnost vodoravnega oblazinjenja v robovih IE, ki ga boste morda želeli zapolniti s presledki.

7. Strni elemente tabele

vidljivost: propad je atribut, ustvarjen samo za elemente tabele, kot so vrstice in stolpci. Če se uporablja za kaj drugega, se bo obnašal vidljivost: skrita. Chrome kljub temu obravnava tako skrito celo za elemente mize.

Ko dodelite vidljivost: propad na elementu tabele je skrit in njegov prostor je zapolnjen z vsebino v bližini - tako, kot bi se obnašal pri uporabi prikaz: nič namesto tega.

Toda drugače prikaz: nič ki spremeni postavitev tabele po odstranitvi prostora, postavitev ostane ista vidljivost: propad. Tukaj lahko vidite, kako deluje.

8. Ustvari stolpce

Izdelate lahko postavitev stolpca za vašo vsebino z uporabo stolpcih atribut. Omogoča določanje števila stolpcev (štetje stolpcev) in kako je širina vsakega stolpca (širina stolpca) se prikažejo v elementu.

Če je vsebina drugačna od besedila, kot je na primer slika, morate upoštevati njeno širino, ki ustreza stolpcu. Za naslednji primer sem uporabil samo štetje stolpcev , da določite, koliko stolpcev želim.

-štetje webkit-stolpcev: 2; -moz-column-count: 2; štetje kolone: ​​2; 

9. Make Elements Resizeable

Element lahko spremenimo (vertikalno, vodoravno ali oboje) s atributom CSS3 spremenite velikost . Možnost spreminjanja velikosti v a textarea lahko onemogočite uporabo istega.

spreminjanje velikosti: navpično; spreminjanje velikosti: vodoravno; spreminjanje velikosti: oboje; spreminjanje velikosti: nič; 

10. Ustvarite vzorce

Obstaja več CSS3 gradientov (linearnih in radialnih) za posamezen element, ki jih je mogoče zbrati med seboj in ustvariti vzorce. To nam omogoča ustvarite lepo ozadje za elemente brez uporabe zunanjih slik. Če bi bilo to delo, je morda potrebno malo prakse.