15 trucuri utile CSS pe care le-ați fi putut trece cu vederea

Dacă ați fost un dezvoltator web de frontieră pentru o perioadă de timp, există o mare șansă că ați avut un moment când ați încercat să aflați cum să codificați ceva și să realizați după un pic de googling, că “există CSS pentru asta”. Dacă nu ați fi avut, bine sunteți pe cale să faceți asta.

Această postare este o colecție de astfel de coduri CSS, care vă poate oferi caracteristici precum transformarea unui element lipicios, oferirea de linii punctuale subliniind capacitățile, curgerea textului paginii dvs. într-o formă specială sau obținerea efectului de parallax. Unele dintre ele sunt acceptate pe scară largă, în timp ce altele sunt pe cale să beneficieze de sprijin total de către toate browserele.

1. Categorii de titluri și subpoziții

   Spuneți că aveți un set de titluri și subtitluri în documentul dvs. și le numerotați manual sau prin intermediul unui script. În schimb, puteți utiliza contoarele CSS pentru a face acest lucru. Există deja un post în detaliu aici. Și deoarece este dintr-un spec CSS2, puteți paria că este susținut de toate browserele, cu excepția probabil IE 6.

2. Spice Up Subliniază clar

   Uneori vrem să subliniem cu o linie frumos punctată sau întreruptă în loc de una solidă. Deoarece nu există nici o opțiune pentru asta, noi ne mulțumim border-bottom. Dar border-bottom nu este o soluție bună dacă textul pe care îl subliniați se împachetează.

   CSS3 nu a specificat decât una, ci trei proprietăți noi pentru decorarea textului text-decorare-culoare, text-decorare-line, și text-decorare-stil care poate fi prescrisă în bătrânii buni text-decor.

   Aveți posibilitatea să le utilizați pentru a sublinia stilul, pentru a suprascrie, pentru a face chiar să clipească textul și multe altele. Începând cu aprilie 2015, numai Firefox acceptă această proprietate, dar puteți activa “platforme web experimentale” să o utilizați în Chrome.

3. Citând o ofertă

   Mai întâi de toate, nu este nevoie să vă deranjez cu tastarea corectă a citatelor scurte pentru cotațiile scurte, deoarece există HTML pentru aceasta: etichetă care indică cotațiile inline.

   tag-ul are, de asemenea, grijă de citarea citatelor interne cu citate simple. Deci, unde este “există "CSS" pentru asta” moment în asta?

   Să spunem că nu doriți citate dublu implicite sau dacă aveți mai mult de un nivel de citate imbricate, puteți să vă definiți preferințele de cotare pentru elementul de cotație cu CSS utilizând CSS2 citate proprietate.

4. Gestionarea tabelelor nedrepte

   Este posibil să fi întâmpinat o masă mare cu o dimensiune variată a conținutului pe celulă, care refuză să rămână într-o lățime pe care ați specificat-o, indiferent de ce încercați. Îmbunătățiți masa cu tabel cu aspect proprietate (pentru înălțimea coloanei egale, urmați acest link).

   Pentru a fi specific, remedierea este în tabelul-layout: fix; valoare. Când atribuiți o structură fixă ​​pentru tabel, tabela și lățimea celulei sunt determinate de lățimea tabelului sau a primului rând de celule (care pot fi definite de utilizator) și nu de conținut. Acest lucru este acceptat de toate browserele.

5. Faceți-l lipicios

   Elementele lipsite de elemente sunt elemente dintr-o pagină care nu va fi scos din vedere. Cu alte cuvinte, se lipsește într-o zonă vizibilă (fereastră de vizualizare sau cutie de derulare). Puteți crea acest lucru folosind CSS pozitie: lipicios;.

   Ele se comportă ca elemente relativ poziționate înainte de orice deplasare și mai târziu ca elemente fixe odată ce se atinge un prag de defilare. Deocamdata, numai Firefox îl susține.

6. Obțineți textul în formă

   Doriți ca textul din pagină să curbeze frumos o imagine pe care o afișați lângă ea? Poti incerca Formate CSS. Pentru a implementa formele CSS, putem folosi trei proprietăți formă-exterior, forma marja și forma-imagine-prag. Începând din aprilie 2015, schemele CSS sunt acceptate browsere webkit.

7. Câmpuri obligatorii

   Dacă aveți un formular există o șansă mare ca unele câmpuri în el să fie necesare, în timp ce altele nu sunt. Va trebui să lăsați utilizatorii să știe care este. CSS pentru asta este :necesar : opțional pseudo-clase. Toate browserele moderne le suportă.

8. Picky cu culori

   Dacă nu vă place o anumită culoare, cum ar fi albastru, putem culori zona selectată cu altă culoare și ::selecţie pseudo element este CSS pentru asta. Acest lucru este susținut de toate browserele moderne.

9. Am verificat-o?

   Într-o situație în care a fost bifată o casetă de validare, ar fi bine să aveți o altă indicație în afară de marcajul mic din caseta de selectare implicită pentru a indica că elementul a fost bifat.

   Există CSS pentru ceea ce exploatează legătura dintre frații imediați, două elemente una lângă cealaltă. CSS are selectorul de fidelitate adiacent, denotat de plus + semn și îl putem folosi pentru a viza eticheta de lângă caseta de selectare. Dar cum să vizați mai întâi caseta de selectare bifată? Există : verificat pseudo-clasa pentru asta.

10. Ca un povestitor

    Apoi, nu ar fi bine dacă prima “O” în “A fost odată ca niciodată” arata dragut? Putem face să arate destul, după toate acestea, există un CSS pentru asta. Aici este locul ::prima literă pseudo element vine la salvare. Ea vizează prima literă a primei linii a elementului vizat. Citiți mai multe despre el aici.

11. V-ar plăcea să știți mai multe?

    Un element poate avea clasa X sau date Y sau altă valoare pentru un atribut. Dacă avem vreodată nevoie să afișăm o astfel de valoare de atribut a unui element în apropierea acestuia, putem folosi conținut: attr (X). Acesta preia valoarea atributului X al elementului, apoi îl putem arăta lângă element.

12. Un pic mai mult spre stânga

    Elementele de centrare pentru începătorii CSS sunt destul de bune. Diferitele elemente necesită un set diferit de proprietăți CSS pentru a le centra. Vom analiza un exemplu din multe care este disponibil pe web, pentru a vă aminti din nou că există CSS pentru a centra lucrurile.

13. Dezvăluie fișierul Format al legăturilor

    Ați văzut vreodată o mică imagine în apropierea unei legături care să indice ce este această legătură? Un PDF? sau un DOC? Da, există CSS pentru a realiza acest lucru. conținut: url () este ceea ce vom folosi pentru a afișa imaginea din spatele legăturilor.

14. Trigger Parallax Effect

    Efectul de parallax este un efect utilizat pentru a descrie mișcarea aparent înceată a fundalului relativ la prim plan. Acest efect este popular în site-urile care implementează derularea paralaxelor. Există modalități diferite de ao implementa, exemplul de mai jos funcționează în Firefox cu atașament de fundal: fix;.

15. Puterea animațiilor CSS

    Probabil că nu e mare “există CSS pentru asta” moment, pentru că toți sunteți, cel mai probabil, conștienți de animațiile CSS până acum. Dar un mic memento nu este deloc rău. Există multe utilizări pentru animațiile CSS, dar aici este unul pentru un exercițiu simplu de colorare.

Acum citiți: 50 Fragmente CSS utile pentru fiecare designer