CSS3 antaa sinun olla luova ja kokeilla suunnitteluasi luodaksesi kauniita ja ainutlaatuisia verkkosivuja. Yksi suunnittelualue, jonka kanssa CSS: n avulla voit työskennellä, on typografia.

Voit käyttää font-perhe ja teksti-varjo ominaisuuksia luodaksesi yksinkertaisia ​​mutta merkittäviä tehosteita. Saatat jo tietää CSS: n tekstivarjon perussovelluksista. Voit kuitenkin luoda laajan valikoiman tyylejä näillä ominaisuuksilla.

Tässä artikkelissa opit tehokkaan tavan luoda erilaisia ​​tekstin varjotehosteita HTML: n ja CSS: n avulla.

HTML: n ja CSS: n käytön aloittaminen

Voit kopioida ja liittää nämä koodiesimerkit saadaksesi haluamasi tekstin varjotehosteen. Aloita luomalla index.html tiedosto ja a tyyli.css tiedosto. Nämä ovat ainoita tiedostoja, joita tarvitset kokeillaksesi esimerkkejä, mutta sinun on vaihdettava molemmat tiedostot jokaisessa esimerkissä.

index.html

 varjo #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="tyylitaulukko"
/>
 varjo #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="tyylitaulukko"
/>
 varjo #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="tyylitaulukko"
/>
 varjo #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="tyylitaulukko"
/>
 varjo #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="tyylitaulukko"
/>
 varjo #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="tyylitaulukko"
/>
 varjo #07 


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

tyyli.css

body {
tekstin muunnos: isot kirjaimet;
rivin korkeus: 1;
tekstin tasaus: keskellä;
fontin koko: 5rem;
näyttö: ruudukko;
rako: 4 rem;
}

Käydään nyt läpi 11 tekstivarjoesimerkkiä, joita voit kokeilla.

Aiheeseen liittyvä: Verkkosivustosi tekstin muuttaminen CSS-kirjasinperheen omaisuudella

Mystinen

Mystic on lasimainen tyyli, joka antaa viileän siirtymävaikutelman ilman käyttöä muuttaa omaisuutta. Se on erittäin yksinkertainen, mutta esteettisesti miellyttävä tehoste rohkealle ja kasvuhakuiselle verkkosivustolle.

Lähtö

HTML

 Varjo #01 
Mystinen

CSS

body {
taustaväri: #5e5555;
}
.mystic {
font-family: 'Bowlby One', kursiivinen;
väri: rgba (255, 255, 255, 0,596);
tekstivarjo: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Tämä on leikkisä tekstitehoste "Monoton"-fontilla. Voit leikkiä tekstin ja varjojen väreillä verkkosivustosi päävärien kanssa.

Lähtö

HTML

 Varjo #02 
Monoton

CSS

.monoton {
font-family: 'Monoton', kursiivinen;
fonttikoko: 15rem;
väri: rgb (255, 0, 0);
opasiteetti: 0,5;
tekstivarjo: 0px -78px rgb (255, 196, 0);
}

Bungee

Tämä on siisti tyyli käyttämällä "Bungee Shade" -fonttia. Yhdessä tumman taustan kanssa se tuottaa raakavaikutelman, jossa on epäluuloa.

Lähtö

HTML

 varjo #03 
Bungee

CSS

body {
taustaväri: #222;
}
.bungee {
font-family: 'Bungee Shade', kursiivinen;
väri: rgb (160, 12, 12);
opasiteetti: 0,9;
tekstivarjo: -18px 18px 0 rgb (66, 45, 45);
}

Radioaktiivinen

Voit käyttää tätä tehostetta varoitus- tai vaaramerkkeihin. Se käyttää "Rampart One" -fonttia.

Lähtö

HTML

 varjo #04 
Radioaktiivinen

CSS

body {
taustaväri: #27292d;
}
.radioactive {
font-family: 'Rampart One', kursiivinen;
väri: rgb (97, 214, 43);
opasiteetti: 0,6;
tekstivarjo: -18px -18px 20px rgb (87, 255, 9);
}

Sprintti

Tämä käynnissä oleva tekstitehoste käyttää Faster One -fonttia, teksti-varjo omaisuus ja an ::jälkeenpseudoelementti sama sisältö kuin teksti. Tämä luo "kaksinkertaisen" vaikutuksen.

Lähtö

HTML

 varjo #05 
Sprintti

CSS

body {
taustaväri: #27292d;
}
.sprint {
font-family: 'Faster One', kursiivinen;
fontin koko: 10 rem;
väri: rgba (255, 0, 242, 0,322);
tekstivarjo: -20px -108px 0px rgba (255, 255, 255, 0,445);
kirjainvälit: 1 rem;
asema: suhteellinen;
}
.sprint:: jälkeen {
sisältö: "sprintti";
sijainti: absoluuttinen;
yläreuna: 215px;
oikea: 300px;
}

Piikikäs

Tämä kauhistuttava piikikäs tekstitehoste käyttää Eater-fonttia. Voit yrittää vaihtaa teksti-varjo sen sijaan oikeaan alakulmaan.

Lähtö

HTML

 varjo #06 
Piikikäs

CSS

.piikikäs {
font-family: 'Eater', kursiivinen;
text-hadow: -18px -18px 2px #777;
}

Codystar

Tekstivarjo voi toimia epäselvänä mutta näkyvänä tekstin ääriviivana. Tämä kirkas tehoste tekee ihmeitä Codystar-fontilla.

Lähtö

HTML

 varjo #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', kursiivinen;
fontin paino: lihavoitu;
väri: rgb (55, 58, 255);
tekstivarjo: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Kuningaskunta

Voit saavuttaa arvovaltaisen typografian tällä varjotehosteella. Se käyttää ::ennen pseudoelementti ja muuttaa ominaisuus kallistaa varjoa.

Lähtö

HTML

 varjo #08 
Kuningaskunta

CSS

body {
taustaväri: #5e5555;
}
.kuningaskunta {
väri valkoinen;
kirjasinperhe: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
fontin koko: 10 rem;
rivin korkeus: 1;
tekstin tasaus: keskellä;
}
.kuningaskunta--varjo:: ennen {
väri: #000;
sisältö: attr(data-teksti);
marginaali yläosa: 0,7rem;
sijainti: absoluuttinen;
muunnos: perspektiivi (205 pikseliä) pyöritäX (38 astetta) asteikko (0,84);
z-indeksi: -1;
}

Koodaaja

Tämä valoisa ja positiivinen teksti-varjo vaikutus välittää itsetietoisen ja motivoituneen verkkosivuston persoonallisuuden. Voit lisätä sen verkkosivustollesi luodaksesi yksinkertaisen savuisen ilmeen.

Lähtö

HTML

 varjo #09 


Syödä 

Nukkua 

Koodi 

Toistaa

CSS

body {
taustaväri: #5e5555;
}
div {
kirjasinperhe: Verdana, Geneve, Tahoma, sans-serif;
täyte: 40px;
marginaali: 0px auto;
fontin paino: lihavoitu;
linjan korkeus: 5,8 rem;
tekstin tasaus: vasen;
väri: rgb (94, 94, 94);
} 
.coder-life {
tekstivarjo: 5px 5px #ffff00;
suodatin: drop-shadow(-10px 10px 20px #fff000);
}

Tyylikäs

Jos pidät minimalismista, tämä tekstivarjotehoste sopii täydellisesti. Koska se käyttää suurta fonttikokoa, pienensimme kirjainväli ja sovelsi teksti-varjo ominaisuus luoda tämä vaikutus.

Lähtö

HTML

 varjo #10 


s
h
r
a
d
d
h
a

CSS

.elegant {
kirjasinperhe: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
fontin koko: 10 rem;
kirjainvälit: -1rem;
väri valkoinen;
tekstivarjo: -18px 8px 18px #b4bbbb;
}

Leikkisä

Ohut ja rohkeat ääriviivat tekevät tästä tekstistä houkuttelevan ja elävän. Voit leikkiä teksti-varjo ominaisuus ilman sumennuksen sädettä eri paikoissa. Tekstin varjot koskevat kaikkia merkkejä, mukaan lukien HTML-kokonaisuudet, kuten ♥. Voit käyttää a Merkkikokonaisuuden viitekaavio tutkimaan lisää.

Lähtö

HTML

 varjo #11 
Koodaus on ♥

CSS

.playful {
font-family: 'Baloo Tamma', kursiivinen;
väri: #fff;
kirjainväli: 0,2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Jatka kokeilemista edistyneillä varjotehosteilla

Tekstivarjot ovat helppo ja tehokas tapa parantaa web-suunnitteluasi ja tehdä sivustostasi visuaalisesti houkutteleva. Voit myös kokeilla erilaisia ​​varjotehosteita. Voit oppia lisää varjotehosteista jatkaaksesi CSS-matkaasi.

Naincy Mourya (15 artikkelia julkaistu)

Naincy on erikoistunut erittäin responsiivisten verkkosivustojen ja tehokkaan sisältöstrategian sekä verkkokopioiden rakentamiseen. Hän on freelance-tekniikan kirjoittaja, joka pitää silmällä trendikkäitä teknologioita.

Lisää Naincy Mouryalta