Σκιά πλαισίου CSS

Πίνακας περιεχομένων

CSS box-shadow Ιδιότητα

Η ιδιότητα CSS box-shadow χρησιμοποιείται για την εφαρμογή μία ή περισσότερες σκιές σε ένα στοιχείο.

Καθορίστε μια οριζόντια και μια κάθετη σκιά

Στην απλούστερη χρήση του, ορίζετε μόνο μια οριζόντια και μια κάθετη σκιά. Το προεπιλεγμένο χρώμα της σκιάς είναι το τρέχον χρώμα κειμένου.

A <div> element with a box-shadow

Παράδειγμα

Καθορίστε μια οριζόντια και μια κάθετη σκιά:

   div
{
  box-shadow: 10px 10px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Καθορίστε ένα χρώμα για τη σκιά

Η παράμετρος color καθορίζει το χρώμα της σκιάς.

A <div> element with a lightblue box-shadow

Παράδειγμα

Καθορίστε ένα χρώμα για τη σκιά:

  div
{
  box-shadow: 10px 10px lightblue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a lightblue box-shadow</div>

</body>
</html>

Προσθέστε ένα εφέ θαμπώματος στη σκιά

Η παράμετρος θόλωμα καθορίζει την ακτίνα θαμπώματος. Όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο θολή θα είναι η σκιά.

A <div> element with a 5px blurred, lightblue box-shadow

Παράδειγμα

Προσθέστε ένα εφέ θολώματος στη σκιά:

   div
{
  box-shadow: 10px 10px 5px lightblue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a 5px blurred, lightblue box-shadow.</div>

</body>
</html>

Ρυθμίστε την ακτίνα εξάπλωσης της σκιάς

Η παράμετρος spread ορίζει την ακτίνα εξάπλωσης. Μια θετική τιμή αυξάνει το μέγεθος της σκιάς, μια αρνητική τιμή μειώνει το μέγεθος της σκιάς.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Παράδειγμα

Ορίστε την ακτίνα εξάπλωσης της σκιάς:

   div
{
  box-shadow: 10px 10px 5px 12px lightblue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>

</body>
</html>

Ορίστε την παράμετρο εισαγωγής

Η παράμετρος inset αλλάζει τη σκιά από μια εξωτερική σκιά (outset) σε μια εσωτερική σκιά.

A <div> element with a blurred, lightblue, inset box-shadow

Παράδειγμα

Προσθέστε την παράμετρο εισαγωγής:

   div
{
  box-shadow: 10px 10px 5px lightblue inset;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue, inset box-shadow.</div>

</body>
</html>

Προσθήκη πολλαπλών σκιών

Ένα στοιχείο μπορεί επίσης να έχει πολλές σκιές:

Παράδειγμα

   div
{
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  margin: 20px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
  margin: 20px;
}
</style>
</head>
<body>

<h1>Multiple Shadows</h1>

<div id="example1">
  <h2>Multiple shadows</h2>
  <p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
  <h2>Multiple shadows with blur effect</h2>
  <p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>

Καρτέλλες

Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα box-shadow για να δημιουργήσετε κάρτες που μοιάζουν με χαρτί:

1

January 1, 2021

Hardanger, Norway

Παράδειγμα

  div.card
{
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: 
center;
}

Δοκιμάστε το (Κάρτα κειμένου) →

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Cards</h1>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>

</body>
</html>

Δοκιμάστε το (Κάρτα εικόνας) →

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Polaroid Images</h1>

<p>The box-shadow property can be used to create polaroid images:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

Ιδιότητες σκιάς CSS

Ο παρακάτω πίνακας παραθέτει τις σκιώδεις ιδιότητες CSS:

box-shadow: Προσθέτει μία ή περισσότερες σκιές σε ένα στοιχείο
text-shadow: Προσθέτει μία ή περισσότερες σκιές σε ένα κείμενο