8 svarīgi CSS padomi un triki, kas jāzina katram izstrādātājam

CSS tiek izmantots, lai tīmekļa lapai pievienotu stilu pēc HTML skeleta iestatīšanas. Turklāt jūs varat izveidot gludus dizainus CSS, izmantojot tikai dažas koda rindiņas.

Katram izstrādātājam ir jāzina šie CSS triki, lai ātri un efektīvi izstrādātu savus projektus. Tie noteikti paaugstinās jūsu produktivitāti līdz nākamajam līmenim — sāksim.

1. Virzīšanas efekti

Varat pievienot kursora novietošanas efektu HTML elementam, izmantojot :virziet kursoru atlasītājs.

Piemērs: kursora novietošanas efekta pievienošana pogas elementam.

HTML kods:

Virziet kursoru virs manis

CSS kods:

poga: virziet kursoru {
krāsa: #0062FF;
apmale: #0062FF solid 1px;
fons: #FFFF99;
}

Varat spēlēties ar šo kodu un pievienot tādus efektus kā izbalināt,ieaugšana, šķībs, un tā tālāk. Padariet to par savu!

CSS izbalēšanas efekts kursorā

poga{
necaurredzamība: 0,5;
}
poga: virzīt kursoru{
necaurredzamība: 1;
}

CSS pieauguma efekts uz kursora novietošanas

poga: virzīt kursoru{
-webkit-transform: skala (1.2);
-ms-transformācija: mērogs (1.2);
pārveidot: mērogs (1.2);
}

2. Mainiet attēlu izmērus, lai tie ietilptu div konteinerā

Varat mainīt attēla izmēru, lai tas ietilptu div konteinerā, izmantojot augstums, platums, un objektam piemērots īpašības.

HTML kods:

CSS kods:

.random-image {
 augstums: 100%;
 platums: 100%;
 objekts-fit: satur;
 }

3. Visu stilu ignorēšana

Varat ignorēt visas pārējās atribūta stila deklarācijas (tostarp iekļautos stilus), izmantojot !svarīgs direktīva vērtības beigās.

HTML kods:

 Sveika pasaule!

CSS kods:

p {
 fona krāsa: dzeltena;
 }
 .className {
 fona krāsa: zila !svarīgi;
 }
 #idName {
 fona krāsa: zaļa;
 }

Šajā piemērā !svarīgs noteikums pārspēj visus pārējos fona krāsa deklarācijas un nodrošina, ka fona krāsa tiks iestatīta uz zilu, nevis zaļu.

4. Saīsināt tekstu ar elipsi

Jūs varat saīsināt pārpildītu tekstu ar elipsi (...) izmantojot teksta pārpilde CSS īpašums.

HTML kods:

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

CSS kods:

.text {
 atstarpe: nowrap;
 pārplūde: slēpta;
 teksta pārpilde: elipses;
 platums: 200 pikseļi;
 }

Saistīts: CSS kastes modelis izskaidrots ar piemēriem

5. Izmantojot teksta transformāciju

Varat piespiest tekstu rakstīt ar lielajiem, mazajiem vai lielajiem burtiem, izmantojot teksta pārveidošana CSS īpašums.

Lielie burti

HTML kods:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kods:

.lielie burti {
 teksta pārveidošana: lielie burti;
 }

Mazie burti

HTML kods:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kods:

.lowercase {
 teksta pārveidošana: mazie burti;
 }

Lielo burtu rakstīšana

HTML kods:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kods:

.capitalize {
 teksta pārveidošana: rakstīt lielos burtus;
 }

6. Vienas rindas īpašuma deklarācijas izmantošana

Varat izmantot CSS saīsinātos rekvizītus, lai padarītu kodu kodolīgu un viegli lasāmu.

Piemēram, CSS fons ir saīsināts rekvizīts, kas ļauj definēt vērtības fona krāsa, fona attēls, fona atkārtojums, un fona pozīcija. Līdzīgi varat definēt rekvizītus fontu, robeža, starpība, un polsterējums.

Vienas rindas fona īpašuma deklarācija

fona krāsa: melna;
fona attēls: url (images/xyz.png);
fona atkārtojums: neatkārtot;
fona pozīcija: augšā pa kreisi;

Iepriekš minēto deklarāciju var vienkāršot vienā rindā:

fons: melns url (images/xyz.png) bez atkārtošanas augšā pa kreisi;

Īsraksta īpašības ir ļoti ērti lietojamas, taču jums ir jāņem vērā daži viltīgi malu gadījumi (kā norādīts MDN tīmekļa dokumentos), tos lietojot.

Rīka padomi ir veids, kā sniegt vairāk informācijas par elementu, kad lietotājs pārvieto peles rādītāju virs elementa.

HTML kods:

Labais rīka padoms
Šis ir rīka padoma teksts

CSS kods:

body {
 teksta līdzināšana: centrs;
 }
 .tooltip_div {
 pozīcija: relatīvs;
 displejs: inline-block;
 }
 .tooltip_div .tooltip {
 redzamība: slēpta;
 platums: 170 pikseļi;
 fona krāsa: zila;
 krāsa: #fff;
 teksta līdzināšana: centrs;
 apmales rādiuss: 6 pikseļi;
 polsterējums: 5 pikseļi 0;
 /* Rīka padoma izvietošana */
 pozīcija: absolūta;
 z-indekss: 1;
 augšpusē: -5 pikseļi;
 pa kreisi: 105%;
 }
 .tooltip_div: virziet kursoru .tooltip {
 redzamība: redzama;
 }

HTML kods:

Kreisais rīka padoms
Šis ir rīka padoma teksts

CSS kods:

body {
 teksta līdzināšana: centrs;
 }
 .tooltip_div {
 pozīcija: relatīvs;
 displejs: inline-block;
 }
 .tooltip_div .tooltip {
 redzamība: slēpta;
 platums: 170 pikseļi;
 fona krāsa: zila;
 krāsa: #fff;
 teksta līdzināšana: centrs;
 apmales rādiuss: 6 pikseļi;
 polsterējums: 5 pikseļi 0;
 /* Rīka padoma izvietošana */
 pozīcija: absolūta;
 z-indekss: 1;
 augšpusē: -5 pikseļi;
 pa labi: 105%;
 }
 .tooltip_div: virziet kursoru .tooltip {
 redzamība: redzama;
 }

HTML kods:

Augšējais rīka padoms
Šis ir rīka padoma teksts

CSS kods:

body {
 teksta līdzināšana: centrs;
 }
 .tooltip_div {
 augšdaļa: 100 pikseļi;
 pozīcija: relatīvs;
 displejs: inline-block;
 }
 .tooltip_div .tooltip {
 redzamība: slēpta;
 platums: 170 pikseļi;
 fona krāsa: zila;
 krāsa: #fff;
 teksta līdzināšana: centrs;
 apmales rādiuss: 6 pikseļi;
 polsterējums: 5 pikseļi 0;
 /* Rīka padoma izvietošana */
 pozīcija: absolūta;
 z-indekss: 1;
 apakšdaļa: 100%;
 pa kreisi: 50%;
 piemale-kreisais: -60 pikseļi;
 }
 .tooltip_div: virziet kursoru .tooltip {
 redzamība: redzama;
 }

HTML kods:

Apakšējais rīka padoms
Šis ir rīka padoma teksts

CSS kods:

body {
 teksta līdzināšana: centrs;
 }
 .tooltip_div {
 augšdaļa: 100 pikseļi;
 pozīcija: relatīvs;
 displejs: inline-block;
 }
 .tooltip_div .tooltip {
 redzamība: slēpta;
 platums: 170 pikseļi;
 fona krāsa: zila;
 krāsa: #fff;
 teksta līdzināšana: centrs;
 apmales rādiuss: 6 pikseļi;
 polsterējums: 5 pikseļi 0;
 /* Novietojiet rīka padomu */
 pozīcija: absolūta;
 z-indekss: 1;
 augšdaļa: 100%;
 pa kreisi: 50%;
 piemale-kreisais: -60 pikseļi;
 }
 .tooltip_div: virziet kursoru .tooltip {
 redzamība: redzama;
 }

Varat arī izmantot Bootstrap bibliotēku, lai izveidotu pielāgotu Bootstrap rīka padomi.

8. Pievienojiet ēnu efektus

Varat pievienot CSS ēnu efektus tekstiem un elementiem, izmantojot teksts-ēna un kaste-ēna CSS īpašības.

CSS teksta ēna

The teksts-ēna CSS rekvizīts pievieno tekstam ēnas un slāņus. The teksts-ēna rekvizīts pieņem ar komatu atdalītu ēnu sarakstu, kas jāpiemēro tekstam.

Teksta ēnu CSS rekvizīta sintakse:

/* Ar teksta ēnu CSS rekvizītu varat izmantot 4 argumentus:
nobīde-x, nobīde-y, izplūšanas rādiuss un krāsa */
/* nobīde-x | nobīde-y | izplūduma rādiuss | krāsa */
teksta ēna: 2px 2px 4px sarkans;
/* krāsa | nobīde-x | nobīde-y | izplūšanas rādiuss */
teksta ēna: #18fa3e 1px 2px 10px;

Piezīme: krāsu un izplūšanas rādiusa argumenti nav obligāti.

Saistīts: Kā lietot CSS teksta ēnu: triki un piemēri

Piemēram:

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

CSS lodziņa ēna

The kaste-ēna Īpašums tiek izmantots, lai HTML elementiem lietotu ēnu.

Lodziņa ēnas CSS rekvizīta sintakse

box-shadow: [horizontālā nobīde] [vertikālā nobīde] [izplūduma rādiuss] [izvēles izkliedes rādiuss] [krāsa];

Piezīme: izplūšanas, izplatības un krāsu parametri nav obligāti.

Saistīts: Kā lietot CSS lodziņu: triki un piemēri

Piemēram:

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

Ja vēlaties apskatīt visu šajā rakstā izmantoto avota kodu, šeit ir norādīts GitHub repozitorijs.

Veidojiet savas vietnes stilu, izmantojot mūsdienīgus CSS trikus

CSS teksta ēnu pievienošana vietnei ir lielisks veids, kā pievērst lietotāju uzmanību. Tas var piešķirt vietnei noteiktu eleganci un unikālu sajūtu. Esiet radošs un eksperimentējiet ar dažiem teksts-ēna piemēri, kas var atbilst jūsu vietnes tēmai.

11 CSS teksta ēnu piemēri, ko varat izmēģināt savā vietnē

Ar teksta ēnu efektiem CSS var izdarīt daudz, taču var būt grūti precīzi zināt, kas ir iespējams. Saņemiet palīdzību saistībā ar šiem vizuālajiem piemēriem.

Lasiet Tālāk

Par autoru