Σκιά κουτιού μέσα. Εσωτερικές σκιές στο CSS. Ακτίνα τεντώματος σκιάς

Μπορείτε να προσθέσετε σκιά σε στοιχεία και να την αλλάξετε εμφάνισηχρησιμοποιώντας την ιδιότητα box-shadow CSS. Αυτό το στυλ σάς επιτρέπει να πραγματοποιείτε ενδιαφέροντα εφέ, για παράδειγμα, όγκο και τρισδιάστατο μπλοκ. Το ακίνητο υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Εξαιρούνται οι IE8 και Opera Mini.

ιδιότητα box-shadow: σύνταξη

Αυτό το στυλ είναι γραμμένο ως εξής:

Box-shadow: inset 4px 4px 8px 5px #333333;

Ας εξετάσουμε με τη σειρά τι είναι υπεύθυνη κάθε παράμετρος (από αριστερά προς τα δεξιά):

Λέξη-κλειδί inset: παράμετρος που δεν χρειάζεται να καθοριστεί. σχεδιάζει μια σκιά μέσαστοιχείο.
Χ μετατόπιση: Καθορίζει τον βαθμό στον οποίο η σκιά μετατοπίζεται οριζόντια σε σχέση με το στοιχείο. Μια θετική τιμή σημαίνει μετατόπιση προς τα δεξιά, αρνητική - προς τα αριστερά. Η τιμή 0 σημαίνει ότι η σκιά δεν μετατοπίζεται.
Y Shift: Καθορίζει το μέγεθος της κατακόρυφης μετατόπισης της σκιάς. Μια θετική τιμή σημαίνει μια μετατόπιση προς τα κάτω, μια αρνητική τιμή σημαίνει μια μετατόπιση προς τα πάνω. Η τιμή του 0 είναι μια σκιά χωρίς μετατόπιση.
Ακτίνα θολώματος: Αυτός είναι ο βαθμός θαμπώματος της σκιάς. Όσο μεγαλύτερη είναι η τιμή, τόσο πιο θολή η σκιά. Εάν η παράμετρος δεν έχει καθοριστεί, η προεπιλεγμένη τιμή είναι 0. Σε αυτή την περίπτωση, η σκιά θα είναι απολύτως καθαρή.
Επέκταση: προαιρετική παράμετρος υπεύθυνη για το τέντωμα της σκιάς κατά μήκος και των δύο αξόνων. όσο μεγαλύτερη είναι η τιμή, τόσο μεγαλύτερη είναι η έκταση. Η επέκταση λειτουργεί μόνο εάν υπάρχει η προηγούμενη παράμετρος. Η προεπιλεγμένη τιμή είναι 0.
Χρώμα σκιάς: όλα είναι ξεκάθαρα με αυτήν την παράμετρο - ορίζει το χρώμα της σκιάς του στοιχείου. Το προεπιλεγμένο χρώμα είναι μαύρο.

Σημείωση. Προγράμματα περιήγησης Androidκαι μεγαλύτερης ηλικίας εκδόσεις iPhoneΤο Safari απαιτεί το πρόθεμα -webkit- για να λειτουργήσει σωστά Ιδιότητες CSSκουτί-σκιά.

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

Box-shadow: 15px 15px 20px #8b0163, inset 15px 15px 20px #630046;

Παραδείγματα σκιάς κουτιού

Για να σας βοηθήσουμε να κατανοήσετε καλύτερα τη δύναμη και την ομορφιά της ιδιότητας box-shadow CSS, θα σας δείξουμε μερικά παραδείγματα που μπορείτε να εφαρμόσετε με ασφάλεια. Αυτή η ιδιότητα μπορεί να μεταμορφώσει πολύ ένα συνηθισμένο μπλοκ!

Ελαφριά σκιά

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Εφέ χαρτιού

Σκιά πλαισίου: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), ένθετο 0 0 40 px rgba(0, 0, 0, .1);

Πολλαπλές στρώσεις

Σκιά κουτιού: 6 εικονοστοιχεία 6 εικονοστοιχεία #cccc, 12 px 12 px #a3a3a3;

Τριπλό πλαίσιο

Σκιά πλαισίου: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0,6), 0 0 0 21px rgba(118, 46, 177, 0).

Γωνίες

Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Όπως μπορείτε να δείτε, η ιδιότητα box-shadow αφήνει πολύ χώρο στη φαντασία. Μπορείτε να μεταμορφώσετε τα μπλοκ όπως θέλετε - το κύριο πράγμα είναι να έχετε μια αίσθηση αναλογίας! 😉

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

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

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

Κλάση (πλαίσιο-σκιά: 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: inset 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.

Οι κανονικές σκιές είναι εύκολο να εφαρμοστούν χρησιμοποιώντας σκιά κουτιού ή σκιά κειμένου. Τι γίνεται όμως αν χρειαστεί να φτιάξετε εσωτερικές σκιές; Αυτό το άρθρο περιγράφει πώς να δημιουργήσετε αυτές τις σκιές με λίγες μόνο γραμμές κώδικα.

Σύνταξη

Αρχικά, ας δούμε τους δύο βασικούς τρόπους υλοποίησης των σκιών στο CSS.

κουτί-σκιά

Σχέδιο κουτί-σκιάπεριέχει πολλές διαφορετικές έννοιες:

Οριζόντια μετατόπισηΚαι κατακόρυφη μετατόπιση- οριζόντια και κατακόρυφη μετατόπιση, αντίστοιχα. Αυτές οι τιμές υποδεικνύουν ποια κατεύθυνση το αντικείμενο θα ρίξει τη σκιά του:

Ακτίνα θολώματοςΚαι ακτίνα εξάπλωσηςλίγο πιο περίπλοκο. Ποιά είναι η διαφορά? Ας δούμε ένα παράδειγμα με δύο στοιχεία, όπου οι τιμές ακτίνα θαμπώματοςδιαφέρω:

Η άκρη της σκιάς είναι απλά θολή. Με διαφορετικές αξίες ακτίνα εξάπλωσηςβλέπουμε τα εξής:

Σε αυτή την περίπτωση, βλέπουμε ότι η σκιά είναι διάσπαρτη σε μια μεγάλη περιοχή. Εάν δεν καθορίσετε μια τιμή ακτίνα θαμπώματοςΚαι ακτίνα εξάπλωσης, τότε θα είναι ίσα με 0.

κείμενο-σκιά

Η σύνταξη μοιάζει πολύ με κουτί-σκιά:

Οι έννοιες είναι παρόμοιες, αλλά όχι απλώνω-σκιά. Παράδειγμα χρήσης:

Ένθετο σε κουτί-σκιά

Για να "αναποδογυρίσετε" τη σκιά μέσα στο αντικείμενο, πρέπει να προσθέσετε ένθεσησε CSS:

Μόλις κατανοήσετε τη βασική σύνταξη κουτιού-σκιάς, είναι πολύ εύκολο να κατανοήσετε πώς να εφαρμόσετε τις εσωτερικές σκιές. Οι τιμές εξακολουθούν να είναι οι ίδιες, μπορείτε να προσθέσετε χρώμα (RGB σε hex):

Το χρώμα είναι σε μορφή RGB, η τιμή άλφα είναι υπεύθυνη για τη διαφάνεια της σκιάς:

Εικόνες με σκιές

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

Είναι λογικό να υποθέσουμε ότι μπορείτε να προσθέσετε μια σκιά όπως αυτή:

Img (πλαίσιο-σκιά: ένθετο 0px 0px 10px rgba(0,0,0,0,5); )

Αλλά η σκιά δεν φαίνεται:

Υπάρχουν διάφοροι τρόποι επίλυσης αυτού του προβλήματος, καθένας από τους οποίους έχει τα πλεονεκτήματα και τα μειονεκτήματά του. Ας δούμε δύο από αυτά. Το πρώτο είναι να τυλίξετε την εικόνα σε κανονικό div:

Div ( ύψος: 200 px, πλάτος: 400 px, box-shadow: inset 0px 0px 10px rgba(0,0,0,0,9); ) img ( ύψος: 200px, πλάτος: 400px, θέση: σχετική, z-index: -2 ;)

Όλα λειτουργούν, αλλά πρέπει να προσθέσετε λίγο επιπλέον Σήμανση HTMLκαι CSS. Ο δεύτερος τρόπος είναι να ορίσετε την εικόνα ως φόντο το επιθυμητό μπλοκ:

Div ( ύψος: 200 px, πλάτος: 400 px, φόντο: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0,9); )

Αυτό μπορεί να συμβεί όταν χρησιμοποιείτε εσωτερικές σκιές:

Εισαγωγή σε κείμενο-σκιά

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

Για επίλυση, εφαρμόστε πρώτα στην κεφαλίδα h1εγκαθιστώ σκούρο φόντοκαι μια ελαφριά σκιά:

H1 (χρώμα φόντου: #565656; χρώμα: διαφανές; κείμενο-σκιά: 0px 2px 3px rgba(255,255,255,0,5); )

Να τι συμβαίνει:

Προσθέτοντας ένα μυστικό συστατικό φόντο-κλιππου κόβει οτιδήποτε εκτείνεται πέρα από το κείμενο (σε σκούρο φόντο):

H1 (χρώμα φόντου: #565656; χρώμα: διαφανές; σκιά κειμένου: 0 εικονοστοιχεία 2 εικονοστοιχεία 3 εικονοστοιχεία rgba(255,255,255,0,5); -webkit-background-clip: κείμενο; -moz-background-clip: κείμενο; κλιπ φόντου: κείμενο ;)

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

Σήμερα θα μάθουμε πώς να φτιάχνουμε σκιές 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 40px rgba(0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; πλάτος:50%; ύψος:20%; μέγ. πλάτος: 300 εικονοστοιχεία; πλαίσιο-σκιά: 0 15 εικονοστοιχεία 10 εικονοστοιχεία rgba(0, 0, 0, 0.7); μετατροπή: περιστροφή (-3 μοίρες); ) .block:after ( δεξιά :10 εικονοστοιχεία; αριστερά: αυτόματη; μετατροπή: περιστροφή (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) ένθετο; περίγραμμα: 1 εικονοστοιχείο στερεό #efefef; ακτίνα περιγράμματος: 0 0 120 εικονοστοιχεία 120 εικονοστοιχεία / 0 0 6 εικονοστοιχεία 6 εικονοστοιχεία; ) .block:πριν, .block:after ( περιεχόμενο:"; θέση:απόλυτο ; δείκτης z:-2, κάτω: 12 εικονοστοιχεία, αριστερά: 10 εικονοστοιχεία, πλάτος: 50%, ύψος: 55%, μέγιστο πλάτος: 200 εικονοστοιχεία, πλαίσιο-σκιά: 0 8 εικονοστοιχεία 12 εικονοστοιχεία rgba(0, 0, 0, 0,5); transform:skew(-8deg) rotate(-3deg); ) .block:after (δεξιά:10px; αριστερά:auto; transform:skew(8deg) rotate(3deg); )

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

.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 (αριστερά:80px; bottom:5px ; πλάτος: 50%; ύψος: 35%, μέγ. πλάτος: 200 εικονοστοιχεία; πλαίσιο-σκιά: -80 εικονοστοιχεία 0 8 εικονοστοιχεία rgba(0, 0, 0, 0.4); μετασχηματισμός: λοξή (50 μοίρες), μετασχηματισμός-προέλευση: 0 100% ;) .block:after ( display:none; )

Σκιά 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 για ένα κατακόρυφα διπλωμένο μπλοκ. Δείτε παράδειγμα.

Παράδειγμα σκιάς 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) ένθετο; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ; αριστερά: 10 εικονοστοιχεία, δεξιά: 10 εικονοστοιχεία, πλαίσιο-σκιά: 0 0 15 εικονοστοιχεία rgba(0,0,0,0,6); ακτίνα περιγράμματος: 100 εικονοστοιχεία / 10 εικονοστοιχεία; )

Σκιά 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) inset; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-index:-1; top:0px; bottom:0; left:0; right:0px; 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; bottom:15px; left:10px; πλάτος:50% ; ύψος:20%; μέγ. πλάτος: 300 εικονοστοιχεία; πλαίσιο-σκιά: 0 15 εικονοστοιχεία 10 εικονοστοιχεία rgba(0, 0, 0, 0.7); μετατροπή: περιστροφή (-3 μοίρες); .block:after (δεξιά:10 εικονοστοιχεία, αριστερά: auto; transform:rotate(3deg); )

Το Block shadow είναι ένα εξαιρετικό τρισδιάστατο εφέ που δίνει ρεαλισμό και όγκο στα μπλοκ ιστότοπου. Όταν ξεκίνησα να μελετώ (πριν από περίπου 5-6 χρόνια), δεν είχα ιδέα για την ύπαρξη, και όταν δημιουργούσα ένα site έπρεπε να κάνω τη σκιά των μπλοκ εικόνα. Ήταν πολύ άβολο και δεν λειτούργησε πάντα όπως ήθελα. Χάρη στη δύναμη του CSS, που έχει διευκολύνει το έργο των σχεδιαστών ιστοσελίδων. Σήμερα θα σας δείξω πώς να δημιουργήσετε μια σκιά για μπλοκ στο CSS.

Για να προσθέσετε μια σκιά στο CSS, χρησιμοποιήστε την ιδιότητα κουτί-σκιά .

1. μετακινήστε τη σκιά οριζόντια (έως 100 εικονοστοιχεία προς τα δεξιά, έως και -100 εικονοστοιχεία προς τα αριστερά).
2. κατακόρυφη μετατόπιση (έως 100 εικονοστοιχεία προς τα κάτω, έως -100 εικονοστοιχεία προς τα πάνω).
3. θάμπωμα σκιάς (0 - καθαρή σκιά, 100 - πολύ θολή σκιά).
4. τέντωμα της σκιάς (έως 100px - τέντωμα, έως -100px - συμπίεση).
5. χρώμα σκιάς?
6. ένθετο - η σκιά είναι μέσα στο στοιχείο, χωρίς ένθετο η σκιά θα είναι προς τα έξω.

Box Shadow σε CSS

Όταν ξεκίνησα να μαθαίνω HTML (πριν από περίπου 5-6 χρόνια), δεν είχα ιδέα για την ύπαρξη CSS και όταν δημιουργούσα έναν ιστότοπο έπρεπε να κάνω τη σκιά των μπλοκ εικόνα.

Αποτέλεσμα :

Τραπέζι με σκιές:

κώδικας	Παράδειγμα:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
box-shadow: 7px 10px 23px -8px #92a9e7;

Χρησιμοποιώντας μια σκιά, μπορείτε να δημιουργήσετε ένα τρισδιάστατο μπλοκ:

Κώδικας	Παράδειγμα
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,2px), 3x1,6,3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(217,192,32), 5px 5px rgb 190, 30), 6px 6px RGB (187,162,2), 7px 6px RGB (214,189,29), 7px 7px RGB (186,161,1), 8px 7px RGB (213,188,28), 8px 8px RGB (185,160,0,0,0,0,0), 9px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6,2px, 3x1 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31,31,31,38px, -5 px, ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1(186,161,1(18,8,1,3) rgb ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3 -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px(1,69,rgb 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7x 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px(1,94,rgb) )
Box -Shadow: 1px -0px RGB (220,195,35), 1px -1px RGB (192,167,7), 2px -1px RGB (219,194,34), 2px -2px RGB (191,166,6), 3px -2px RGB (218,193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31,35px rgb(216,191,31,35px -61x5) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1 -27,1x1, 8px ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( πλάτος: 70%, μέγ. πλάτος: 550 εικονοστοιχεία, περιθώριο: 10 εικονοστοιχεία αυτόματη, συμπλήρωση: 1em, σκιά πλαισίου: 0 1 εικονοστοιχεία 4 εικονοστοιχεία rgba(0, 0, 0, .3), -23 εικονοστοιχεία 0 20 εικονοστοιχεία -23 εικονοστοιχεία rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) ένθετο;

Αποτέλεσμα :

Blok1 (πλάτος: 30%, μέγιστο πλάτος: 550 εικονοστοιχεία, περιθώριο: 2 εκατοστά αυτόματα, συμπλήρωση: 1 εκατ., φόντο: #DADADA; σκιά πλαισίου: 6 εικονοστοιχεία 6 εικονοστοιχεία #BBBBBB, 12 εικονοστοιχεία 12 εικονοστοιχεία #919191; )

Αποτέλεσμα :

Blok1 ( πλάτος: 30%; περιθώριο: 0 αυτόματο; γέμιση: 2em; πλαίσιο-σκιά: 0 0 0 1px #cccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px # -0 FFFF00, -20px 0 0 -10px #FF3399;)

Αποτέλεσμα :

Χρησιμοποιώντας μια σκιά μπορείτε να φτιάξετε ένα όμορφο πλαίσιο.

Όμορφο πλαίσιο που χρησιμοποιεί ιδιότητεςκουτί- σκιά

Blok1 (πλάτος: 20%, μέγ. πλάτος: 250 εικονοστοιχεία, περιθώριο: 0 αυτόματο, γέμιση: 1em, περίγραμμα: 2 εικονοστοιχεία διακεκομμένη #999, πλαίσιο-σκιά: 0 0 0 1 εικονοστοιχεία #999, ένθετο 0 0 0 1 εικονοστοιχείο #999; )

Αποτέλεσμα :

Blok1 (πλάτος: 30%, μέγ. πλάτος: 250 εικονοστοιχεία, περιθώριο: 2 εκ. αυτόματα, συμπλήρωση: 4 εκ.; φόντο: #dcc005; σκιά πλαισίου: 0 0 4 εκ. 4 εκ. #fff ένθετο; )

Αποτέλεσμα :

Blok1 ( μέγιστο πλάτος: 250 εικονοστοιχεία, περιθώριο: 0 αυτόματο, γέμιση: 1em, ακτίνα περιγράμματος: 10 εικονοστοιχεία, φόντο: rgb(100,100,100) ακτινική διαβάθμιση (κύκλος στο 0 0, rgba(255,255,255,5,5,5,5,2 rgba), 255,25,5,5,5 rgba .35)); box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;)

Αποτέλεσμα :

Box Shadow σε CSS

δικτυακός τόπος

Αποτέλεσμα :

Αυτοί είναι αυτοί όμορφα εφέμπορεί να επιτευχθεί χρησιμοποιώντας σκιές στο CSS. Επινοήστε κάτι νέο και πρωτότυπο, όλα είναι στα χέρια σας. Έχετε τις γνώσεις και τις δυνατότητες.
Και μια από αυτές τις μέρες θα δημοσιεύσω ένα άρθρο για το πώς μπορείτε να δημιουργήσετε χωρίς να χρησιμοποιήσετε το Photoshop. Έτσι, να είστε στο επίκεντρο των πραγμάτων και να εγγραφείτε στις ενημερώσεις του ιστολογίου μου. Μην χάσετε ένα θέμα που σας ενδιαφέρει. Λοιπόν, αυτό είναι, καλή επιτυχία!!!