CSS-skuggeffekter


Innehållsförteckning

    Visa innehållsförteckning


Norway

Shadows

With CSS you can create shadow effects!

Hover over me!

CSS-skuggeffekter

Med CSS kan du lägga till skugga till text och till element.

I dessa kapitel kommer du att lära dig om följande egenskaper:

text-shadow
box-shadow

CSS Text Shadow

CSS-egenskapen text-shadow tillämpar skugga på text.

I sin enklaste användning anger du bara den horisontella skuggan (2px) och den vertikala skuggan (2px):

Text shadow effect!

Exempel

  h1
{
  text-shadow: 2px 2px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>


Lägg sedan till en färg till skuggan:

Text shadow effect!

Exempel

  h1
{
  text-shadow: 2px 2px red;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>


Lägg sedan till en oskärpa effekt till skuggan:

Text shadow effect!

Exempel

   h1
{
  text-shadow: 2px 2px 5px red;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>


Följande exempel visar en vit text med svart skugga:

Text shadow effect!

Exempel

   h1
{
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>


Följande exempel visar en röd neon glödskugga:

Text shadow effect!

Exempel

  h1
{
  text-shadow: 0 0 3px #FF0000;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow with red neon glow!</h1>

</body>
</html>




Flera skuggor

Om du vill lägga till mer än en skugga till texten kan du lägga till en kommaseparerad lista med skuggor.

Följande exempel visar en röd och blå neon glödskugga:

Text shadow effect!

Exempel

   h1
{
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow with red and blue neon glow!</h1>

</body>
</html>


Följande exempel visar en vit text med svart, blå och mörkblå skugga:

Text shadow effect!

Exempel

   h1
{
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>


Du kan också använda egenskapen text-shadow för att skapa en vanlig ram runt viss text (utan skuggor):

Border around text!

Exempel

   h1
{
  color: coral;
  text-shadow: -1px 0 black, 0 1px 
    black, 1px 0 black, 0 -1px black;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

</body>
</html>