10 (Mai multe) Trucuri CSS Probabil că ați trecut cu vederea
Există o mulțime de fragmente CSS pe care dezvoltatorii web le pot utiliza pentru a obține anumite rezultate, iar apoi există trucuri CSS pe care le puteți utiliza pentru lucruri cum ar fi alinierea conținutului vertical. Cu CSS fiind o entitate în continuă evoluție, din când în când ne împiedicăm trucuri cool CSS care sunt distractive pentru a ști.
În postul de astăzi, vă prezint 10 atribute și trucuri CSS pe care nu le cunoașteți.
1. Scrieți pe verticală
Există un atribut CSS numit scris-mode care acceptă una dintre aceste trei valori; orizontal-tb, vertical-rl și vertical-lr.
orizontal-tb este implicit și provoacă fluxul tipic orizontal de la stânga la dreapta într-un element.
vertical-* valorile sunt totuși pentru fluxul blocului vertical, cauzând scrierea de text de sus în jos de către browsere. În vertical-rl, noi linii sunt adăugate la stânga celor anterioare și viceversa pentru vertical-lr.
Acest lucru este util pentru afișând limbi precum chineză și japoneză care sunt de obicei scrise de sus în jos și de asemenea atunci când doriți să afișați textul vertical pentru a salva spațiul orizontal, ca în anteturile de tabel.
Notă: Dacă doriți să controlați indicațiile literelor individuale, puteți utiliza orientarea textului transformându-le în poziție verticală sau în lateral, după cum doriți.
-mod webkit-writing: vertical-rl; -ms-writing-mode: tb-rl; modul de scriere: vertical-rl;
2. Reutilizarea valorii culorii
Cuvântul cheie currentColor poartă valoarea culoare atribut și poate fi utilizat în alte atribute care acceptă valori de culoare cum ar fi fundal.
div fundal: gradient liniar (90deg, curentColor 50%, negru 50%); ... culoare: # FFD700; / * currentColor este # FFD700 * /
3. Blend Backgrounds
Un element poate avea mai mult de un fundal (o culoare de fundal și mai multe imagini de fundal). fundal-amestec-mode se amestecă toate împreună ca în modul de amestecare dat. Există un total de 16 moduri de amestecare în acest moment.
mod de fundal-amestec: diferență;
4. Elemente de amestec
mix-blend-mode îmbină conținutul și fundalul elementelor suprapuse. Chrome nu pare să accepte toate modurile, chiar dacă Firefox nu.
mix-blend-mode: culoare;
Am luat două elemente img arătând imaginea unui trandafir și a deschidere cu un fundal grafic, le-a stivuit și a aplicat câteva moduri mix-mix.
5. Ignorați evenimentele indicatoare
Puteți face un element ignorant oricărui eveniment pointer utilizând un singur atribut numit pointer-evenimente. Dand pointer-evenimente valoarea a nici unul într-un element, acest lucru îl împiedică să fie o țintă pentru a afișa evenimente. IE11 + suport inclus.
În demo-ul următor, există o casetă de selectare sub două imagini care au fost așezate unul peste celălalt. Ambele imagini poartă pointer-events: nici unul, permițându-ne să faceți clic pe caseta de validare îngropată sub ele. Pe baza stării verificate a căsuței de selectare, imaginea dorită este afișată în timp ce cealaltă este ascunsă.
6. Decorați Cutii Split
De obicei, atunci când o cutie este împărțită (ca atunci când un element in linie mărturisește ruperea liniei), marginile porțiunilor divizate sunt lipsite de orice stiluri de cutie și arătați felii. Pentru a evita acest lucru, puteți utiliza box-decorare-break: clona.
Acum, urmând acest lucru cu un exemplu și un memento timpuriu "Crăciun la orizont", iată o listă a Reindeerului lui Mos Craciun, toate într-o singură deschidere! Ho! Ho! Ho!
Notă: Chiar dacă IE modernă nu suportă box-decorare-break, la marginea marginii porțiunii divizate, redarea nu este netedă și fundalul arată în felii. Dar face asta box-shadow frumos, motiv pentru care am folosit umbra cutie atât pentru graniță, cât și pentru fundal. Există, de asemenea, o absență a plăcuțelor orizontale în marginile din IE pe care ați putea dori să le completați cu spații.
7. Restrângeți elementele tabelului
vizibilitate: colaps este un atribut creat doar pentru elementele tabelului, cum ar fi rândurile și coloanele. Dacă este folosit în orice altceva, se va comporta ca și cum vizibilitate: ascunsă. Cu toate acestea, Chrome îl tratează ascuns chiar și pentru elementele de masă.
Când alocați vizibilitate: colaps pe un element de masă, este ascuns și spațiul său este umplut de conținutul din apropiere - cum ar fi modul în care se va comporta la utilizare display: none in schimb.
Dar spre deosebire de asta display: none care modifică aspectul tabelului după eliminarea spațiului, aspectul rămâne același vizibilitate: colaps. Puteți vedea cum funcționează mai detaliat aici.
8. Creați coloane
Puteți crea o structură de coloană pentru conținutul dvs. utilizând coloane atribut. Vă permite să specificați câte coloane (coloană-count) și modul în care fiecare lățime a coloanei (lățimea coloanei) trebuie să fie redate într-un element.
Dacă conținutul este altul decât textul, cum ar fi de exemplu o imagine, atunci va trebui să țineți cont de lățimea sa corespunzătoare coloanei. Pentru exemplul următor, am folosit doar coloană-count pentru a specifica câte coloane vreau.
-numărătoarea webkit-coloană: 2; -moz-coloană: 2; numărul de coloane: 2;
9. Faceți Elementele Redimensionabile
Un element poate fi redimensionabil (vertical, orizontal sau ambele) cu atributul CSS3 redimensiona . Redimensionabilitatea în a textarea pot fi dezactivate folosind același lucru.
redimensionare: verticală; redimensionare: orizontală; redimensionare: ambele; redimensionare: nici unul;
10. Creați modele
Pot exista mai multe gradienți CSS3 (atât liniare cât și radiale) pentru un singur element și pot fi îngrămădite unele pe altele pentru a crea modele. Acest lucru ne permite crea fundaluri frumoase pentru elemente fără a folosi imagini externe. Efectuarea activității ar putea necesita un pic de practică deși.
