CSS3 låter dig vara kreativ och experimentera med din design för att bygga vackra och unika webbsidor. Ett designområde som CSS låter dig arbeta med är typografi.
Du kan använda typsnittsfamilj och text-skugga egenskaper för att skapa enkla men anmärkningsvärda effekter. Du kanske redan känner till grundläggande tillämpningar av textskugga i CSS. Du kan dock skapa ett brett utbud av stilar med dessa egenskaper.
I den här artikeln lär du dig ett effektivt sätt att skapa olika textskuggeffekter med HTML och CSS.
Komma igång med HTML och CSS
Du kan kopiera och klistra in dessa kodexempel för att få vilken textskuggeffekt du föredrar. Börja med att skapa en index.html fil och en style.css fil. Det här är de enda filerna du behöver för att prova exemplen, men du måste ändra båda filerna för varje exempel.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- shadow #01 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
<!-- shadow #02 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>
<!-- shadow #03 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/><!-- shadow #04 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/><!-- shadow #05 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/><!-- shadow #06 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/><!-- shadow #07 -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="stylesheet"
/><link rel="stylesheet" href="https://ipotek.net/11-css-text-shadow-exempel-som-du-kan-prova-pa-din-webbplats/style.css" />
<title>CSS Text Shadow Examples</title>
</head>
</html>
style.css
body {
text-transform: uppercase;
line-height: 1;
text-align: center;
font-size: 5rem;
display: grid;
gap: 4rem;
}
Nu ska vi gå igenom 11 textskuggexempel som du kan prova.
Mystiker
Mystic är en glasig stil som ger en cool övergångsliknande effekt utan att använda omvandla fast egendom. Det är en superenkel, men ändå estetiskt tilltalande effekt för en djärv och tillväxtorienterad webbplats.
Produktion
HTML
<body>
<!-- Shadow #01 -->
<h1 class="mystic">Mystic</h1>
</body>
CSS
body {
background-color: #5e5555;
}
.mystic {
font-family: 'Bowlby One', cursive;
color: rgba(255, 255, 255, 0.596);
text-shadow: 20px 0px 10px rgb(0, 0, 0);
}
Monoton
Detta är en lekfull texteffekt som använder typsnittet “Monoton”. Du kan leka med texten och skuggfärgen för att matcha din webbplatss primära färger.
Produktion
HTML
<body>
<!-- Shadow #02 -->
<h1 class="monoton">Monoton</h1>
</body>
CSS
.monoton {
font-family: 'Monoton', cursive;
font-size: 15rem;
color: rgb(255, 0, 0);
opacity: 0.5;
text-shadow: 0px -78px rgb(255, 196, 0);
}
Bungee
Detta är en cool stil med typsnittet “Bungee Shade”. I kombination med en mörk bakgrund ger den en rå effekt med en känsla av misstänksamhet.
Produktion
HTML
<body>
<!-- shadow #03 -->
<h1 class="bungee">Bungee</h1>
</body>
CSS
body {
background-color: #222;
}
.bungee {
font-family: 'Bungee Shade', cursive;
color: rgb(160, 12, 12);
opacity: 0.9;
text-shadow: -18px 18px 0 rgb(66, 45, 45);
}
Radioaktiv
Du kan använda denna effekt för varnings- eller farosignaler. Den använder typsnittet ‘Rampart One’.
Produktion
HTML
<body>
<!-- shadow #04 -->
<h1 class="radioactive">Radioactive</h1>
</body>
CSS
body {
background-color: #27292d;
}
.radioactive {
font-family: 'Rampart One', cursive;
color: rgb(97, 214, 43);
opacity: 0.6;
text-shadow: -18px -18px 20px rgb(87, 255, 9);
}
Sprinta
Denna löpande texteffekt använder typsnittet ‘Faster One’, the text-skugga egendom och en ::efter pseudoelement med samma innehåll som texten. Detta skapar en “fördubblingseffekt”.
Produktion
HTML
<body>
<!-- shadow #05 -->
<h1 class="sprint">Sprint</h1>
</body>
CSS
body {
background-color: #27292d;
}
.sprint {
font-family: 'Faster One', cursive;
font-size: 10rem;
color: rgba(255, 0, 242, 0.322);
text-shadow: -20px -108px 0px rgba(255, 255, 255, 0.445);
letter-spacing: 1rem;
position: relative;
}
.sprint::after {
content: 'sprint';
position: absolute;
top: 215px;
right: 300px;
}
Taggig
Denna skrämmande taggiga texteffekt använder typsnittet “Eater”. Du kan prova att växla text-skugga nere till höger istället.
Produktion
HTML
<body>
<!-- shadow #06 -->
<p class="prickly">Prickly</p>
</body>
CSS
.prickly {
font-family: 'Eater', cursive;
text-shadow: -18px -18px 2px #777;
}
Codystar
Textskuggan kan fungera som en suddig men ändå synlig kontur till texten. Denna ljusa effekt gör underverk med “Codystar”-teckensnittet.
Produktion
HTML
<body>
<!-- shadow #06 -->
<p class="codystar">Codystar</p>
</body>
CSS
.codystar {
font-family: 'Codystar', cursive;
font-weight: bold;
color: rgb(55, 58, 255);
text-shadow: 1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255);
}
Rike
Du kan uppnå auktoritativ typografi med denna skuggeffekt. Den använder ::innan pseudo-element och omvandla egendom för att luta skuggan.
Produktion
HTML
<body>
<!-- shadow #08 -->
<h1 class="kingdom kingdom--shadow" data-text="kingdom">Kingdom</h1>
</body>
CSS
body {
background-color: #5e5555;
}
.kingdom {
color: white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 10rem;
line-height: 1;
text-align: center;
}
.kingdom--shadow::before {
color: #000;
content: attr(data-text);
margin-top: 0.7rem;
position: absolute;
transform: perspective(205px) rotateX(38deg) scale(0.84);
z-index: -1;
}
Kodare
Detta ljusa och positiva text-skugga effekt förmedlar en självmedveten och motiverad webbplatspersonlighet. Du kan lägga till den på din webbplats för att skapa en enkel rökig look.
Produktion
HTML
<body>
<!-- shadow #09 -->
<div class="coder-life">
Eat <br>
Sleep <br>
Code <br>
Repeat
</div>
</body>
CSS
body {
background-color: #5e5555;
}
div {
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 40px;
margin: 0px auto;
font-weight: bold;
line-height: 5.8rem;
text-align: left;
color: rgb(94, 94, 94);
}
.coder-life {
text-shadow: 5px 5px #ffff00;
filter: drop-shadow(-10px 10px 20px #fff000);
}
Elegant
Om du älskar minimalism är denna textskuggeffekt en perfekt passform. Eftersom den använder en stor teckenstorlek minskade vi teckenavstånd och tillämpade text-skugga egenskap för att skapa denna effekt.
Utgång
HTML
<body>
<!-- shadow #10 -->
<div class="elegant">
<span>s</span>
<span>h</span>
<span>r</span>
<span>a</span>
<span>d</span>
<span>d</span>
<span>h</span>
<span>a</span>
</div>
</body>
CSS
.elegant {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 10rem;
letter-spacing: -1rem;
color: white;
text-shadow: -18px 8px 18px #b4bbbb;
}
Lekfull
Den tunna och djärva konturen gör denna text attraktiv och livlig. Du kan leka med text-skugga egenskap utan oskärpa radie vid olika positioner. Textskuggor gäller för alla tecken, inklusive HTML-enheter som t.ex &hjärtan;. Du kan använda ett referensdiagram för karaktärsenhet för att utforska vidare.
Utgång
HTML
<body>
<!-- shadow #11 -->
<h2 class="playful">Coding is ♥</h2>
</body>
CSS
.playful {
font-family: 'Baloo Tamma', cursive;
color: #fff;
letter-spacing: 0.2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}
Fortsätt att experimentera med avancerade skuggeffekter
Textskuggor är ett enkelt och effektivt sätt att förbättra din webbdesign och göra din webbplats visuellt tilltalande. Du kan också experimentera med olika skuggeffekter. Du kan lära dig mer om skuggeffekter för att fortsätta din CSS-resa.
Om författaren
Naincy Mourya (19 artiklar publicerade)
Naincy är specialiserat på att bygga mycket responsiva webbplatser och effektiv innehållsstrategi tillsammans med webbkopior. Hon är en frilansande teknikskribent som håller ett skarpt öga på trendteknologi.
Mer från Naincy Mourya
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
