8 pagrindiniai CSS patarimai ir gudrybės, kuriuos turėtų žinoti kiekvienas kūrėjas

CSS naudojamas tinklalapio stiliui pridėti, kai nustatote HTML skeletą. Be to, naudodami tik kelias kodo eilutes galite sukurti aptakų dizainą CSS.

Kiekvienas kūrėjas turėtų žinoti šias CSS gudrybes, kad galėtų greitai ir efektyviai plėtoti savo projektus. Jie tikrai padidins jūsų produktyvumą į kitą lygį – pradėkime.

1. Užvedimo efektai

Galite pridėti pelės žymeklio efektą prie HTML elemento naudodami :užveskite pelės žymeklį parinkiklis.

Pavyzdys: Užvedimo efekto pridėjimas prie mygtuko elemento.

HTML kodas:

Užveskite pelės žymeklį virš manęs

CSS kodas:

mygtukas: užveskite pelės žymeklį {
spalva: #0062FF;
kraštinė: #0062FF solid 1px;
fonas: #FFFF99;
}

Galite žaisti su šiuo kodu ir pridėti tokių efektų kaip išnykimas,įaugimas, iškreipti, ir taip toliau. Padarykite tai savo!

CSS išnykimo efektas naudojant „Hover“.

mygtukas{
neskaidrumas: 0,5;
}
mygtukas: užveskite pelės žymeklį{
neskaidrumas: 1;
}

CSS augimo efektas „Hover“.

mygtukas: užveskite pelės žymeklį{
-webkit-transform: skalė (1.2);
-ms-transformacija: skalė (1.2);
transformuoti: mastelis (1.2);
}

2. Pakeiskite vaizdų dydį, kad tilptų į „div“ konteinerį

Galite pakeisti vaizdo dydį, kad jis tilptų į div konteinerį, naudodami aukščio, plotis, ir tinkamas objektui savybių.

HTML kodas:

CSS kodas:

.random-image {
 aukštis: 100%;
 plotis: 100%;
 objektas tinkamas: turi;
 }

3. Visų stilių nepaisymas

Galite nepaisyti visų kitų atributo stiliaus deklaracijų (įskaitant eilutinius stilius) naudodami !svarbu direktyva vertės pabaigoje.

HTML kodas:

 Labas pasauli!

CSS kodas:

p {
 fono spalva: geltona;
 }
 .className {
 fono spalva: mėlyna !svarbu;
 }
 #idName {
 fono spalva: žalia;
 }

Šiame pavyzdyje !svarbu taisyklė viršija visus kitus fono spalva deklaracijas ir užtikrina, kad fono spalva būtų mėlyna, o ne žalia.

4. Sutrumpinkite tekstą su elipsėmis

Perpildytą tekstą galite sutrumpinti naudodami elipsę (...) naudojant teksto perpildymas CSS nuosavybė.

HTML kodas:

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

CSS kodas:

.text {
 tarpas: be įvyniojimo;
 perteklius paslėptas;
 teksto perpildymas: elipsė;
 plotis: 200 pikselių;
 }

Susijęs: CSS dėžutės modelis paaiškintas pavyzdžiais

5. Naudojant teksto transformaciją

Galite priversti tekstą rašyti didžiosiomis, mažosiomis arba didžiosiomis raidėmis naudodami teksto transformacija CSS nuosavybė.

Didžiosios raidės

HTML kodas:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kodas:

.didžiosios raidės {
 teksto transformavimas: didžiosios raidės;
 }

Mažosios raidės

HTML kodas:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kodas:

.mažosios raidės {
 teksto transformavimas: mažosios raidės;
 }

Rašyti didžiosiomis raidėmis

HTML kodas:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CSS kodas:

.capitalize {
 tekstas transformuoti: rašyti didžiosiomis raidėmis;
 }

6. Vienos eilutės nuosavybės deklaracijos naudojimas

Galite naudoti CSS santrumpos ypatybes, kad kodas būtų glaustas ir lengvai skaitomas.

Pavyzdžiui, CSS fone yra trumpoji savybė, leidžianti apibrėžti reikšmes fono spalva, fono vaizdas, fono kartojimas, ir fono padėtis. Panašiai galite apibrėžti ypatybes šriftas, siena, marža, ir kamšalas.

Vienos eilutės fono nuosavybės deklaracija

fono spalva: juoda;
background-image: url (images/xyz.png);
fono kartojimas: nekartoti;
fono padėtis: kairėje viršuje;

Aukščiau pateiktą deklaraciją galite supaprastinti iki vienos eilutės:

fonas: juodas url (images/xyz.png) be pasikartojimo kairėje viršuje;

Sutrumpinimo savybes labai patogu naudoti, tačiau reikia atsižvelgti į kai kurias keblūs krašto atvejai (kaip nurodyta MDN žiniatinklio dokumentuose) juos naudodami.

Patarimai yra būdas pateikti daugiau informacijos apie elementą, kai vartotojas perkelia pelės žymeklį ant elemento.

HTML kodas:

Teisingas patarimas
Tai patarimo tekstas

CSS kodas:

kūnas {
 teksto lygiavimas: centre;
 }
 .tooltip_div {
 padėtis: santykinė;
 ekranas: eilutinis blokas;
 }
 .tooltip_div .tooltip {
 matomumas: paslėptas;
 plotis: 170 pikselių;
 fono spalva: mėlyna;
 spalva: #fff;
 teksto lygiavimas: centre;
 kraštinės spindulys: 6 pikseliai;
 pamušalas: 5 pikselių 0;
 /* Patarimo padėties nustatymas */
 padėtis: absoliuti;
 z indeksas: 1;
 viršuje: -5px;
 liko: 105 %;
 }
 .tooltip_div: užveskite pelės žymeklį .tooltip {
 matomumas: matomas;
 }

HTML kodas:

Kairysis patarimas
Tai patarimo tekstas

CSS kodas:

kūnas {
 teksto lygiavimas: centre;
 }
 .tooltip_div {
 padėtis: santykinė;
 ekranas: eilutinis blokas;
 }
 .tooltip_div .tooltip {
 matomumas: paslėptas;
 plotis: 170 pikselių;
 fono spalva: mėlyna;
 spalva: #fff;
 teksto lygiavimas: centre;
 kraštinės spindulys: 6 pikseliai;
 pamušalas: 5 pikselių 0;
 /* Patarimo padėties nustatymas */
 padėtis: absoliuti;
 z indeksas: 1;
 viršuje: -5px;
 dešinėje: 105 %;
 }
 .tooltip_div: užveskite pelės žymeklį .tooltip {
 matomumas: matomas;
 }

HTML kodas:

Viršutinis patarimas
Tai patarimo tekstas

CSS kodas:

kūnas {
 teksto lygiavimas: centre;
 }
 .tooltip_div {
 paraštė viršuje: 100 tšk.;
 padėtis: santykinė;
 ekranas: eilutinis blokas;
 }
 .tooltip_div .tooltip {
 matomumas: paslėptas;
 plotis: 170 pikselių;
 fono spalva: mėlyna;
 spalva: #fff;
 teksto lygiavimas: centre;
 kraštinės spindulys: 6 pikseliai;
 pamušalas: 5 pikselių 0;
 /* Patarimo padėties nustatymas */
 padėtis: absoliuti;
 z indeksas: 1;
 dugnas: 100%;
 liko: 50%;
 paraštė kairėje: -60 pikselių;
 }
 .tooltip_div: užveskite pelės žymeklį .tooltip {
 matomumas: matomas;
 }

HTML kodas:

Apatinis patarimas
Tai patarimo tekstas

CSS kodas:

kūnas {
 teksto lygiavimas: centre;
 }
 .tooltip_div {
 paraštė viršuje: 100 tšk.;
 padėtis: santykinė;
 ekranas: eilutinis blokas;
 }
 .tooltip_div .tooltip {
 matomumas: paslėptas;
 plotis: 170 pikselių;
 fono spalva: mėlyna;
 spalva: #fff;
 teksto lygiavimas: centre;
 kraštinės spindulys: 6 pikseliai;
 pamušalas: 5 pikselių 0;
 /* Padėkite patarimo vietą */
 padėtis: absoliuti;
 z indeksas: 1;
 viršus: 100%;
 liko: 50%;
 paraštė kairėje: -60 pikselių;
 }
 .tooltip_div: užveskite pelės žymeklį .tooltip {
 matomumas: matomas;
 }

Taip pat galite naudoti Bootstrap biblioteką, kad sukurtumėte tinkintą Bootstrap įrankių patarimai.

8. Pridėti šešėlių efektus

Galite pridėti CSS šešėlių efektų prie tekstų ir elementų naudodami tekstas-šešėlis ir dėžutė-šešėlis CSS savybės.

CSS teksto šešėlis

The tekstas-šešėlis CSS nuosavybė prideda prie teksto šešėlių ir sluoksnių. The tekstas-šešėlis ypatybė priima kableliais atskirtą šešėlių sąrašą, kuris bus taikomas tekstui.

Teksto šešėlio CSS ypatybės sintaksė:

/* Su text-shadow CSS ypatybe galite naudoti 4 argumentus:
offset-x, offset-y, suliejimo spindulys ir spalva */
/* poslinkis-x | offset-y | suliejimo spindulys | spalva */
tekstas-šešėlis: 2px 2px 4px raudona;
/* spalva | poslinkis-x | offset-y | suliejimo spindulys */
teksto šešėlis: #18fa3e 1px 2px 10px;

Pastaba: spalvos ir suliejimo spindulio argumentai yra neprivalomi.

Susijęs: Kaip naudoti CSS teksto šešėlį: gudrybės ir pavyzdžiai

Pavyzdžiui:

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

CSS langelio šešėlis

The dėžutė-šešėlis ypatybė naudojama šešėliui pritaikyti HTML elementams.

Lauko šešėlio CSS ypatybės sintaksė

langelis-šešėlis: [horizontalus poslinkis] [vertikalus poslinkis] [suliejimo spindulys] [pasirenkamas sklaidos spindulys] [spalva];

Pastaba: suliejimo, sklaidos ir spalvų parametrai yra neprivalomi.

Susijęs: Kaip naudoti CSS langelio šešėlį: gudrybės ir pavyzdžiai

Pavyzdžiui:

langelis-šešėlis: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Jei norite peržiūrėti visą šiame straipsnyje naudojamą šaltinio kodą, štai „GitHub“ saugykla.

Sukurkite savo svetainę naudodami šiuolaikines CSS gudrybes

CSS teksto šešėlių pridėjimas prie svetainės yra puikus būdas atkreipti vartotojų dėmesį. Tai gali suteikti svetainei tam tikros elegancijos ir unikalumo. Būkite kūrybingi ir eksperimentuokite su kai kuriais tekstas-šešėlis pavyzdžiai, kurie gali atitikti jūsų svetainės temą.

11 CSS teksto šešėlių pavyzdžių, kuriuos galite išbandyti savo svetainėje

Galite daug nuveikti naudodami CSS teksto šešėlio efektus, tačiau gali būti sunku tiksliai žinoti, kas įmanoma. Gaukite pagalbos dėl šių vaizdinių pavyzdžių.

Skaitykite toliau

Apie autorių