CSS3 vă permite să fiți creativ și să experimentați cu designul dvs. pentru a crea pagini web frumoase și unice. Un domeniu de design cu care CSS vă permite să lucrați este tipografia.

Puteți folosi familie de fonturi și text-umbră proprietăți pentru a crea efecte simple, dar remarcabile. Poate că știți deja despre aplicațiile de bază ale umbrei textului în CSS. Cu toate acestea, puteți crea o gamă largă de stiluri cu aceste proprietăți.

În acest articol, veți învăța o modalitate eficientă de a crea diferite efecte de umbră de text folosind HTML și CSS.

Noțiuni introductive cu HTML și CSS

Puteți copia și lipi aceste exemple de cod pentru a obține efectul de umbră de text pe care îl preferați. Începeți prin a crea un index.html dosar și a stil.css fişier. Acestea sunt singurele fișiere de care veți avea nevoie pentru a încerca exemplele, dar va trebui să schimbați ambele fișiere pentru fiecare exemplu.

index.html

 umbra #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="foaia de stil"
/>
 umbra #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="foaia de stil"
/>
 umbra #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="foaia de stil"
/>
 umbra #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="foaia de stil"
/>
 umbra #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="foaia de stil"
/>
 umbra #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="foaia de stil"
/>
 umbra #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="foaia de stil"
/>

stil.css

corp {
text-transform: majuscule;
înălțimea liniei: 1;
text-align: centru;
dimensiunea fontului: 5rem;
afisare: grila;
decalaj: 4rem;
}

Acum, să trecem prin 11 exemple de umbre de text pe care să le încercați.

Legate de: Cum să schimbați textul site-ului dvs. cu proprietatea CSS font-family

Mistic

Mystic este un stil sticlos care oferă un efect de tranziție, fără a utiliza transforma proprietate. Este un efect super simplu, dar plăcut din punct de vedere estetic, pentru un site web îndrăzneț și orientat spre creștere.

Ieșire

HTML

 Umbra #01 
Mistic

CSS

corp {
culoare de fundal: #5e5555;
}
.mistic {
font-family: „Bowlby One”, cursiv;
culoare: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Acesta este un efect de text jucăuș folosind fontul „Monoton”. Vă puteți juca cu textul și culoarea umbrelor pentru a se potrivi cu culorile primare ale site-ului dvs.

Ieșire

HTML

 Umbra #02 
Monoton

CSS

.monoton {
familie de fonturi: 'Monoton', cursiv;
dimensiunea fontului: 15rem;
culoare: rgb (255, 0, 0);
opacitate: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Acesta este un stil grozav folosind fontul „Bungee Shade”. Combinat cu un fundal întunecat, produce un efect brut cu un sentiment de suspiciune.

Ieșire

HTML

 umbra #03 
Bungee

CSS

corp {
culoare de fundal: #222;
}
.bungee {
familie de fonturi: „Bungee Shade”, cursiv;
culoare: rgb (160, 12, 12);
opacitate: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioactiv

Puteți utiliza acest efect pentru semne de alertă sau de pericol. Folosește fontul „Rampart One”.

Ieșire

HTML

 umbra #04 
Radioactiv

CSS

corp {
culoare de fundal: #27292d;
}
.radioactiv {
font-family: 'Rampart One', cursiv;
culoare: rgb (97, 214, 43);
opacitate: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Acest efect de text rulant folosește fontul „Faster One”, the text-umbră proprietate, și an ::dupăpseudo-element cu același conținut ca și textul. Acest lucru creează un efect de „dublare”.

Ieșire

HTML

 umbra #05 
Sprint

CSS

corp {
culoare de fundal: #27292d;
}
.sprint {
font-family: „Faster One”, cursiv;
dimensiunea fontului: 10rem;
culoare: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445);
spațiere între litere: 1rem;
poziție: relativă;
}
.sprint:: după {
continut: 'sprint';
poziție: absolută;
sus: 215px;
dreapta: 300px;
}

Înţepător

Acest efect de text înfiorător folosește fontul „Eater”. Puteți încerca să schimbați text-umbră în schimb spre dreapta jos.

Ieșire

HTML

 umbra #06 
Înţepător

CSS

.prickly {
font-family: 'Eater', cursiv;
text-shadow: -18px -18px 2px #777;
}

Codystar

Umbra textului poate acționa ca un contur neclar, dar vizibil pentru text. Acest efect luminos face minuni cu fontul „Codystar”.

Ieșire

HTML

 umbra #06 
Codystar

CSS

.codystar {
familie de fonturi: 'Codystar', cursiv;
greutatea fontului: bold;
culoare: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Regatul

Puteți obține o tipografie de autoritate cu acest efect de umbră. Acesta folosește ::inainte de pseudo-element și cel transforma proprietatea de a înclina umbra.

Ieșire

HTML

 umbra #08 
Regatul

CSS

corp {
culoare de fundal: #5e5555;
}
.regatul {
culoare albă;
familie de fonturi: Impact, Haettenschweiler, „Arial Narrow Bold”, sans-serif;
dimensiunea fontului: 10rem;
înălțimea liniei: 1;
text-align: centru;
}
.kingdom--shadow:: înainte de {
culoare: #000;
continut: attr(date-text);
margine-top: 0,7rem;
poziție: absolută;
transformare: perspectivă (205px) rotireX(38deg) scară (0,84);
indicele z: -1;
}

Codificator

Acest luminos și pozitiv text-umbră efectul transmite o personalitate web conștientă și motivată. Îl puteți adăuga pe site-ul dvs. web pentru a produce un aspect simplu fumuriu.

Ieșire

HTML

 umbra #09 


Mânca 

Dormi 

Cod 

Repeta

CSS

corp {
culoare de fundal: #5e5555;
}
div {
font-family: Verdana, Geneva, Tahoma, sans-serif;
umplutură: 40px;
marja: 0px automat;
greutatea fontului: bold;
înălțimea liniei: 5,8 rem;
text-align: stânga;
culoare: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filtru: drop-shadow(-10px 10px 20px #fff000);
}

Elegant

Dacă îți place minimalismul, atunci acest efect de umbră de text se potrivește perfect. Deoarece folosește o dimensiune mare a fontului, am redus spațiul dintre litere și a aplicat text-umbră proprietate pentru a crea acest efect.

Ieșire

HTML

 umbra #10 


s
h
r
A
d
d
h
A

CSS

.elegant {
familie de fonturi: Impact, Haettenschweiler, „Arial Narrow Bold”, sans-serif;
dimensiunea fontului: 10rem;
spațiere între litere: -1rem;
culoare albă;
text-shadow: -18px 8px 18px #b4bbbb;
}

Jucăuş

Conturul subțire și îndrăzneț face acest text atractiv și plin de viață. Te poți juca cu text-umbră proprietate fără rază de estompare în diferite poziții. Umbrele de text se aplică tuturor caracterelor, inclusiv entităților HTML, cum ar fi ♥. Puteți folosi a Diagrama de referință a entităților de caracter pentru a explora mai departe.

Ieșire

HTML

 umbra #11 
Codarea este ♥

CSS

.jucăuș {
familie de fonturi: 'Baloo Tamma', cursiv;
culoare: #fff;
spațiere între litere: 0,2 rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Continuați să experimentați cu efecte de umbră avansate

Umbrele de text sunt o modalitate ușoară și eficientă de a vă îmbunătăți designul web și de a vă face site-ul atrăgător din punct de vedere vizual. De asemenea, puteți experimenta diferite efecte de umbră. Puteți afla mai multe despre efectele de umbră pentru a vă continua călătoria CSS.

Naincy Mourya (15 articole publicate)

Naincy este specializată în construirea de site-uri web foarte receptive și strategie de conținut eficientă, împreună cu copii web. Ea este o scriitoare de tehnologie independentă care urmărește cu atenție tehnologiile în tendințe.

Mai multe de la Naincy Mourya