Συνάρτηση drop-shadow
Η συνάρτηση drop-shadow επιτρέπει
την προσθήκη σκιάς στην εικόνα
φόντου.
Σύνταξη
επιλογέας {
filter: drop-shadow(μετατόπιση x, μετατόπιση y, ακτίνα θόλωσης, χρώμα);
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
| μετατόπιση x | Μετατόπιση της σκιάς οριζόντια σε σχέση με το φόντο. Ο θετικός αριθμός δηλώνει μετατόπιση της σκιάς προς τα δεξιά, ο αρνητικός - προς τα αριστερά. Υποχρεωτική παράμετρος. |
| μετατόπιση y | Μετατόπιση της σκιάς κατακόρυφα σε σχέση με το φόντο. Ο θετικός αριθμός δηλώνει μετατόπιση της σκιάς προς τα κάτω, ο αρνητικός - προς τα πάνω. Υποχρεωτική παράμετρος. |
| θόλωση |
Ορίζει την ακτίνα θόλωσης της σκιάς.
Όσο μεγαλύτερη είναι η τιμή, τόσο περισσότερο θολώνει η σκιά.
Προαιρετική παράμετρος. Από προεπιλογή
ίση με 0.
|
| χρώμα | Χρώμα της σκιάς. Προαιρετική παράμετρος. Από προεπιλογή ορίζεται μαύρο χρώμα σκιάς. |
Παράδειγμα
Ας ορίσουμε για την εικόνα μας μια γαλάζια σκιά
χωρίς μετατόπιση στους άξονες, με θόλωση 5px:
<div id="elem"></div>
#elem {
filter: drop-shadow(0 0 5px #035470);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Δείτε επίσης
-
συνάρτηση
blur,
που θολώνει το φόντο -
συνάρτηση
brightness,
που ορίζει τη φωτεινότητα του φόντου -
συνάρτηση
contrast,
που ορίζει την αντίθεση του φόντου -
συνάρτηση
hue-rotate,
που ορίζει την απόχρωση του φόντου -
συνάρτηση
invert,
που αντιστρέφει τα χρώματα του φόντου -
συνάρτηση
opacity,
που ορίζει τη διαφάνεια του φόντου -
συνάρτηση
sepia,
που μετατρέπει το φόντο σε σέπια -
ιδιότητα
background,
που αποτελεί συντόμευση για το φόντο -
ιδιότητα
background-image,
με την οποία μπορεί να οριστεί εικόνα φόντου σε ένα μπλοκ