8 osnovnih CSS savjeta i trikova koje bi svaki programer trebao znati

CSS se koristi za dodavanje stila web stranici nakon što ste postavili HTML kostur. Štoviše, možete stvoriti uglađene dizajne u CSS-u sa samo nekoliko redaka koda.

Svaki programer bi trebao znati ove CSS trikove kako bi brzo i učinkovito razvijao svoje projekte. Oni će zasigurno povećati vašu produktivnost na sljedeću razinu—počnimo.

1. Efekti lebdenja

Možete dodati efekt lebdenja u HTML element pomoću :lebdjeti selektor.

Primjer: Dodavanje efekta lebdenja elementu gumba.

HTML kod:

Lebdite iznad mene

CSS kod:

gumb: zadržite pokazivač miša {
boja: #0062FF;
obrub: #0062FF čvrsti 1px;
pozadina: #FFFF99;
}

Možete se poigrati s ovim kodom i dodati efekte poput nestati u,odrastanje, nagnuti, i tako dalje. Učinite to svojim!

CSS efekt fade-in pri lebdenju

dugme{
neprozirnost: 0,5;
}
gumb: lebdjeti{
neprozirnost: 1;
}

Učinak rasta CSS-a pri lebdenju

gumb: lebdjeti{
-webkit-transform: skala (1.2);
-ms-transform: mjerilo (1.2);
transformirati: mjerilo (1.2);
}

2. Promijenite veličinu slika kako bi se uklopile u div spremnik

Možete promijeniti veličinu slike tako da stane u div spremnik pomoću visina, širina, i objekt-prikladan Svojstva.

HTML kod:

CSS kod:

.random-image {
 visina: 100%;
 širina: 100%;
 object-fit: sadržavati;
 }

3. Nadjačavanje svih stilova

Možete nadjačati sve ostale deklaracije stila atributa (uključujući inline stilove) pomoću !važno direktiva na kraju vrijednosti.

HTML kod:

 Pozdrav svijete!

CSS kod:

p {
 boja pozadine: žuta;
 }
 .className {
 boja pozadine: plava !važno;
 }
 #idName {
 boja pozadine: zelena;
 }

U ovom primjeru, !važno pravilo nadjačava sva ostala boja pozadine deklaracije i osigurava da će boja pozadine biti postavljena na plavu, a ne zelenu.

4. Skratite tekst elipsom

Tekst koji se prelijeva možete skratiti trotočkom (...) koristiti prelijevanje teksta CSS svojstvo.

HTML kod:

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

CSS kod:

.text {
 razmak: nowrap;
 prelijevanje: skriveno;
 prelijevanje teksta: elipsis;
 širina: 200px;
 }

Povezano: Model CSS okvira objašnjen primjerima

5. Korištenje transformacije teksta

Možete prisiliti da tekst bude napisan velikim, malim ili velikim slovima pomoću preobrazba teksta CSS svojstvo.

Velika slova

HTML kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kod:

.velika slova {
 transformacija teksta: velika slova;
 }

Mala slova

HTML kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kod:

.mala slova {
 transformacija teksta: mala slova;
 }

S velikim slovom

HTML kod:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kod:

.velika slova {
 preobrazba teksta: velika slova;
 }

6. Korištenje deklaracije svojstva jednog retka

Možete koristiti svojstva stenografije u CSS-u kako biste svoj kod učinili sažetim i lako čitljivim.

Na primjer, CSS pozadini je skraćeno svojstvo koje vam omogućuje definiranje vrijednosti boja pozadine, pozadinska slika, pozadina-ponoviti, i pozadinski položaj. Slično, možete definirati svojstva za font, granica, margina, i padding.

Jednoredna deklaracija o pozadinskom svojstvu

boja pozadine: crna;
background-image: url (images/xyz.png);
background-repeat: ne-ponavljanje;
background-position: lijevo gore;

Gornju deklaraciju možete pojednostaviti na jedan redak:

pozadina: crni url (images/xyz.png) bez ponavljanja lijevo gore;

Svojstva stenografije vrlo su prikladna za korištenje, ali neke morate uzeti u obzir lukavi rubni slučajevi (kao što je navedeno u MDN web dokumentima) dok ih koristite.

Alati su način pružanja više informacija o elementu kada korisnik pomakne pokazivač miša preko elementa.

HTML kod:

Desni opis alata
Ovo je tekst opisa alata

CSS kod:

tijelo {
 poravnavanje teksta: središte;
 }
 .tooltip_div {
 položaj: relativan;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrivena;
 širina: 170px;
 boja pozadine: plava;
 boja: #fff;
 poravnavanje teksta: središte;
 radijus granice: 6px;
 padding: 5px 0;
 /* Pozicioniranje opisa alata */
 pozicija: apsolutna;
 z-indeks: 1;
 vrh: -5px;
 lijevo: 105%;
 }
 .tooltip_div: zadržite pokazivač miša .tooltip {
 vidljivost: vidljiva;
 }

HTML kod:

Lijevi opis alata
Ovo je tekst opisa alata

CSS kod:

tijelo {
 poravnavanje teksta: središte;
 }
 .tooltip_div {
 položaj: relativan;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrivena;
 širina: 170px;
 boja pozadine: plava;
 boja: #fff;
 poravnavanje teksta: središte;
 radijus granice: 6px;
 padding: 5px 0;
 /* Pozicioniranje opisa alata */
 pozicija: apsolutna;
 z-indeks: 1;
 vrh: -5px;
 desno: 105%;
 }
 .tooltip_div: zadržite pokazivač miša .tooltip {
 vidljivost: vidljiva;
 }

HTML kod:

Gornji opis alata
Ovo je tekst opisa alata

CSS kod:

tijelo {
 poravnavanje teksta: središte;
 }
 .tooltip_div {
 margin-top: 100px;
 položaj: relativan;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrivena;
 širina: 170px;
 boja pozadine: plava;
 boja: #fff;
 poravnavanje teksta: središte;
 radijus granice: 6px;
 padding: 5px 0;
 /* Pozicioniranje opisa alata */
 pozicija: apsolutna;
 z-indeks: 1;
 dno: 100%;
 lijevo: 50%;
 margin-left: -60px;
 }
 .tooltip_div: zadržite pokazivač miša .tooltip {
 vidljivost: vidljiva;
 }

HTML kod:

Donji opis alata
Ovo je tekst opisa alata

CSS kod:

tijelo {
 poravnavanje teksta: središte;
 }
 .tooltip_div {
 margin-top: 100px;
 položaj: relativan;
 zaslon: inline-block;
 }
 .tooltip_div .tooltip {
 vidljivost: skrivena;
 širina: 170px;
 boja pozadine: plava;
 boja: #fff;
 poravnavanje teksta: središte;
 radijus granice: 6px;
 padding: 5px 0;
 /* Postavite opis alata */
 pozicija: apsolutna;
 z-indeks: 1;
 vrh: 100%;
 lijevo: 50%;
 margin-left: -60px;
 }
 .tooltip_div: zadržite pokazivač miša .tooltip {
 vidljivost: vidljiva;
 }

Također možete koristiti Bootstrap biblioteku za izradu prilagođenih Bootstrap opisi alata.

8. Dodajte efekte sjene

Možete dodati CSS efekte sjene u tekstove i elemente pomoću tekst-sjena i kutija-sjena CSS svojstva.

Sjena CSS teksta

The tekst-sjena CSS svojstvo dodaje sjene i slojeve tekstu. The tekst-sjena svojstvo prihvaća popis sjena odvojenih zarezima koje treba primijeniti na tekst.

Sintaksa CSS svojstva text-shadow:

/* Možete koristiti 4 argumenta s CSS svojstvom text-shadow:
offset-x, offset-y, polumjer zamućenja i boja */
/* pomak-x | offset-y | polumjer zamućenja | boja */
sjena teksta: 2px 2px 4px crvena;
/* boja | pomak-x | offset-y | polumjer zamućenja */
sjena teksta: #18fa3e 1px 2px 10px;

Bilješka: Argumenti boje i polumjera zamućenja nisu obavezni.

Povezano: Kako koristiti CSS text-shadow: trikovi i primjeri

Na primjer:

pozadina: #e74c3c;
boja: #fff;
font-family: lato;
sjena teksta: 1px 1px rgba (123, 25, 15, 0,5), 2px 2px rgba (129, 28, 18, 0,51), 3px 3px rgba (135, 31, 20, 0,52), 4gba31px, 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 (1631, 410,. 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, 15px, 15 px, 15 px, 15 px, 15 px, 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 (1944, 58 px, 1944, 58 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), 24px, 24px, 26px, 201, 62, 47, 0,73, 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 (2152, 67px, px 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), 37rgba (218, 70, 54, 0.85), 37rpx, 37 px, 37 px, 37 px, 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 (225,743, px rgba (225,743, px 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), 49px, 48px, 48rpx, 475px, 49px 49px rgba (230, 75, 59, 0,98), 50px 50px rgba (230, 76, 60, 0.99);

CSS Box Shadow

The kutija-sjena svojstvo se koristi za primjenu sjene na HTML elemente.

Sintaksa CSS svojstva box-shadow

box-shadow: [horizontalni pomak] [vertikalni pomak] [radijus zamućenja] [opcijski radijus širenja] [boja];

Bilješka: Parametri zamućenja, širenja i boje nisu obavezni.

Povezano: Kako koristiti CSS box-shadow: trikovi i primjeri

Na primjer:

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

Ako želite pogledati kompletan izvorni kod korišten u ovom članku, evo GitHub repozitorij.

Stilizirajte svoju web stranicu koristeći moderne CSS trikove

Dodavanje CSS sjena teksta na web stranicu izvrstan je način da privučete pozornost korisnika. Može web stranici dati određenu eleganciju i jedinstven dojam. Budite kreativni i eksperimentirajte s nekima tekst-sjena primjere koji mogu biti u skladu s temom vaše web stranice.

11 primjera sjene CSS teksta koje možete isprobati na svojoj web stranici

Možete puno učiniti s efektima sjene teksta u CSS-u, ali može biti teško znati što je točno moguće. Potražite pomoć s ovim vizualnim primjerima.

Pročitajte dalje

O autoru