Κυκλικές και ελλειπτικές κλίσεις CSS3 [Συμβουλές CSS3]
Σήμερα θα συνεχίσουμε τη συζήτησή μας CSS3 Διαβαθμίσεις. Στην προηγούμενη ανάρτησή σας έχουμε δείξει πώς να δημιουργήσετε Γραμμικές κλίσεις. Αυτή τη φορά θα καλύψουμε τον συγγενή τους, Κυκλικές και ελλειπτικές κλίσεις.
Η σύνταξη βαθμίδων
Η κλίση στο CSS3 δηλώνεται χρησιμοποιώντας το εικόνα φόντου ιδιοκτησία. Αυτό είναι για καλύτερη συμβατότητα όταν πρέπει επίσης να προσθέσουμε χρώμα του φόντου σε ένα ενιαίο σύνολο κανόνων, ώστε να μην συγκρούονται μεταξύ τους. Στη συνέχεια, για να δημιουργήσουμε την ακτινική κλίση, το ονομάζουμε απλά με αυτό ακτινική κλίση () λειτουργία. Υπάρχουν τέσσερις τιμές που πρέπει να συμπεριληφθούν στη λειτουργία για να ρυθμίσετε σωστά την κλίση.
Η πρώτη τιμή ορίζει το κλίση. Μπορούμε να χρησιμοποιήσουμε μια περιγραφική λέξη-κλειδί όπως πάνω, κάτω, κέντρο και αριστερά, ή μπορούμε επίσης να είμαστε πιο συγκεκριμένοι, 50% 50% για να ρυθμίσετε την κλίση στο κέντρο ή 0% 0% για να ορίσετε την κλίση για να ξεκινήσετε πάνω αριστερά.
Η δεύτερη τιμή ορίζει το το σχήμα και το μέγεθος της κλίσης, υπάρχουν δύο επιχειρήματα για τη διαμόρφωση των κλίσεων, πρώτα το έλλειψη η οποία είναι η προεπιλογή και η δεύτερη είναι κύκλος.
Και για το μέγεθος κλίσης, μπορούμε να επιλέξουμε ένα από τα ακόλουθα έξι επιχειρήματα.
| Αξίες | Περιγραφή |
|---|---|
πλησιέστερη πλευρά | Το σχήμα της κλίσης συναντά την πλευρά του κιβωτίου που βρίσκεται πλησιέστερα στο κέντρο του (για τους κύκλους) ή συναντά τόσο την κατακόρυφη όσο και την οριζόντια πλευρά που βρίσκεται πλησιέστερα στο κέντρο (για τις ελλείψεις). |
πλησιέστερη γωνία | Το σχήμα της διαβάθμισης έχει μέγεθος ώστε να συναντά ακριβώς τη στενότερη γωνία του κιβωτίου από το κέντρο του. |
απομακρυσμένη πλευρά | Παρόμοια με τη κοντινότερη πλευρά, εκτός από το σχήμα που έχει μέγεθος ώστε να καλύπτει την πλευρά του κουτιού που βρίσκεται πιο μακριά από το κέντρο του (ή κάθετη και οριζόντια πλευρά). |
πιο απομακρυσμένη γωνία | Το σχήμα της κλίσης είναι τέτοιο ώστε να συναντάει ακριβώς την πιο μακρινή γωνία του κιβωτίου από το κέντρο του. |
περιέχω | Ένα συνώνυμο για |
κάλυμμα | Ένα συνώνυμο για |
Πίνακας Πηγή: Δίκτυο προγραμματιστών Mozilla.
Τέλος, το τρίτο και το τέταρτο καθορίζουν το συνδυασμός χρωμάτων. Έτσι, εδώ γράφουμε τη σύνταξη για να δημιουργήσουμε το Ελλειπτικός κλίσεις, και αυτή τη φορά θα χρησιμοποιήσουμε κάλυμμα για το μέγεθος κλίσης, έτσι θα εξαπλωθεί ευρέως, καλύπτοντας το δοχείο?
σώμα εικόνα-φόντο: ακτινική κλίση (κεντρικό κέντρο, κάλυμμα ελλείψεων, # ffeda3, # ffc800).
Για να δημιουργήσετε το Εγκύκλιος κλίση μπορούμε απλά να το κάνουμε με αυτό τον τρόπο:
σώμα φόντο-εικόνα: ακτινική κλίση (κέντρο, κάλυμμα κύκλου, # ffeda3, # ffc800);
Όπως υποδηλώνει το όνομα, το σχήμα κλίσης θα είναι ένας κύκλος.
Υποστήριξη προγράμματος περιήγησης
Απλώς σημειώστε ότι όλα τα προγράμματα περιήγησης βρίσκονται ακόμα στη διαδικασία παροχής πλήρους υποστήριξης για αυτό το χαρακτηριστικό, οπότε εξακολουθούν να χρειάζονται το πρόθεμα του πωλητή. Έτσι, ολόκληρη η πλήρης σύνταξη που θα λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ και Opera 11+ - θα φανεί κάτι τέτοιο.
σώμα φόντο-εικόνα: ακτινική κλίση (κεντρικός πυθμένας, κάλυμμα έλλειψης, # ffeda3, # ffc800); εικόνα-φόντου: -ο-ακτινική κλίση (κεντρικός πυθμένας, κάλυμμα έλλειψης, # ffeda3, # ffc800); εικόνα φόντου: -ms-ακτινική κλίση (κεντρικός πυθμένας, κάλυμμα έλλειψης, # ffeda3, # ffc800); εικόνα φόντου: -moz-ακτινική κλίση (κεντρικός πυθμένας, κάλυμμα έλλειψης, # ffeda3, # ffc800); εικόνα φόντου: -webkit-ακτινική κλίση (κεντρικός πυθμένας, κάλυμμα ελλείψεων, # ffeda3, # ffc800);
Ελέγξτε τη δοκιμαστική έκδοση ή κάντε λήψη της πηγής για να παίξετε με κλίσεις.
- Διαδήλωση
- Λήψη πηγής
Τελικές λέξεις
Η δημιουργία ακτινικής κλίσης CSS3 δεν είναι τόσο δύσκολη όσο νομίζετε και ειδικά όταν λαμβάνετε βοήθεια από αυτά τα εργαλεία για τη δημιουργία κώδικα:
- Διαβαθμίσεις Colorzilla
- Gradientoo
Η ακτινική κλίση είναι μόνο ένας τύπος CSS3 gadients, θα συνεχίσουμε τη συζήτησή μας για το θέμα στις μελλοντικές θέσεις, οπότε μείνετε συντονισμένοι στο Hongkiat.com
