10 (više) CSS trikova koje ste vjerojatno previdjeli

Postoji mnogo CSS isječaka koje web programeri mogu koristiti za postizanje određenih rezultata, a zatim postoje CSS trikovi koje možete koristiti za stvari poput poravnavanja sadržaja vertikalno. S CSS-om kao entitetom koji se stalno razvija, uvijek iznova nailazimo na cool CSS trikove koji su zabavni za znati.

U današnjem postu, predstavljam vam Još 10 CSS atributa i trikova koje možda ne znate.

1. Napišite okomito

Poziva se CSS atribut pisanje-način koji prihvaća jednu od ove tri vrijednosti; horizontalno-TB, okomito rl i LR-okomito.

horizontalno-TB je zadana i uzrokuje tipičan vodoravni tijek teksta s lijeva na desno u elementu.

vertical- * vrijednosti su međutim za vertikalni blok protok, uzrokujući tekst pisati od vrha do dna od strane preglednika. U okomito rl, nove linije dodaju se lijevo od prethodnih i obratno za LR-okomito.

Ovo je korisno za prikazuju jezike kao što su kineski i japanski koje se obično pišu od vrha do dna i također kada želite prikazati tekst okomito za spremanje horizontalnog prostora, kao u zaglavljima tablice.

Bilješka: Ako želite upravljati uputama pojedinačnih slova, možete upotrijebiti tekstualnu orijentaciju, okrećući ih uspravno ili bočno, po želji.

 -način webkit-pisanja: vertikalni-rl; -ms-način pisanja: tb-rl; način pisanja: okomito-rl; 

2. Ponovno upotrijebite vrijednost boje

Ključna riječ currentColor nosi vrijednost boja atribut i mogu se koristiti u drugim atributima koji prihvaćaju vrijednosti boja pozadina.

div background: linear-gradient (90deg, currentColor 50%, black 50%);… color: # FFD700; / * currentColor je # FFD700 * / 

3. Izmiješajte pozadine

Element može imati više od jedne pozadine (boja pozadine i više pozadinskih slika). pozadini mješavina-mod sve ih pomiješa prema zadanom načinu miješanja. Trenutno postoji ukupno 16 načina miješanja.

background-blend-mode: razlika; 

4. Pomiješajte elemente

mix-blend-mode spaja sadržaj i pozadinu elemenata koji se preklapaju. Čini se da Chrome ne podržava sve načine rada iako Firefox radi.

mix-blend-mode: boja; 

Uzeo sam dva elementa, jedan img prikazuje sliku ruže i pedalj s grafičkom pozadinom, složio ih i primijenio nekoliko načina miješanja.

5. Zanemari događaje pokazivača

Element možete učiniti nesvjesnim bilo kojeg događaja pokazivača pomoću jednog atributa koji se zove pokazivač događaji. Davanjem pokazivač događaji vrijednost nijedan u elementu, to sprječava da bude meta za pokazivanje događaja. Uključena je podrška za IE11 +.

U sljedećem demo prikazu nalazi se potvrdni okvir ispod dvije slike jedna iznad druge. Obje slike nose pointer-događaji: nema, dopuštajući nam da kliknemo potvrdni okvir ispod njih. Na temelju označenog stanja potvrdnog okvira, željena se slika prikazuje dok je druga skrivena.

6. Ukrasite podijeljene kutije

Obično kada je kutija podijeljena (kao kad element u retku svjedoči o prekidima linije), rubovi podijeljenih dijelova su lišeni ikakvih stilova okvira i izgledaju narezani. Da biste to izbjegli, možete koristiti kutija-dekoracija-break: klon.

Da bismo to slijedili s primjerom i ranim podsjetnikom "Božić u horizontu", evo popisa svih Djeda Mrazova koji su sve upisali u jednom pedalj! Ho! Ho! Ho!

Bilješka: Iako moderni IE ne podržava kutija-dekoracija-break, na rubu granice podijeljenog dijela, prikaz nije glatka i pozadina izgleda isječena. Ali čini se kutija-sjena lijepo, zbog čega sam koristio sjenila za oboje i za granicu i pozadinu. Tu je i odsutnost vodoravnog padding u rubovima u IE da možda želite ispuniti s razmacima.

7. Sažmi elemente tablice

vidljivost: kolaps je atribut stvoren samo za elemente tablice, poput redaka i stupaca. Ako se koristi na bilo što drugo, ponašat će se kao vidljivost: skrivena. Krom iako ga tretira kao skriven čak i za elemente stola.

Kada dodijelite vidljivost: kolaps na elementu tablice je skriven i njegov prostor je ispunjen obližnjim sadržajem - poput načina na koji se ponaša pri korištenju display: none umjesto.

Ali za razliku od display: none koja modificira izgled tablice nakon uklanjanja prostora, raspored ostaje isti u Vidljivost: kolaps. Ovdje možete vidjeti kako to djeluje.

8. Stvaranje stupaca

Možete izraditi izgled stupca za svoj sadržaj pomoću stupovi atribut. Omogućuje vam određivanje broja stupaca (kolona-count) i kako širina svakog stupca (stupac širine) prikazuju se u elementu.

Ako je sadržaj drugačiji od teksta, kao na primjer sliku, morat ćete imati na umu njegovu širinu u odnosu na stupce. Za sljedeći primjer koristio sam se samo kolona-count da biste odredili koliko stupaca želim.

-broj webkit-stupaca: 2; -moz-kolona-broj: 2; broj kolona: 2; 

9. Omogućite promjenu veličine elemenata

Element može biti promjenjiv (vertikalno, horizontalno ili oboje) s atributom CSS3 veličinu . Mogućnost promjene veličine u podruÄŤje može se onemogućiti upotrebom iste.

promijeni veličinu: okomito; promjena veličine: vodoravno; promjena veličine: oboje; promijeni veličinu: nema; 

10. Izradite obrasce

Može postojati više CSS3 gradijenta (linearnih i radijalnih) za jedan element i mogu se složiti jedan na drugi da bi se stvorili obrasci. To nam omogućuje stvorite lijepe pozadine za elemente bez korištenja vanjskih slika. Učiniti to može zahtijevati malo prakse.