8 sfaturi și trucuri esențiale CSS pe care fiecare dezvoltator ar trebui să le cunoască

CSS este folosit pentru a adăuga stil unei pagini web după ce ați configurat structura HTML. Mai mult, puteți crea modele elegante în CSS cu doar câteva linii de cod.

Fiecare dezvoltator ar trebui să cunoască aceste trucuri CSS pentru a-și dezvolta proiectele rapid și eficient. Cu siguranță vă vor crește productivitatea la următorul nivel – să începem.

1. Efecte de hover

Puteți adăuga un efect de trecere la un element HTML utilizând :planare selector.

Exemplu: Adăugarea efectului de hover la un element buton.

Cod HTML:

Hover Over Me

Cod CSS:

buton: hover {
culoare: #0062FF;
chenar: #0062FF solid 1px;
fundal: #FFFF99;
}

Puteți să vă jucați cu acest cod și să adăugați efecte precum fade-in,crestere in, oblic, și așa mai departe. Fă-l al tău!

Efect de fade-in CSS pe hover

buton{
opacitate: 0,5;
}
buton: hover{
opacitate: 1;
}

Efectul de creștere CSS pe hover

buton: hover{
-webkit-transform: scara (1,2);
-ms-transform: scară (1,2);
transforma: scară (1,2);
}

2. Redimensionați imaginile pentru a se potrivi cu un container div

Puteți redimensiona o imagine pentru a se potrivi într-un container div folosind înălţime, lăţime, și potrivire obiect proprietăți.

Cod HTML:

Cod CSS:

.random-image {
 inaltime: 100%;
 latime: 100%;
 obiect-potrivire: conţine;
 }

3. Ignorarea tuturor stilurilor

Puteți suprascrie toate celelalte declarații de stil ale unui atribut (inclusiv stilurile inline) folosind !important directivă la sfârșitul unei valori.

Cod HTML:

 Salut Lume!

Cod CSS:

p {
 culoare de fundal: galben;
 }
 .numele clasei {
 culoare de fundal: albastru !important;
 }
 #idName {
 culoare de fundal: verde;
 }

În acest exemplu, !important regula trece peste toate celelalte culoare de fundal declarații și se asigură că culoarea de fundal va fi setată mai degrabă la albastru decât la verde.

4. Trunchiați textul cu punctele de suspensie

Puteți trunchia textul debordant cu puncte de suspensie (...) folosind text-debordare proprietate CSS.

Cod HTML:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

Cod CSS:

.text {
 spatiu alb: nowrap;
 preaplin: ascuns;
 text-overflow: puncte de suspensie;
 lățime: 200px;
 }

Legate de: Modelul cutiei CSS explicat cu exemple

5. Folosind text-transform

Puteți forța textul să fie scris cu majuscule, minuscule sau majuscule folosind text-transformare proprietate CSS.

Majuscule

Cod HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Cod CSS:

.majuscule {
 text-transform: majuscule;
 }

Litere mici

Cod HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Cod CSS:

.minuscule {
 text-transform: minuscule;
 }

Valorifica

Cod HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Cod CSS:

.valorifica {
 text-transform: capitalize;
 }

6. Utilizarea declarației de proprietate pe o singură linie

Puteți utiliza proprietățile scurte din CSS pentru a face codul concis și ușor de citit.

De exemplu, CSS fundal este o proprietate scurtă care vă permite să definiți valorile lui culoare de fundal, imagine de fundal, fundal-repetare, și fundal-poziție. În mod similar, puteți defini proprietăți pentru font, frontieră, marginea, și căptușeală.

Declarație de proprietate de fundal pe o singură linie

culoare de fundal: negru;
imagine de fundal: url (images/xyz.png);
background-repeat: fără repetare;
fundal-poziție: stânga sus;

Puteți simplifica declarația de mai sus la o singură linie:

fundal: url negru (images/xyz.png) fără repetare stânga sus;

Proprietățile stenografiei sunt foarte convenabile de utilizat, dar trebuie să luați în considerare unele cazuri de margine complicate (după cum este subliniat în MDN Web Docs) în timp ce le utilizați.

Sfaturile cu instrumente sunt o modalitate de a oferi mai multe informații despre un element atunci când utilizatorul mută cursorul mouse-ului peste element.

Cod HTML:

Indicator corect
Acesta este textul descrierii

Cod CSS:

corp {
 text-align: centru;
 }
 .tooltip_div {
 poziție: relativă;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 vizibilitate: ascuns;
 latime: 170px;
 culoare de fundal: albastru;
 culoare: #fff;
 text-align: centru;
 chenar-rază: 6px;
 umplutură: 5px 0;
 /* Poziționarea tooltip */
 poziție: absolută;
 indicele z: 1;
 sus: -5px;
 stânga: 105%;
 }
 .tooltip_div: hover .tooltip {
 vizibilitate: vizibil;
 }

Cod HTML:

Indicator din stânga
Acesta este textul descrierii

Cod CSS:

corp {
 text-align: centru;
 }
 .tooltip_div {
 poziție: relativă;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 vizibilitate: ascuns;
 latime: 170px;
 culoare de fundal: albastru;
 culoare: #fff;
 text-align: centru;
 chenar-rază: 6px;
 umplutură: 5px 0;
 /* Poziționarea tooltip */
 poziție: absolută;
 indicele z: 1;
 sus: -5px;
 dreapta: 105%;
 }
 .tooltip_div: hover .tooltip {
 vizibilitate: vizibil;
 }

Cod HTML:

Top Tooltip
Acesta este textul descrierii

Cod CSS:

corp {
 text-align: centru;
 }
 .tooltip_div {
 margine-top: 100px;
 poziție: relativă;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 vizibilitate: ascuns;
 latime: 170px;
 culoare de fundal: albastru;
 culoare: #fff;
 text-align: centru;
 chenar-rază: 6px;
 umplutură: 5px 0;
 /* Poziționarea tooltip */
 poziție: absolută;
 indicele z: 1;
 jos: 100%;
 stânga: 50%;
 margine-stânga: -60px;
 }
 .tooltip_div: hover .tooltip {
 vizibilitate: vizibil;
 }

Cod HTML:

Balon cu instrumente de jos
Acesta este textul descrierii

Cod CSS:

corp {
 text-align: centru;
 }
 .tooltip_div {
 margine-top: 100px;
 poziție: relativă;
 display: inline-block;
 }
 .tooltip_div .tooltip {
 vizibilitate: ascuns;
 latime: 170px;
 culoare de fundal: albastru;
 culoare: #fff;
 text-align: centru;
 chenar-rază: 6px;
 umplutură: 5px 0;
 /* Poziționează sfatul cu instrumente */
 poziție: absolută;
 indicele z: 1;
 sus: 100%;
 stânga: 50%;
 margine-stânga: -60px;
 }
 .tooltip_div: hover .tooltip {
 vizibilitate: vizibil;
 }

De asemenea, puteți utiliza biblioteca Bootstrap pentru a crea personalități Sfaturi instrumente pentru bootstrap.

8. Adăugați efecte de umbră

Puteți adăuga efecte de umbră CSS la texte și elemente folosind text-umbră si cutie-umbră respectiv proprietăți CSS.

Umbra text CSS

The text-umbră Proprietatea CSS adaugă umbre și straturi textului. The text-umbră proprietatea acceptă o listă de umbre separate prin virgulă pentru a fi aplicate textului.

Sintaxa proprietății CSS text-shadow:

/* Puteți folosi 4 argumente cu proprietatea text-shadow CSS:
offset-x, offset-y, raza de estompare și culoare */
/* offset-x | offset-y | blur-radius | culoare */
text-shadow: 2px 2px 4px roșu;
/* culoare | offset-x | offset-y | raza de estompare */
text-shadow: #18fa3e 1px 2px 10px;

Notă: Argumentele de culoare și raza de estompare sunt opționale.

Legate de: Cum să utilizați text-shadow CSS: trucuri și exemple

De exemplu:

fundal: #e74c3c;
culoare: #fff;
familie de fonturi: lato;
text-shadow: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 0,52), 4px 3px 4px, 4gba (414 px), 22, 0,53), 5px 5px rgba (145, 36, 24, 0,54), 6px 6px rgba (150, 38, 26, 0,55), 7px 7px rgba (154, 40, 28, 0,56), 8px 8px rgba (158, 42, 30, 0,57), 9px 9px rgba (162, 41, 40,5), 8px 10px rgba (166, 45, 33, 0,59), 11px 11px rgba (169, 47, 34, 0,6), 12px 12px rgba (173, 48, 36, 0,61), 13px 13px rgba (176, 50, 37, 0,62), 14px 14px rgba (178, 51, 38, 0,63), 15px 15, 15, 14px, rgba (0,63), 15px, 16px 16px rgba (184, 54, 40, 0,65), 17px 17px rgba (186, 55, 41, 0,66), 18px 18px rgba (189, 56, 42, 0,67), 19px 19px rgba (191, 57, 43, 0,68), 20px 20px rgba (193, 52 px, 52 px, 6 px) 195, 59, 45, 0,7), 22px 22px rgba (197, 60, 46, 0,71), 23px 23px rgba (199, 61, 47, 0,72), 24px 24px rgba (201, 62, 47, 0,73), 25px 25px rgba (202, 62, 48, 0,74), 26px, 26, 47 px, rgba (26, 47, 0,73 px), 27px 27px rgba (206, 64, 49, 0,76), 28px 28px rgba (207, 65, 50, 0,77), 29px 29px rgba (209, 65, 51, 0,78), 30px 30px rgba (210, 66, 51, 0,79), 31px 31px rgba (211, 65, 52 px, 30px rgba) 213, 67, 52, 0,81), 33px 33px rgba (214, 68, 53, 0,82), 34px 34px rgba (215, 69, 53, 0,83), 35px 35px rgba (216, 69, 54, 0,84), 36px 36px rgba (218, 70, 54, 0,85), 37px 37, 54, 0,84 px, 37 px 36 px rgba, 38px 38px rgba (220, 71, 55, 0,87), 39px 39px rgba (221, 71, 56, 0,88), 40px 40px rgba (222, 72, 56, 0,89), 41px 41px rgba (223, 72, 57, 0,9), 42px 42px rgba (224, 73, pxr. 225, 73, 57, 0,92), 44px 44px rgba (225, 73, 58, 0,93), 45px 45px rgba (226, 74, 58, 0,94), 46px 46px rgba (227, 74, 58, 0,95), 47px 47px rgba (228, 75, 59, 0,96), 48px, 48px, 48px, 47px, rgba, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

The cutie-umbră proprietatea este folosită pentru a aplica o umbră elementelor HTML.

Sintaxa proprietății CSS box-shadow

box-shadow: [offset orizontal] [offset vertical] [raza de estompare] [raza de răspândire opțională] [culoare];

Notă: Parametrii de estompare, răspândire și culoare sunt opționali.

Legate de: Cum să utilizați CSS box-shadow: trucuri și exemple

De exemplu:

box-shadow: rgba (0, 0, 0, 0.35) 0px 5px 15px;

Dacă doriți să aruncați o privire la codul sursă complet folosit în acest articol, iată depozitul GitHub.

Modelați site-ul dvs. folosind trucuri CSS moderne

Adăugarea umbrelor de text CSS pe un site web este o modalitate excelentă de a atrage atenția utilizatorilor. Poate oferi site-ului o anumită eleganță și o senzație unică. Fii creativ și experimentează cu unele text-umbră exemple care se pot alinia cu tema site-ului dvs.

11 exemple de umbre de text CSS pe care să le încercați pe site-ul dvs. web

Puteți face multe cu efectele de umbră a textului în CSS, dar poate fi dificil să știți exact ce este posibil. Obțineți ajutor cu aceste exemple vizuale.

Citiți în continuare

Despre autor