3,5 στα 5

Πιστεύετε ότι είναι δυνατό με μερικές ετικέτες και καθαρό CSSνα φτιάξω ένα κλιμακούμενο τρίγωνο; Τι γίνεται με το πεντάγωνο; Μα τέτοιο αστέρι; Νομίζω ότι πολλοί άνθρωποι πιστεύουν ότι όχι. Στην πραγματικότητα είναι δυνατό.

Έτσι, σήμερα έχουμε ένα μεταπείραμα. Θα παίξουμε με τη γνωστή ιδιότητα CSS - περίγραμμα (και όλα όσα σχετίζονται με αυτήν). Κατά τη διάρκεια του πειράματος θα δούμε πώς να φτιάξουμε μερικά απλά πολύγωνα, ένα αστέρι και θα δούμε μια περίπτωση όπου αυτές οι τεχνικές μπορούν να χρησιμοποιηθούν στην πράξη. Πηγαίνω!

Απλά γεωμετρικά σχήματα

Ας ξεκινήσουμε λοιπόν με απλά παραδείγματα. Ξέρετε πώς να σχεδιάσετε ένα τρίγωνο; χρησιμοποιώντας HTMLκαι CSS; Και κάπως έτσι:

HTML

CSS

.trapezoid (κατακόρυφη στοίχιση: κείμενο-κάτω; )

Τραπεζοειδές,
.polygon ( οθόνη: -moz-inline-block; )

Πολύγωνο,
.trapezoid ( περιθώριο:0; padding: 0; background: none; )

Πολύγωνο (πλάτος: 10 εκ., ύψος: 10 εκ., περίγραμμα: κανένα, οθόνη: ενσωματωμένο μπλοκ, στοίχιση κειμένου: κέντρο; )
.τραπεζοειδής (
οθόνη: inline-block; πλάτος: 1px; ύψος: 0; περιθώριο: 0 αυτόματο;
περίγραμμα-αριστερά: 5em συμπαγές διαφανές. περίγραμμα-δεξιά: 5em συμπαγές διαφανές.
}

Πολύγωνο .aa ( περίγραμμα-κάτω: 10em συμπαγές, περίγραμμα-πάνω: κανένα; )

Polygon.r2 (ύψος: 0em; )

Polygon.r3 (ύψος: 8,66em; )
.polygon.r3 .trapezoid (πλάτος περιγράμματος: 8,66em 5em; )

div.eg (πλάτος: 10em; φόντο: #FFF; περιθώριο: 0 0; padding: 1em; )
div.eg .polygon ( οθόνη: μπλοκ; περιθώριο: 0 αυτόματο; )

R3 (χρώμα: κόκκινο, μέγεθος γραμματοσειράς: 0,5em; )

Αστέρι

HTML

Αστέρι

CSS

#αστέρι(
πλάτος: 15em;
ύψος: 14,27 εκ.
θέση: σχετική;
}

#διάστημα αστεριών,
#αστέρι(
οθόνη: μπλοκ;
}

#μπλουζα(
πλάτος: 0;
ύψος: 0;
περιθώριο: αυτόματο;
περίγραμμα-δεξιά: 4,64em στερεό διαφανές;
περίγραμμα-αριστερά: 4,64em στερεό διαφανές;
περίγραμμα-κάτω: 14,27em στερεό;
}

#κέντρο(
πλάτος: 5,7em;
περίγραμμα-δεξιά: 4,65em στερεό διαφανές;
περίγραμμα-αριστερά: 4,65em στερεό διαφανές.
περίγραμμα κορυφής: 3,36em στερεό;
ύψος: 0;
θέση: απόλυτη;
κορυφή: 5,46 εκ.
αριστερά: 0;
z-index: 100;
text-align: κέντρο;
}

#κάτω μέρος(
θέση: απόλυτη;
κάτω: 0;
αριστερά: 2.852 εκ.
περίγραμμα-δεξιά: 4.635em στερεό διαφανές.
περίγραμμα-αριστερά: 4.635em στερεό διαφανές.
περίγραμμα-κάτω: 3,4em στερεό #fff;
πλάτος: 0;
ύψος: 0;
}

#κεντρικό εύρος(
margin-top: -2em;
χρώμα: #000;
βάρος γραμματοσειράς: έντονη;
}

a#star:hover #center span(
χρώμα: #fff;
Χρώμα φόντου: διαφανές.
}

ένα αστέρι(
χρώμα: #f90;
Χρώμα φόντου: διαφανές.
}
a#star:hover(
χρώμα: #fc3;
Χρώμα φόντου: διαφανές.
}

Μερικά ακόμη παραδείγματα

• Χριστουγεννιάτικο δέντρο και ασυνήθιστη διάταξη από τον Eric Meyer.
• Πλακάκια και μενού από τον επικεφαλής τεχνολόγο της Τεχνοκρατίας.

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

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

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

Σε αυτό το παράδειγμα, κάθε πλευρά του μπλοκ έχει διαφορετικό πάχος περιγράμματος, στυλ και χρώμα.

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

Οι τιμές περιγράμματος - πάχος, στυλ και χρώμα - μπορούν να ρυθμιστούν ξεχωριστά χρησιμοποιώντας ειδικές ιδιότητες.

• σύνορα - στυλ περιγράμματος.
• περίγραμμα-πλάτος - πλάτος περιγράμματος.
• χρώμα περιγράμματος - χρώμα περιγράμματος.

Ας εξετάσουμε κάθε μία από τις τιμές ξεχωριστά.

ιδιοκτησία συνόρων Στυλ συνόρων.

Η ιδιότητα τύπου border ορίζει το στυλ του περιγράμματος. Σε CSS, σε Διαφορές HTML, το περίγραμμα ενός στοιχείου μπορεί να είναι όχι μόνο συμπαγές. Οι ακόλουθες τιμές επιτρέπονται για το στυλ περιγράμματος:

1. κανένα - κανένα περίγραμμα (προεπιλογή).
2. συμπαγές - συμπαγές περίγραμμα.
3. διπλό - διπλό περίγραμμα.
4. διακεκομμένο - διάστικτο περίγραμμα.
5. διακεκομμένο - ένα περίγραμμα από μια σειρά κουκκίδων.
6. κορυφογραμμή - σύνορο "ράχη".
7. αυλάκι - περίγραμμα "αυλάκι".
8. ένθετο - πιεσμένο περίγραμμα.
9. αρχή - εξωθημένο περίγραμμα.

Παραδείγματα για το πώς μοιάζουν.

χωρίς σύνορα (κανένα)

συμπαγές περίγραμμα

διπλό περίγραμμα

περίγραμμα μιας σειράς κουκκίδων (στικτή)

διακεκομμένο περίγραμμα

αυλάκι περίγραμμα

σύνορο κορυφογραμμής

εσοχή περιγράμματος (ένθετο)

εξωθημένο περίγραμμα (αρχή)

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

Ένα μπλοκ div με μαύρο περίγραμμα και στυλ κορυφογραμμής.

Το πλαίσιο φαίνεται συμπαγές, αλλά αυτό συμβαίνει επειδή το στυλ κορυφογραμμής δημιουργείται προσθέτοντας ένα εφέ μαύρης σκιάς και το μαύρο εφέ δεν είναι ορατό σε μαύρο πλαίσιο.

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

Μία τιμή (συμπαγής) - το στυλ περιγράμματος ορίζεται για όλες τις πλευρές του μπλοκ.

Δύο τιμές (συμπαγές διπλό) - η πρώτη τιμή ορίζει το στυλ για την επάνω και την κάτω πλευρά, η δεύτερη για την πλευρά.

Τρεις τιμές (συμπαγή διπλή διάστικτη) - η πρώτη τιμή για την επάνω πλευρά, η δεύτερη για τις πλευρές, η τρίτη για την κάτω πλευρά.

Τέσσερις τιμές (συμπαγή διπλή διακεκομμένη διακεκομμένη) - κάθε τιμή για τη μία πλευρά δεξιόστροφα ξεκινώντας από την κορυφή.

Η ιδιότητα πλάτους συνόρων. Πάχος περιγράμματος.

Για να ορίσετε το πλάτος του περιγράμματος ενός στοιχείου, χρησιμοποιήστε την ιδιότητα border-width. Το πάχος του περιγράμματος μπορεί να καθοριστεί σε οποιεσδήποτε απόλυτες μονάδες μέτρησης, για παράδειγμα σε pixel.

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

Παράδειγμα κώδικα:

Επίσης για την ιδιότητα πλάτους περιγράμματος υπάρχουν τιμές στη φόρμα λέξεις-κλειδιά. Υπάρχουν τρία συνολικά:

• λεπτό - λεπτό περίγραμμα?
• μεσαίο - μέσο πάχος.
• παχύ - χοντρό περίγραμμα?

Πάχος περιγράμματος: λεπτό.

Πάχος περιγράμματος: μέτριο.

Πάχος περιγράμματος: παχύ.

Η ιδιότητα χρώματος περιγράμματος. Χρώμα πλαισίου.

Για να ελέγξετε το χρώμα περιγράμματος, χρησιμοποιήστε το εργαλείο χρώματος περιγράμματος. Τα χρώματα για αυτήν την ιδιότητα μπορούν να οριστούν χρησιμοποιώντας οποιαδήποτε μέθοδο που περιγράφεται στο άρθρο "Χρώματα στο CSS", και συγκεκριμένα:

• Δεκαεξαδικός συμβολισμός (#ff00aa) του χρώματος.
• Μορφή RGB- rgb(255,12,110) . Μορφή RGBA για CSS3.
• Μορφές HSLκαι HSLA για CSS3.
• Όνομα χρώματος, για παράδειγμα μαύρο. Πλήρης λίσταΤα ονόματα χρωμάτων δίνονται στον πίνακα ονομάτων χρωμάτων CSS.

Η ιδιότητα χρώματος περιγράμματος μπορεί επίσης να έχει μία έως τέσσερις τιμές και να τις αντιμετωπίζει παρόμοια με τις προηγούμενες ιδιότητες.

Μία τιμή (κόκκινο).

Δύο τιμές (κόκκινο μαύρο).

Τρεις τιμές (κόκκινο μαύρο κίτρινο).

Τέσσερις τιμές (κόκκινο μαύρο κίτρινο μπλε).

Τώρα ας επιστρέψουμε στο πρόβλημα που αναφέρθηκε παραπάνω και ας σχεδιάσουμε ένα σχήμα:

Εδώ είναι ο κώδικας που σχεδιάζει ένα τέτοιο σχήμα, μόνο μεγαλύτερο σε μέγεθος:

Ρύθμιση τιμών για τις πλευρές ξεχωριστά

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

• σύνορα-κορυφή
• σύνορα-δεξιά
• σύνορο-κάτω
• περίγραμμα-αριστερά (αριστερό περίγραμμα)

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

Επιλογές επάνω περιγράμματος (border-top).

• border-top-color - ορίζει το χρώμα του επάνω περιγράμματος του στοιχείου.
• border-top-width - ορίζει το πάχος του άνω περιγράμματος του στοιχείου.
• border-top-style - ορίζει το στυλ του επάνω περιγράμματος του στοιχείου.

Επιλογές δεξιού περιγράμματος (περίγραμμα-δεξιά).

• περίγραμμα-δεξιά-χρώμα - ορίζει το χρώμα του δεξιού περιγράμματος του στοιχείου.
• border-right-width - ορίζει το πάχος του δεξιού περιγράμματος του στοιχείου.
• border-right-style - ορίζει το στυλ του δεξιού περιγράμματος του στοιχείου.

Επιλογές κάτω περιγράμματος (περίγραμμα-κάτω).

• border-bottom-color - ορίζει το χρώμα του κάτω περιγράμματος του στοιχείου.
• border-bottom-width - ορίζει το πάχος του κάτω περιγράμματος του στοιχείου.
• border-bottom-style - ορίζει το στυλ του κάτω περιγράμματος του στοιχείου.

Επιλογές αριστερού περιγράμματος (περίγραμμα-αριστερά).

• border-left-color - ορίζει το χρώμα του αριστερού περιγράμματος του στοιχείου.
• border-left-width - ορίζει το πάχος του αριστερού περιγράμματος του στοιχείου.
• border-left-style - ορίζει το στυλ του αριστερού περιγράμματος του στοιχείου.

Ένα παράδειγμα χρήσης αυτών των ιδιοτήτων:

Η ιδιότητα της ακτίνας συνόρων. Στρογγυλεμένες γωνίες περιγράμματος.

Η ιδιότητα border-radius προορίζεται να στρογγυλοποιεί τις γωνίες των περιγραμμάτων ενός στοιχείου. Αυτή η ιδιότητα εμφανίστηκε στο CSS3 και λειτουργεί σωστά σε όλα σύγχρονα προγράμματα περιήγησης, με την εξαίρεση του Internet Explorer 8 (και παλαιότερες εκδόσεις).

Οι τιμές μπορούν να είναι οποιοιδήποτε αριθμοί που χρησιμοποιούνται στο CSS.

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

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

Περίγραμμα-πάνω-αριστερά-ακτίνα: 15px; περίγραμμα-πάνω-δεξιά-ακτίνα: 0; περίγραμμα-κάτω-δεξιά-ακτίνα: 15 εικονοστοιχεία; περίγραμμα-κάτω-αριστερά-ακτίνα: 0;

Ιδιότητα ακτίνας περιγράμματος: 15 εικονοστοιχεία.

Παρόλο που αυτός ο κωδικός μπορεί να γραφτεί σε μία δήλωση: border-radius : 15px 0 15px 0 . Το γεγονός είναι ότι η ιδιότητα border-radius μπορεί να οριστεί από μία έως τέσσερις τιμές. Ο παρακάτω πίνακας περιγράφει τους κανόνες που διέπουν τέτοιες ανακοινώσεις.

Έχοντας μελετήσει προσεκτικά αυτόν τον πίνακα, μπορείτε να καταλάβετε ότι η συντομότερη καταχώρηση για το επιθυμητό στυλ θα είναι ως εξής: περίγραμμα-ακτίνα : 15px 0 . Υπάρχουν μόνο δύο έννοιες.

Λίγη εξάσκηση

Σχεδιάζοντας ένα λεμόνι χρησιμοποιώντας CSS.

Εδώ είναι ο κώδικας για ένα τέτοιο μπλοκ:

Περιθώριο: 0 αυτόματο; /* Κεντράρετε το μπλοκ */ πλάτος: 200 px; ύψος: 200 px; φόντο: #F5F240; περίγραμμα: 1px στερεό #F0D900; περίγραμμα-ακτίνα: 10px 150px 30px 150px;

Έχουμε ήδη σχεδιάσει το σχήμα:

Τώρα ας αφήσουμε ένα τρίγωνο από αυτό:

Ο κωδικός του τριγώνου είναι:

Περιθώριο: 0 αυτόματο; /* Τοποθετήστε το μπλοκ στο κέντρο */ padding: 0px; πλάτος: 0px; ύψος: 0; περίγραμμα: 30 px συμπαγές λευκό. χρώμα-κάτω περιγράμματος: κόκκινο;

Φυσικά, μπορείτε να δημιουργήσετε ομορφιά στο Photoshop, αλλά τι γίνεται αν χρειαστεί να αποθηκεύσετε το κείμενο και να μην το επικολλήσετε με μια όμορφη εικόνα;

Για παράδειγμα, για καλύτερη ευρετηρίαση, ήθελα να κάνω το κείμενο του τίτλου σε ετικέτες

. Αλλά ταυτόχρονα διατηρήστε την ομορφιά. Σαν αυτό:

Λοιπόν, ας φτιάξουμε λίγο κείμενο με σκιά χρησιμοποιώντας CSS:

Το επίπεδο 3 CSS έχει την ιδιότητα "text-shadow" για να προσθέτει μια σκιά σε κάθε γράμμα οποιουδήποτε κειμένου.

1. Απλούστερη μορφή: h3 (κείμενο-σκιά: 0,1em 0,1em #333)
2. Θολές σκιές κειμένου: h3.b (κείμενο-σκιά: 0,1em 0,1em 0,2em μαύρο)
3. Ευανάγνωστο λευκό κείμενο: h3.a (χρώμα: λευκό, κείμενο-σκιά: μαύρο 0,1em 0,1em 0,2em)
4. Πολυεπίπεδες σκιές: h3 (κείμενο-σκιά: 0.2em 0.5em 0.1em #600, -0,3em 0,1em 0,1em #060, 0,4 εκ. -0,3 εκ. 0,1 εκ. #006)
5. Σχεδιάζοντας γράμματα και περιγράμματα: h3 (κείμενο-σκιά: -1px 0 μαύρο, 0 1px μαύρο, 1px 0 μαύρο, 0 -1px μαύρο)
6. Λάμψη νέον: h3.a (κείμενο-σκιά: 0 0 0.2em #8F7) h3.b (κείμενο-σκιά: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (κείμενο-σκιά: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Ένα άλλο ενδιαφέρον παράδειγμα:

Περίγραμμα κειμένου με CSS

Εγκεφαλικό κείμενο με χρησιμοποιώντας CSSΕίναι δυνατό να το κάνετε αυτό χωρίς να καταφύγετε σε σενάρια. Αυτό το εφέ μπορεί να δημιουργηθεί χρησιμοποιώντας την ιδιότητα text-shadow. Παρόλο που η IE δεν αποδέχεται αυτήν την ιδιότητα σε καμία από τις εκδόσεις της - στις άλλες δημοφιλή προγράμματα περιήγησηςΗ συνταγή που περιγράφεται θα λειτουργήσει υπέροχα.

Σκεφτείτε τον παρακάτω κώδικα:

Παράδειγμα Νο. 1

H1(κείμενο-σκιά: κόκκινο 1px 0px, κόκκινο 1px 1px, κόκκινο 0px 1px, κόκκινο -1px 1px, κόκκινο -1px 0px, κόκκινο -1px -1px, κόκκινο 0px -1px, κόκκινο 1px -1px;)

Η πρώτη παράμετρος της ιδιότητας text-shadow ορίζει το χρώμα της σκιάς, η δεύτερη την οριζόντια μετατόπιση της σκιάς σε σχέση με το κείμενο, η τρίτη την κατακόρυφη μετατόπιση. Όταν καθορίζετε μια μετατόπιση σκιάς προς όλες τις κατευθύνσεις γύρω από το κείμενο κατά 1 pixel με τη σειρά, λαμβάνετε το εφέ κτύπημα.

Παράδειγμα εγκεφαλικού επεισοδίου Νο. 1

Για να κάνετε το stroke πιο κορεσμένο, μπορείτε να χρησιμοποιήσετε την τέταρτη παράμετρο text-shadow, η οποία είναι υπεύθυνη για την ακτίνα θαμπώματος της σκιάς:

Παράδειγμα Νο. 2

H1(κείμενο-σκιά: κόκκινο 1px 0px, κόκκινο 1px 1px, κόκκινο 0px 1px, κόκκινο -1px 1px, κόκκινο -1px 0px, κόκκινο -1px -1px, κόκκινο 0px -1px, κόκκινο 1px -1px, κόκκινο 0,κόκκινο 3px 0 0 3px, κόκκινο 0 0 3px, κόκκινο 0 0 3px, κόκκινο 0 0 3px, κόκκινο 0 0 3px, κόκκινο 0 0 3px, κόκκινο 0 0 3px;)

Παράδειγμα εγκεφαλικού επεισοδίου Νο. 2

Εάν παρατηρήσετε, η ιδιότητα "κόκκινο 0 0 3 εικονοστοιχεία" επαναλαμβάνεται πολλές φορές. Εδώ βρίσκεται το φαινόμενο κορεσμού. Για να επιτευχθεί μια σαφέστερη εμφάνιση της διαδρομής, η ιδιότητα μπορεί να προστεθεί με άλλες παραμέτρους ένας μεγάλος αριθμός απόμια φορά. Το μόνο μειονέκτημαείναι ότι αυτό μπορεί να επιβραδύνει σημαντικά το πρόγραμμα περιήγησης σε αδύναμους υπολογιστές.

Σήμερα θα σας πω πώς μπορείτε να το κάνετε css εγκεφαλικό επεισόδιοκείμενο. Θα πραγματοποιήσουμε όλους τους χειρισμούς αποκλειστικά με την ιδιότητα text-shadow.

Λεπτό, καθαρό περίγραμμα

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

Εδώ μπορείτε να δείτε ότι το μπλοκ με κείμενο έχει την κλάση text-dec. Μέσω αυτού θα έχουμε πρόσβαση στο στοιχείο μας στο css, εφαρμόζοντας τις απαραίτητες ιδιότητες σε αυτό. Λοιπόν, δείτε πώς να κάνετε ένα λεπτό κτύπημα:

Text-dec (μέγεθος γραμματοσειράς: 50 px, χρώμα: κίτρινο, σκιά κειμένου: 1px 1px 0 μαύρο, -1px -1px 0 μαύρο)

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

Η ιδιότητα text-shadow σάς επιτρέπει να προσθέσετε μια σκιά στο κείμενο, μπορείτε να προσθέσετε όσες σκιές θέλετε, χωρισμένες με κόμματα. Η σύνταξη της ιδιοκτησίας είναι:

κείμενο-σκιά: οριζόντια μετατόπιση | κατακόρυφο | θαμπάδα | χρώμα

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

Εάν προσθέσετε ένα θάμπωμα 10 pixel σε κάθε σκιά, θα μοιάζει με αυτό:

Θολό εγκεφαλικό επεισόδιο

Μια άλλη προσέγγιση είναι να μην προσδιορίσετε καθόλου μια μετατόπιση, αλλά να ορίσετε μια θαμπάδα - τότε το κείμενο θα περιγραφεί επίσης, αλλά όχι καθαρά. Ας προσθέσουμε το ίδιο ακριβώς κείμενο στο html, αλλά απλώς ορίζουμε μια διαφορετική κατηγορία στυλ - text-dec2:

Text-dec2 (μέγεθος γραμματοσειράς: 50 εικονοστοιχεία, χρώμα: μπλε, σκιά κειμένου: 0 0 7 εικονοστοιχεία κόκκινο, )

Τολμηρό εγκεφαλικό

Αυτό είναι πιο δύσκολο να εφαρμοστεί, καθώς η υπερβολική μετακίνηση των σκιών μπορεί να κάνει το κείμενο μη αναγνώσιμο. Και όμως μπορεί να επιτευχθεί ένα συγκεκριμένο αποτέλεσμα, αν και για αυτό θα πρέπει να προσθέσετε πολύ περισσότερες σκιές από ό, τι σε προηγούμενες περιπτώσεις. Αντίστοιχα, προσθέστε στο html νέο θραύσματα κειμένουμε τις κλάσεις text-dec3 και text-dec4 . Και εδώ είναι τα στυλ για αυτούς:

Text-dec3(μέγεθος γραμματοσειράς: 50 px; χρώμα: κίτρινο; κείμενο-σκιά: 1px 1px 0 μαύρο, -1px -1px 0 μαύρο, 2px 2px 0 μαύρο, -2px -2px 0 μαύρο, 3px 3px 0 μαύρο, -3px - 3px 0 black, 4px 4px 0 black, -4px -4px 0 black ) .text-dec4(μέγεθος γραμματοσειράς: 50px; χρώμα: κίτρινο; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2x μαύρο

Όπως μπορείτε να δείτε, το κείμενο διατήρησε την αναγνωσιμότητα και ταυτόχρονα έλαβε ένα αξιοπρεπές μαύρο περίγραμμα. Η ουσία αυτής της προσέγγισης είναι ότι προσθέτουμε σταδιακά νέες σκιές, αυξάνοντας τη μετατόπιση κατά 1 pixel κάθε φορά.

Ακόμα πιο χοντρό κτύπημα από όλες τις πλευρές

Περαιτέρω - πιο δύσκολο. Προσωπικά δεν ήξερα πώς να εφαρμόσω σωστά ένα εγκεφαλικό επεισόδιο από όλες τις πλευρές, αλλά στη συνέχεια βρήκα μια γεννήτρια σκιών κειμένου στο Διαδίκτυο, η οποία σας επιτρέπει να οπτική λειτουργίαδιαμορφώστε τη σκιά και, στη συνέχεια, πρέπει απλώς να αντιγράψετε τον κώδικά της. Εδώ είναι ένας σύνδεσμος προς τη γεννήτρια.
Με τη βοήθειά του κατάφερα να φτιάξω μια σκιά όπως αυτή:

Το CSS δεν είναι ακόμα παντοδύναμο

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

Μέχρι στιγμής γνωρίζω τέτοιες επιλογές όπως πώς να δημιουργήσω ένα περίγραμμα κειμένου σε CSS. Ίσως γνωρίζετε μερικά, γράψτε στα σχόλια. Την επόμενη φορά θα σας δείξω μερικά ακόμα εφέ που μπορείτε να κάνετε με κείμενο χρησιμοποιώντας την ιδιότητα text-shadow.

Βλαντ Μέρζεβιτς

Κάποτε υπήρχε μια συγκεκριμένη μόδα για κείμενο με σκιές και ένα παρόμοιο εφέ μπορούσε να βρεθεί σχεδόν σε κάθε ιστότοπο. ΣΕ γραφικός επεξεργαστήςΗ σκιά προστίθεται απλά, φαίνεται υπέροχη, εδώ είναι το κείμενο με τη σκιά και τοποθετείται στην ιστοσελίδα, ανεξάρτητα από το στυλ του ιστότοπου και την αίσθηση αναλογίας του σχεδιαστή. Όταν τα περισσότερα προγράμματα περιήγησης άρχισαν να υποστηρίζουν την ιδιότητα στυλ κειμένου-σκιάς, η μόδα είχε ήδη περάσει και τώρα το κείμενο με σκιά είναι αρκετά σπάνιο. Ωστόσο, το text-shadow έχει μια σειρά από άλλες σιωπηρές χρήσεις που λίγοι υποψιάζονται. Χρησιμοποιώντας αυτήν την ιδιότητα, μπορείτε να δημιουργήσετε κείμενο περιγράμματος, να το "εξωθήσετε", να δημιουργήσετε μια λάμψη, θαμπάδα και πολλά άλλα.

Χρήση κειμένου-σκιάς

Τέσσερις παράμετροι γράφονται ως τιμές: χρώμα σκιάς, οριζόντια και κάθετη μετατόπιση και ακτίνα θολώματος σκιάς (Εικ. 1).

Ρύζι. 1. Παράμετροι σκιάς κειμένου

Το χρώμα μπορεί να γραφτεί στην αρχή ή στο τέλος όλων των παραμέτρων σε οποιαδήποτε κατάλληλη μορφή CSS. Έτσι, μπορείτε να κάνετε μια ημιδιαφανή σκιά μέσα μορφή rgba. Οι θετικές τιμές μετατόπισης ρίχνουν τη σκιά προς τα δεξιά και προς τα κάτω, ενώ οι αρνητικές τιμές μετατόπισης ρίχνουν τη σκιά προς τα αριστερά και προς τα πάνω, αντίστοιχα. Για να έχετε μια σκιά γύρω από το κείμενο, απλώς ορίστε τις τιμές μετατόπισης στο μηδέν. Η ακτίνα θαμπώματος καθορίζει πόσο έντονη θα είναι η σκιά. Όσο μεγαλύτερη είναι η ακτίνα θαμπώματος, τόσο πιο απαλή φαίνεται η σκιά.

Ένα μεγάλο πλεονέκτημα του text-shadow είναι η δυνατότητα προσθήκης πολλών διαφορετικών σκιών ταυτόχρονα, παραθέτοντας τις παραμέτρους τους διαχωρισμένες με κόμματα. Αυτή η δυνατότητα βασικά σας επιτρέπει να δημιουργήσετε διαφορετικά εφέ.

Δυστυχώς, ο IE πριν από την έκδοση 10.0 δεν υποστηρίζει text-shadow , επομένως δεν θα δούμε καμία ομορφιά σε αυτό το πρόγραμμα περιήγησης.

Το περίγραμμα κειμένου χαρακτηρίζεται από το γεγονός ότι κάθε γράμμα περιβάλλεται από μια γραμμή, το χρώμα της οποίας διαφέρει από το χρώμα του κειμένου (Εικ. 2). Αυτό το εφέ φαίνεται καλύτερα με τη γραμματοσειρά sans serif. μεγάλο μέγεθος, για παράδειγμα, επικεφαλίδες. Για το κύριο κείμενο, η χρήση περιγράμματος επηρεάζει μόνο την αναγνωσιμότητα.

Ρύζι. 2. Περίγραμμα κειμένου

Ένα περίγραμμα μπορεί να δημιουργηθεί χρησιμοποιώντας δύο μεθόδους. Στην πρώτη μέθοδο, ορίσαμε μια μετατόπιση μηδενικής σκιάς και μια μικρή ακτίνα θολώματος, κυριολεκτικά 1-2 pixel (παράδειγμα 1). Η αύξηση της τιμής θαμπώματος μετατρέπει το περίγραμμα σε λάμψη γύρω από το κείμενο, κάτι που είναι διαφορετικό εφέ.

Παράδειγμα 1: Περίγραμμα κειμένου

Περίγραμμα κειμένου

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

Παράδειγμα 2. Τέσσερις σκιές για το περίγραμμα

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Περίγραμμα κειμένου

Η εμφάνιση ενός τέτοιου περιγράμματος φαίνεται στο Σχ. 3. Είναι αξιοσημείωτο ότι το περίγραμμα είναι πιο εκφραστικό.

Ρύζι. 3. Περίγραμμα με τέσσερις σκιές

Για να προσθέσετε το εφέ κειμένου 3D που φαίνεται στην Εικ. 4, εφαρμόζονται πολλές σκιές ταυτόχρονα, οι οποίες μετατοπίζονται μεταξύ τους κατά ένα εικονοστοιχείο οριζόντια και κάθετα.

Ρύζι. 4. Τρισδιάστατο κείμενο

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

Ο αριθμός των σκιών εξαρτάται από το πόσο θέλετε να "τραβήξετε" το κείμενο προς τα εμπρός. Μεγάλη ποσότητααυξάνει το «βάθος» των γραμμάτων, λιγότερο, αντίθετα, μειώνει την τρισδιάστατη. Το Παράδειγμα 3 χρησιμοποιεί πέντε σκιές του ίδιου χρώματος.

Παράδειγμα 3: Σκιά για προσθήκη τρισδιάστατων

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ψυγείο δέκα θαλάμων

Για όλες τις σκιές ορίζουμε την ακτίνα θολώματος στο μηδέν και στο ίδιο χρώμα. Οι σκιές διαφέρουν μόνο στις τιμές μετατόπισής τους.

Ανάγλυφο κειμένου

Για να δημιουργήσετε το εφέ ανάγλυφου κειμένου ή, με άλλα λόγια, ανάγλυφο, το χρώμα του κειμένου πρέπει να ταιριάζει με το χρώμα του φόντου. Το ένα μέρος των γραμμάτων που «προεξέχει» πάνω από την επιφάνεια φαίνεται να είναι φωτισμένο, ενώ το άλλο μέρος είναι στη σκιά (Εικ. 5).

Ρύζι. 5. Ανάγλυφο κείμενο

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

Παράδειγμα 4: Ανάγλυφο κείμενο

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ανάγλυφο κείμενο

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

Κείμενο-σκιά: #333 -1px -1px 0, #fff 1px 1px 0;

Λάμψη

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

Ρύζι. 6. Λάμψη κειμένου

Παράδειγμα 5. Λάμψη

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Φωτεινή πλευρά

Σκοτεινή πλευρά

Θολούρα

Η ίδια η σκιά είναι θολή, οπότε αν αφήσουμε μόνο τη σκιά και αποκρύψουμε το ίδιο το κείμενο, θα λάβουμε θολά γράμματα (Εικ. 7) και ο βαθμός θαμπώματος μπορεί εύκολα να ρυθμιστεί χρησιμοποιώντας την παράμετρο σκιάς κειμένου.

Ρύζι. 7. Κείμενο με θολούρα

Κρυβω πρωτότυπο κείμενοαρκεί να ορίσετε το χρώμα ως διαφανές (παράδειγμα 6). Στη συνέχεια, το χρώμα της σκιάς λειτουργεί ως το χρώμα του κειμένου και η ακτίνα θαμπώματος καθορίζει τον βαθμό θολώματος των γραμμάτων.

Παράδειγμα 6: Θάμπωμα κειμένου

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Θολό κείμενο

Σκιά και ψευδοτάξεις

Η σκιά δεν χρειάζεται να προστεθεί απευθείας στο κείμενο η ιδιότητα text-shadow παίζει όμορφα με τις ψευδοκλάσεις :hover και :first-γράμμα. Λόγω αυτού παίρνουμε ενδιαφέροντα εφέμε κείμενο όπως το περίγραμμα του πρώτου γράμματος μιας παραγράφου ή τη λάμψη ενός συνδέσμου όταν τοποθετείτε τον κέρσορα του ποντικιού πάνω του. Το Παράδειγμα 7 δείχνει τέτοιες τεχνικές.

Παράδειγμα 7: Χρήση ψευδο-τάξεων

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ένα εξειδικευμένο έργο επιβραδύνει το παραδοσιακό κανάλι, ανεξάρτητα από το κόστος. Η δομή της αγοράς, απορρίπτοντας τις λεπτομέρειες, σταθεροποιεί το τμήμα μάρκετινγκ και πωλήσεων, χρησιμοποιώντας την εμπειρία προηγούμενων καμπανιών. Η οικοδόμηση επωνυμίας, φυσικά, απωθεί αυθόρμητα το συγκλίνον PR, κερδίζοντας ένα τμήμα της αγοράς. Η επένδυση συγχρονίζει τον ρόλο κοινωνική θέσηαυξάνοντας τον ανταγωνισμό. Εμπορικό σήμακαθορίζει φυσικά το σχέδιο τοποθέτησης, χρησιμοποιώντας την εμπειρία προηγούμενων καμπανιών.