Στρογγυλεμένες γωνίες css. Στρογγυλεμένες γωνίες
Όλοι έχουν βαρεθεί εδώ και καιρό τις παραδοσιακές ορθογώνιες γωνίες στο σχεδιασμό ιστοσελίδων. Στη μόδα είναι οι στρογγυλεμένες γωνίες, οι οποίες δεν γίνονται χρησιμοποιώντας εικόνες, αλλά μέσα από στυλ, για τα οποία χρησιμοποιείται η ιδιότητα ακτίνας περιγράμματος. Αυτή η ιδιότητα μπορεί να έχει μία, δύο, τρεις ή τέσσερις τιμές που χωρίζονται από ένα κενό, οι οποίες καθορίζουν την ακτίνα όλων των γωνιών ή κάθε μία ξεχωριστά.
Στον πίνακα Το 1 δείχνει διαφορετικό αριθμό τιμών και τον τύπο του μπλοκ που λαμβάνεται σε αυτήν την περίπτωση.
| Κώδικας | Περιγραφή | Θέα |
|---|---|---|
| div (ακτίνα περιγράμματος: 10 px; ) | Ακτίνα στρογγυλοποίησης για όλες τις γωνίες ταυτόχρονα. | |
| div (ακτίνα περιγράμματος: 0 10 εικονοστοιχεία; ) | Η πρώτη τιμή ορίζει την ακτίνα της επάνω αριστερής και της κάτω δεξιάς γωνίας, η δεύτερη τιμή ορίζει την ακτίνα για την επάνω δεξιά και την κάτω αριστερή γωνία. |  |
| div (ακτίνα περιγράμματος: 20 px 10 px 0; ) | Η πρώτη τιμή ορίζει την ακτίνα της επάνω αριστερής γωνίας, η δεύτερη - τόσο η πάνω δεξιά όσο και η κάτω αριστερή γωνία και η τρίτη τιμή - η κάτω δεξιά. |  |
| div (περιθώριο-ακτίνα: 20px 10px 5px 0;) | Ρυθμίζει διαδοχικά την ακτίνα της επάνω αριστερής, πάνω δεξιάς, κάτω δεξιάς και κάτω αριστερής γωνίας. |  |
Το Παράδειγμα 1 δείχνει πώς να δημιουργήσετε ένα μπλοκ με στρογγυλεμένες γωνίες.
Παράδειγμα 1. Γωνίες μπλοκ
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 1.
Ρύζι. 1. Μπλοκ με στρογγυλεμένες γωνίες
Ένα ενδιαφέρον αποτέλεσμα μπορεί να επιτευχθεί εάν ρυθμίσετε την ακτίνα στρογγυλοποίησης να είναι μεγαλύτερη από το μισό του ύψους και του πλάτους του στοιχείου. Σε αυτή την περίπτωση, θα λάβετε έναν κύκλο. Το Παράδειγμα 2 δείχνει πώς να δημιουργήσετε ένα στρογγυλό κουμπί με μια εικόνα.
Παράδειγμα 2: Στρογγυλό κουμπί
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.
Ρύζι. 2. Στρογγυλό κουμπί
Στο πρόγραμμα περιήγησης Opera, στρογγυλοποίηση σε
Η ιδιότητα border-radius μπορεί να συνδυαστεί με άλλες ιδιότητες, για παράδειγμα προσθέτοντας μια σκιά σε ένα στοιχείο. Στο παράδειγμα 3, δημιουργείται ένα σύνολο κύκλων, ένας από τους οποίους επισημαίνεται χρησιμοποιώντας πλαίσιο-σκιά . Αυτό το σετ μπορεί να χρησιμοποιηθεί για πλοήγηση σε σελίδες ή φωτογραφίες.
Παράδειγμα 3. Λάμψη
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.
Ρύζι. 3. Λάμψη γύρω από τον κύκλο
Χρησιμοποιώντας την ακτίνα περιγράμματος, μπορείτε να κάνετε όχι μόνο έναν κύκλο, αλλά και μια έλλειψη, καθώς και μια ελλειπτική στρογγυλοποίηση για ένα μπλοκ. Για να γίνει αυτό, πρέπει να γράψετε όχι μία τιμή, αλλά δύο, διαχωρισμένες με κάθετο. Η εγγραφή 20 εικονοστοιχείων/10 εικονοστοιχείων σημαίνει ότι η οριζόντια ακτίνα του φιλέτου θα είναι 20 εικονοστοιχεία και η κατακόρυφη ακτίνα θα είναι 10 εικονοστοιχεία. Το Παράδειγμα 4 δείχνει πώς να δημιουργήσετε ελλειπτικές γωνίες για να προσθέσετε μια λεζάντα σε στυλ κόμικ σε μια φωτογραφία.
Παράδειγμα 4: Ελλείψεις
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 4.
Ρύζι. 4. Χρησιμοποιώντας ελλειπτικές γωνίες
Μπορείτε επίσης να αλλάξετε την εμφάνιση των γωνιών στις εικόνες προσθέτοντας την ιδιότητα border-radius στον επιλογέα img, όπως φαίνεται στο Παράδειγμα 5.
Παράδειγμα 5: Εικόνες
HTML5 CSS3 IE 9+ Cr Op Sa Fx
). Αυτό γίνεται χρησιμοποιώντας την ιδιότητα CSS border-radius. Σε αυτό το άρθρο θα εξετάσουμε όλες τις διαφορετικές επιλογές.
Η σύνταξη ακτίνας περιγράμματος CSS είναι:
ακτίνα συνόρων : [ φιλέτο_αξία];
Τρόπος στρογγυλοποίησης γωνιών σε HTML χρησιμοποιώντας CSS
Ας δούμε παραδείγματα στρογγυλοποίησης γωνιών χρησιμοποιώντας CSS. Για παράδειγμα
Σε αυτήν την περίπτωση, και οι 4 άκρες του στοιχείου θα στρογγυλεθούν κατά 30 εικονοστοιχεία.
Η τιμή φιλέτου σημαίνει ποια πρέπει να είναι η ακτίνα του κύκλου στη γωνία.
Μπορείτε να στρογγυλοποιήσετε κάθε γωνία με διαφορετικές ακτίνες. Για να γίνει αυτό πρέπει να γράψετε
περίγραμμα-ακτίνα : 10 εικονοστοιχεία 7 εικονοστοιχεία 0 εικονοστοιχεία 0 εικονοστοιχεία ;
Η σειρά αυτών των αριθμών είναι η εξής:
- Επάνω αριστερή γωνία (στο παράδειγμα αυτό είναι 10 εικονοστοιχεία)
- Επάνω δεξιά γωνία (στο παράδειγμα αυτό είναι 7 px)
- Κάτω δεξιά γωνία (στο παράδειγμα αυτό είναι 0 px)
- Κάτω αριστερή γωνία (0 εικονοστοιχεία στο παράδειγμα)
Για παράδειγμα
Αποτέλεσμα:
Για να μην θυμάστε ποια τιμή ακολουθεί, μπορείτε να γράψετε κάθε γωνία ξεχωριστά στο CSS
περίγραμμα-πάνω-αριστερά-ακτίνα : 10px ; // πάνω αριστερή γωνία border-top-right-radius : 7px ; // πάνω δεξιά γωνία border-bottom-right-radius : 0px ; // κάτω δεξιά γωνία border-bottom-left-radius : 0px ; // κάτω αριστερή γωνία
Επιπλέον, μπορείτε επίσης να αλλάξετε την ακτίνα για κάθε γωνία ξεχωριστά για το οριζόντιο και το κάθετο επίπεδο.
Ο καθορισμός της δεύτερης ακτίνας πρέπει να προσδιορίζεται χρησιμοποιώντας κάθετο "/" στην περίπτωση ακτίνας περιγράμματος ή χρησιμοποιώντας τη δεύτερη τιμή δίπλα σε αυτήν στην περίπτωση που καθορίζεται απευθείας κάθε γωνία της ακτίνας
ακτίνα συνόρων: 5px 5px 5px 5px / 10px 10px 10px 10px; ή μπορείτε να το ρυθμίσετε ως εξής: border-top-left-radius :5px 10px ; // πάνω αριστερή γωνίαπερίγραμμα-πάνω-δεξιά-ακτίνα :5px 10px ; // πάνω δεξιά γωνία border-bottom-right-radius :5px 10px ; // κάτω δεξιά γωνία border-bottom-left-radius :5px 10px ; // κάτω αριστερή γωνία
Η πρώτη παράμετρος είναι υπεύθυνη για την οριζόντια ακτίνα, η δεύτερη για την κατακόρυφη.
Για παράδειγμα, χρησιμοποιώντας αυτές τις ιδιότητες μπορείτε να κάνετε μια έλλειψη:
Αποτέλεσμα:
ΣημείωσηΑξίες 100px 100px 100px 100px / 200px 200px 200px 200pxθα μπορούσε να γραφτεί ακόμα πιο συμπαγής:
περίγραμμα-ακτίνα : 100px / 200px ;
Αλλάζοντας τις παραμέτρους κάθε γωνίας, μπορείτε να δημιουργήσετε διάφορα ενδιαφέροντα στρογγυλεμένα στοιχεία. Για παράδειγμα, μπορείτε να κάνετε κύκλο, έλλειψη, πτώση, πέτρα, αυγό κ.λπ.
Καθορισμός του πάχους, του χρώματος και του τύπου γραμμής ενός φιλέτου
Εκτός από τις τιμές φιλέτου, μπορείτε επίσης να ορίσετε το πάχος, το χρώμα και τον τύπο της γραμμής φιλέτου. Και οι τρεις αυτές παράμετροι γίνονται μέσω της ιδιότητας περιγράμματος:
περίγραμμα : [πάχος] [τύπος_γραμμής] [χρώμα];
Για παράδειγμα:
περίγραμμα : 1px στερεό #00ff00 ;
- Πάχος - τις περισσότερες φορές καθορίζεται σε pixel
- Ο τύπος γραμμής μπορεί να λάβει τις ακόλουθες τιμές:
- στερεό (στερεό)
- διακεκομμένη
- διακεκομμένη (σειρά κουκκίδων)
- αυλάκι (αυλάκι γραμμής)
- ένθετο (γραμμή με εσοχή)
- αρχή (εξωθημένη γραμμή)
- Το χρώμα μπορεί να καθοριστεί είτε σε μορφή RGB είτε απλά με το όνομα (δείτε κωδικούς και ονόματα χρωμάτων html)
Ας δώσουμε ένα παράδειγμα
Με αυτόν τον τρόπο μπορείτε να σχεδιάσετε όμορφα διάφορα πλαίσια για ανακοινώσεις και σχόλια στον ιστότοπο.
Λάμψη για φιλέτο
Εκτός από τη ρύθμιση του πάχους, του χρώματος και του τύπου της γραμμής, μπορείτε επίσης να ρυθμίσετε τη λάμψη του πλαισίου. Αυτό γίνεται χρησιμοποιώντας την ιδιότητα box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Οι δύο πρώτες παράμετροι (0px 0px) ορίζουν τη μετατόπιση σκιάς οριζόντια και κάθετα, αντίστοιχα. Οι επόμενες δύο παράμετροι (4px 2px) καθορίζουν τη δύναμη της λάμψης γύρω από αυτό. Για να το κάνετε όμορφο, πρέπει να κάνετε έναν αριθμό μεγαλύτερο από τον άλλο και γενικά πρέπει να πειραματιστείτε. Η τελευταία παράμετρος είναι το χρώμα (#a0b).
Για παράδειγμα
Αποτέλεσμα:
Πάντα δίναμε παραδείγματα της ετικέτας
Προγράμματα περιήγησης
Τα παλαιότερα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν την ιδιότητα border-radius. Έτσι, IE κάτω από την έκδοση 9, ο Firefox κάτω από 4 δεν εμφανίζουν στρογγυλοποιήσεις. Είναι απαραίτητο να καθορίσετε προθέματα CSS προμηθευτή:
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Οι στρογγυλεμένες γωνίες στη φωτογραφία φαίνονται αρκετά ενδιαφέρουσες και ελκυστικές. Τις περισσότερες φορές, τέτοιες εικόνες χρησιμοποιούνται κατά τη δημιουργία κολάζ ή τη δημιουργία παρουσιάσεων. Επίσης, εικόνες με στρογγυλεμένες γωνίες μπορούν να χρησιμοποιηθούν ως μικρογραφίες για αναρτήσεις στον ιστότοπο.
Υπάρχουν πολλές επιλογές για χρήση, αλλά υπάρχει μόνο ένας τρόπος (σωστός) για να βγάλετε μια τέτοια φωτογραφία. Σε αυτό το σεμινάριο θα σας δείξω πώς να στρογγυλεύετε τις γωνίες στο Photoshop.
Ανοίξτε τη φωτογραφία στο Photoshop που πρόκειται να επεξεργαστείτε.
Στη συνέχεια, δημιουργήστε ένα αντίγραφο του στρώματος καταρράκτη που ονομάζεται "Ιστορικό". Για εξοικονόμηση χρόνου, χρησιμοποιήστε πλήκτρα πρόσβασης CTRL+J.
Το αντίγραφο δημιουργείται για να μείνει ανέπαφη η αρχική εικόνα. Εάν (ξαφνικά) κάτι πάει στραβά, μπορείτε να διαγράψετε τα αποτυχημένα επίπεδα και να ξεκινήσετε από την αρχή.
Σε αυτήν την περίπτωση, μας ενδιαφέρει μόνο μία από τις ρυθμίσεις - η ακτίνα στρογγυλοποίησης. Η τιμή αυτής της παραμέτρου εξαρτάται από το μέγεθος και τις ανάγκες της εικόνας.
Θα ορίσω την τιμή στα 30 pixel, ώστε το αποτέλεσμα να είναι καλύτερα ορατό.
Τώρα πρέπει να τεντώσετε τη φιγούρα που προκύπτει σε ολόκληρο τον καμβά. Κλήση της συνάρτησης "Δωρεάν μεταμόρφωση"πλήκτρα συντόμευσης CTRL+T. Ένα πλαίσιο θα εμφανιστεί στο σχήμα, το οποίο μπορείτε να χρησιμοποιήσετε για να μετακινήσετε, να περιστρέψετε και να αλλάξετε το μέγεθος του αντικειμένου.
Μας ενδιαφέρει η κλιμάκωση. Τεντώστε τη φιγούρα χρησιμοποιώντας τους δείκτες που υποδεικνύονται στο στιγμιότυπο οθόνης. Αφού ολοκληρωθεί η κλιμάκωση, κάντε κλικ ΕΙΣΑΓΩ.
Συμβουλή: για να κλιμακώσετε όσο το δυνατόν ακριβέστερα, δηλαδή χωρίς να υπερβείτε τον καμβά, πρέπει να ενεργοποιήσετε το λεγόμενο "Δεσμευτικός"Κοιτάξτε το στιγμιότυπο οθόνης, δείχνει πού βρίσκεται αυτή η λειτουργία.
Η λειτουργία κάνει τα αντικείμενα να «κολλούν» αυτόματα σε βοηθητικά στοιχεία και περιγράμματα καμβά.
Όπως μπορείτε να δείτε, μια επιλογή έχει σχηματιστεί γύρω από το σχήμα. Τώρα μεταβείτε στο επίπεδο αντιγραφής και αφαιρέστε την ορατότητα από το επίπεδο με το σχήμα (δείτε στιγμιότυπο οθόνης).
Το στρώμα καταρράκτη είναι τώρα ενεργό και έτοιμο για επεξεργασία. Η επεξεργασία συνίσταται στην αφαίρεση περιττών πραγμάτων από τις γωνίες της εικόνας.
Αντιστροφή επιλογής με χρήση πλήκτρων πρόσβασης CTRL+SHIFT+I. Τώρα η επιλογή παραμένει μόνο στις γωνίες.
