Η ιδιότητα CSS box-shadow σάς επιτρέπει να ορίσετε μια σκιά στοιχείο html. Χρησιμοποιείται αρκετά συχνά από τους σχεδιαστές ιστοτόπων για να διακοσμήσουν και να τονίσουν με κάποιο τρόπο τα πλαίσια με κείμενο, εικόνες και να κάνουν το περιεχόμενο πιο ευανάγνωστο.

CSS πλαίσιο-σκιά σύνταξη

... κουτί-σκιά : X Y R1 R2 χρώμα ; ...

• X - μετατόπιση κατά μήκος του άξονα Χ (οριζόντια)
• Y - μετατόπιση κατά μήκος του άξονα Y (κάθετη)
• R1 - θόλωση (όσο υψηλότερη είναι η τιμή, τόσο πιο ομαλή είναι η μετάβαση)
• R2 - ακτίνα επέκτασης (αν είναι θετική, τεντώνεται, αρνητική, συμπιέζει)
• χρώμα - χρώμα (μπορεί να καθοριστεί σε οποιαδήποτε μορφή: #RGB, όνομα χρώματος)
• inset - εάν υπάρχει αυτή η τιμή, η σκιά θα βρίσκεται μέσα στο μπλοκ (στοιχείο)

Παράδειγμα 1. Πλαίσιο HTML με πλαίσιο-σκιά χωρίς μετατόπιση

Παρακάτω είναι ο απλούστερος τρόπος χρήσης μιας σκιάς με ενεργοποιημένη την ιδιότητα box-shadow CSS σελίδα htmlόταν ρέει ομοιόμορφα γύρω από ολόκληρο το πλαίσιο χωρίς μετατόπιση.

Пример №1. Рамка с тенью

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

Пример №2. Рамка со смещенной тенью

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

Пример №3. Свечение

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

Пример №4. Внутреннее свечение

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

Пример №5. Совмещение теней

На странице преобразуется в следующее

Пример №5. Совмещение теней

Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

• -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
• -moz-box-shadow - для Firefox до версии 4.0

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

1. ключевое слово inset устанавливает тень внутри элемента;
2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
3. сдвиг по вертикали (5px - вниз, -5px - вверх);
4. радиус размытия тени (0 - резкая тень);
5. растяжение тени (5px - растяжение, -5px - сжатие);
6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени

Код	Результат	Описание
box-shadow: 5px 5px;		Резкая тень справа и снизу.
box-shadow: -5px -5px;		Резкая тень слева и сверху.
box-shadow: 0 0 5px;		Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px;		Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red;		Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);		Полупрозрачная тень.
box-shadow: inset 0 0 6px;		Тень внутри.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

αυτή είναι η διαχείριση της αλλαγής.

Sun Tzu, μετάφρ. Νικολάι Κόνραντ

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2. Η σκιά ακολουθεί τη στρογγυλοποίηση των γωνιών του μπλοκ.

Ρύζι. 2. Εμφάνιση σκιάς στην εικόνα φόντου

Όταν προσθέτετε μια "ευρεία" σκιά, έχετε υπόψη σας ότι μπορεί να εκτείνεται πέρα ​​από τα ορατά όρια του παραθύρου του προγράμματος περιήγησης και έτσι να έχει ως αποτέλεσμα την εμφάνιση μιας οριζόντιας γραμμής κύλισης.

Οι σκιές μπορούν επίσης να προστεθούν σε ψευδοστοιχεία, αυτό μερικές φορές απαιτείται για πολύπλοκες διατάξεις. Στο Σχ. Το σχήμα 3 δείχνει ένα μπλοκ κεφαλίδας με μια σκιά που έχει προστεθεί σε αυτό. Για να αποφύγετε τυχόν γραμμές στη διασταύρωση, πρέπει να χρησιμοποιήσετε το ψευδοστοιχείο ::after και να προσθέσετε μια σκιά σε αυτό.

Ρύζι. 3. Μπλοκ με σκιά

Το Παράδειγμα 2 δείχνει τη δημιουργία ενός τέτοιου μπλοκ.

Επικεφαλίδα

Ρύζι. 3. Μπλοκ με σκιά

Το Παράδειγμα 2 δείχνει τη δημιουργία ενός τέτοιου μπλοκ.

Ένα στοιχείο μπορεί να έχει περισσότερες από μία σκιές, αλλά πολλές παράμετροι ταυτόχρονα παρατίθενται διαχωρισμένες με κόμματα στην τιμή της ιδιότητας box-shadow. Το Παράδειγμα 3 δείχνει πώς να προσθέσετε μια διπλή σκιά σε όλες τις εικόνες.

Εικών

Η πρώτη σκιά εμφανίζεται στα αριστερά της εικόνας με ακτίνα θολώματος 20 εικονοστοιχείων, το μέγεθός της μειώνεται κατά την τέταρτη παράμετρο (-20 εικονοστοιχεία). Οι παράμετροι της δεύτερης σκιάς υποδεικνύονται μετά την υποδιαστολή, η σκιά εμφανίζεται στα δεξιά της εικόνας και μειώνεται επίσης για συμμετρία.

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

Το κύριο πλεονέκτημα των σκιών που δημιουργούνται με χρήση CSS3 είναι η ευκολία υλοποίησης και η μείωση του αριθμού των αιτημάτων προς τον διακομιστή (αφού δεν χρησιμοποιούμε πλέον εικόνες). Για να δημιουργήσουμε μια σκιά CSS χρειαζόμαστε μια ετικέτα div και μια ιδιότητα CSS box-shadow. Δεν θα χρειαστείτε επιπλέον σήμανση επειδή θα δημιουργήσουμε στοιχεία :after και :before που θα τοποθετήσουμε πίσω από το κύριο αντικείμενο (ένα div με την κλάση φραγμός).

Ρίξτε μια ματιά στον κώδικα HTML για τον οποίο θα δημιουργήσουμε μια σκιά CSS3:

Στη συνέχεια μπορείτε να δείτε έτοιμα παραδείγματακαι τον κώδικα που απαιτείται για την εφαρμογή τους. Για να ελαχιστοποιήσουμε το κείμενο στη σελίδα, θα παραλείψουμε Ιδιότητες CSSμε προθέματα προγράμματος περιήγησης. Πλήρης κωδικόςΜπορείτε να το δείτε κάνοντας κλικ στον σύνδεσμο «Παράδειγμα» που αντιστοιχεί στο παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40 px rgba(0, 0, 0, 0.1) inset ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; πλάτος:50%; box-shadow:0 10px rgba(0, 0, 0.7);

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; z-index:-2px:55% box-shadow:0 12px rgba(0,0, 0.5) μετά (δεξιά: 10 εικονοστοιχεία; αριστερά: αυτόματη; μετατροπή: λοξή (8 μοίρες) περιστροφή (3 μοίρες); )

Χρησιμοποιώντας μια σκιά μπορείτε να δώσετε μια προοπτική μπλοκ. Δείτε παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ένθετο; πλάτος:50%; max-width:-80px rgba(0, 0, 0.4) .

Σκιά CSS για το ανυψωμένο μπλοκ. Δείτε παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) ένθετο πλαίσιο-σκιά: 0 15 εικονοστοιχεία 10 εικονοστοιχεία -10 εικονοστοιχεία rgba(0, 0, 0, 0,5), 0 1 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0, 0, 0,3), 0 0 40 εικονοστοιχεία (rgba) , 0, 0, 0,1) ένθετο ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )

Παράδειγμα σκιάς CSS3 για ένα κατακόρυφα διπλωμένο μπλοκ. Δείτε παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ένθετο; ; αριστερά: 50% κουτί-σκιά: 0 15px rgba(0,0,0,0,6) ;

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ένθετο; αριστερό: 0, κουτί-σκιά: 0 15px rgba(0,0,0,6) ;

Παράδειγμα σκιάς CSS3 για ένα οριζόντια διπλωμένο μπλοκ. Δείτε παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ένθετο; 0px:10px box-shadow:0 15px rgba(0,0,0,0.6);

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) ένθετο ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px; αριστερά:10px:10px rgba(0,0,0,6px);

Σκιά CSS3 για περιστρεφόμενο μπλοκ. Δείτε παράδειγμα.

.block ( position:relative; πλάτος:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40 px rgba(0, 0, 0, 0.1) box-shadow:none transform:rotate(-3deg .block) -Δείκτης:-1; δεξιά: 0πχ :before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; πλάτος:50% ; ύψος:20%; max-width:300px; box- shadow:0 15px rgba(0, 0, 0, 0.7);

Η σειρά εγγραφής είναι θεμελιωδώς σημαντική. Η πρώτη τιμή είναι πάντα η μετατόπιση κατά μήκος του άξονα Χ, η δεύτερη - κατά μήκος του άξονα Υ.

Εάν δεν απαιτείται μετατόπιση κατά μήκος ενός από τους άξονες, ρυθμίστε το στο μηδέν:

Κλάση (πλαίσιο-σκιά: 0 8 εικονοστοιχεία;) – μετατόπιση της σκιάς μόνο κατά μήκος του άξονα Υ

Αποτέλεσμα

Τάξη (πλαίσιο-σκιά: 8 px 8 px;) – μετατόπιση κατά μήκος και των δύο αξόνων

Αποτέλεσμα

Αρνητική τιμή για άξονες κουτιού-σκιάς

Η σκιά θα κινηθεί προς την αντίθετη κατεύθυνση:

Κλάση (πλαίσιο-σκιά: -8 px 8 px;) – μετατόπιση της σκιάς με μια αρνητική τιμή κατά μήκος του άξονα X

Αποτέλεσμα

Ακτίνα θολώματος σκιάς

Τρίτη παράμετρος ιδιότητας κουτί-σκιά. Εάν δεν καθορίζεται, η τιμή είναι 0 και το μέγεθος της σκιάς είναι ίσο με το μέγεθος του στοιχείου στο οποίο εφαρμόζεται.

Class(box-shadow: 0 48px 0;) – η σκιά αντιγράφει τις διαστάσεις του στοιχείου στο οποίο εφαρμόζεται

Αποτέλεσμα

Όταν η τιμή είναι μεγαλύτερη από το μηδέν, οι άκρες χάνουν τον ορισμό, η σκιά γίνεται μεγαλύτερη και οπτικά πιο ανοιχτή. Το Blur εφαρμόζεται από όλες τις πλευρές:

Κλάση (πλαίσιο-σκιά: 0 0 8 εικονοστοιχεία;) – χωρίς μετατόπιση, μόνο θάμπωμα

Αποτέλεσμα

Κλάση (πλαίσιο-σκιά: 0 8 εικονοστοιχεία 8 εικονοστοιχεία;) – μετατόπιση και θόλωση του άξονα Υ

Αποτέλεσμα

Μια αρνητική τιμή θεωρείται σφάλμα και η σκιά δεν θα εμφανιστεί καθόλου.

Ακτίνα τεντώματος σκιάς

Τέταρτη παράμετρος ιδιότητας κουτί-σκιά. Αλλάζει το μέγεθος της σκιάς σε σχέση με το στοιχείο. Τεντώνεται προς όλες τις κατευθύνσεις:

Κατηγορία (πλαίσιο-σκιά: 0 0 0 8 εικονοστοιχεία;) – χωρίς μετατόπιση ή θαμπάδα, μόνο τέντωμα

Αποτέλεσμα

Σε αυτήν την περίπτωση, η σκιά είναι 16 εικονοστοιχεία μεγαλύτερη από το στοιχείο σε πλάτος και ύψος: 8 εικονοστοιχεία αριστερά + 8 εικονοστοιχεία δεξιά και 8 εικονοστοιχεία επάνω + 8 εικονοστοιχεία κάτω.

Αρνητική τιμή σκιάς στο CSS

Η σκιά δεν τεντώνεται, αλλά στενεύει από όλες τις πλευρές κατά την καθορισμένη τιμή:

Κατηγορία(box-shadow: 0 16px 0 -8px;) – μειώστε τη σκιά με αρνητική τιμή

Αποτέλεσμα

Χρώμα σκιάς

Από προεπιλογή, το χρώμα της σκιάς αντιγράφει το χρώμα της γραμματοσειράς: όπως στα παραπάνω παραδείγματα.

Το χρώμα της σκιάς καθορίζεται σε οποιαδήποτε διαθέσιμη μορφή CSS:

• #ff0009
• rgb(255, 0, 9)
• hsl(358, 100%, 50%);

Δώστε στο στοιχείο μια μπλε σκιά:

Τάξη(πλαίσιο-σκιά: 0 8px #3a8fe7;)

Αποτέλεσμα

Εσωτερική σκιά

Παράμετρος ένθεσηεμφανίζει μια σκιά μέσα στο μπλοκ.

Σε αντίθεση με τις επιλογές που αναφέρονται παραπάνω, δεν υπάρχει αυστηρή σειρά γραφής. Και οι δύο επιλογές θα δώσουν το ίδιο αποτέλεσμα:

Box-shadow: 0 8px #3a8fe7 ένθετο; box-shadow: ένθετο 0 8px #3a8fe7;

Αποτέλεσμα

Η δεύτερη επιλογή είναι πιο κατανοητή κατά την ανάγνωση του κώδικα.

Αρκετές σκιές

Πολλαπλές σκιές καθορίζονται χωρισμένες με κόμμα. Εμφάνιση σειράς από πάνω προς τα κάτω:

Κατηγορία (πλαίσιο-σκιά: 0 8px #3a8fe7, 0 16px #3ae7af; )

Αποτέλεσμα

Εάν αλλάξετε θέση, η μπλε σκιά δεν θα είναι ορατή:

Τάξη (πλαίσιο-σκιά: 0 16 εικονοστοιχεία #3ae7af, 0 8 εικονοστοιχεία #3a8fe7; )

Αποτέλεσμα

Η εσωτερική και η εξωτερική σκιά ρυθμίζονται ταυτόχρονα:

Κατηγορία (πλαίσιο-σκιά: 0 16px #3ae7af, ένθετο 0 8px #3a8fe7; )

Αποτέλεσμα

Στρογγυλεμένη σκιά

Αν σε ένα στοιχείο δοθεί η ιδιότητα συνοριακή ακτίνα, η σκιά θα έχει στρογγυλεμένες γωνίες.

Κλάση (πλαίσιο-σκιά: 0 16 εικονοστοιχεία #3a8fe7; ακτίνα περιγράμματος: 8 εικονοστοιχεία; )

Αποτέλεσμα

Ρυθμίζοντας το τέντωμα σκιάς αυξάνουμε και τη στρογγυλοποίησή του. Για παράδειγμα, η ακτίνα περιγράμματος είναι 8 εικονοστοιχεία και η έκταση σκιάς είναι 4.

8+4=12px είναι η ακτίνα στρογγυλοποίησης της σκιάς.

Κλάση (πλαίσιο-σκιά: 0 16 εικονοστοιχεία 0 4 εικονοστοιχεία #3a8fe7; ακτίνα περιγράμματος: 8 εικονοστοιχεία; )

Αποτέλεσμα

Η ίδια αρχή ισχύει για τη συρρίκνωση της σκιάς όταν η τιμή είναι αρνητική.

8+(-4)=4px - έχουμε μια σκιά στρογγυλοποίηση που είναι δύο φορές μικρότερη.

Εάν η συμπίεση της σκιάς είναι μεγαλύτερη από την ακτίνα περιγράμματος, θα έχουμε μια σκιά με ορθές γωνίες. Για παράδειγμα, η συμπίεση είναι 16 px.

8+(-16)=(-8), αλλά το φιλέτο δεν μπορεί να έχει αρνητική τιμή και θα εφαρμοστεί το μηδέν.

Κλάση (πλαίσιο-σκιά: 0 24 εικονοστοιχεία 0 -16 εικονοστοιχεία #3a8fe7; ακτίνα περιγράμματος: 8 εικονοστοιχεία; )

Αποτέλεσμα

Ιδιότητα CSS κουτί-σκιάΥποστηρίζεται από όλα τα δημοφιλή προγράμματα περιήγησης εκτός από το Opera Mini.

Κριτικές