Γεννήτρια ιδιοτήτων CSS

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

Τι δημιουργεί

• Διαβαθμίσεις: γραμμικές ή ακτινικές μεταβάσεις χρώματος μεταξύ δύο χρωμάτων
• Σκιές πλαισίου: σκιά κάτω από ένα στοιχείο ή εσωτερική σκιά γύρω από αυτό, με ρυθμίσεις για μετατόπιση, θόλωση, εξάπλωση, χρώμα και αδιαφάνεια
• Ακτίνα περιγράμματος: στρογγυλεμένες γωνίες, είτε ίδιες και στις τέσσερις γωνίες είτε ρυθμισμένες ξεχωριστά
• Σκιές κειμένου: σκιά πίσω από το κείμενο, με ρυθμίσεις για μετατόπιση, θόλωση, χρώμα και αδιαφάνεια

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

Πώς υπολογίζεται μια γραμμική διαβάθμιση CSS

Μια γραμμική διαβάθμιση μεταβαίνει από ένα χρώμα σε ένα άλλο κατά μήκος μιας ευθείας γραμμής. Η σύνταξή της σε CSS είναι:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

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

Λυμένο παράδειγμα

Οι αρχικές τιμές της γεννήτριας είναι γωνία 90 μοιρών, το #ff5f6d στη θέση 0% και το #ffc371 στη θέση 100%. Αυτό παράγει:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

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

Τύπος ακτινικής διαβάθμισης

Μια ακτινική διαβάθμιση εξαπλώνεται προς τα έξω από ένα κεντρικό σημείο αντί να εκτείνεται κατά μήκος μιας γραμμής:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

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

Και οι δύο τύποι διαβάθμισης σε αυτό το εργαλείο χρησιμοποιούν ακριβώς δύο χρώματα, τα οποία ορίζονται με τους επιλογείς Color 1 και Color 2. Δεν υπάρχει επιλογή προσθήκης τρίτου σημείου χρώματος.

Τύπος σκιάς πλαισίου CSS

Η σκιά πλαισίου είναι μια σκιά που σχεδιάζεται γύρω από τις ακμές ενός στοιχείου:

1box-shadow: h-offset v-offset blur spread color;
2

Τα h-offset και v-offset μετακινούν τη σκιά αριστερά/δεξιά και πάνω/κάτω. Οι θετικές τιμές την ωθούν προς τα δεξιά ή κάτω· οι αρνητικές προς τα αριστερά ή πάνω. Το blur απαλύνει την ακμή της σκιάς· όσο μεγαλύτερος είναι ο αριθμός, τόσο πιο μακριά εκτείνεται η απαλότητα. Το spread αυξάνει ή μειώνει το μέγεθος της σκιάς πριν εφαρμοστεί η θόλωση. Η προσθήκη της λέξης-κλειδιού inset πριν από τις μετατοπίσεις σχεδιάζει τη σκιά στο εσωτερικό του περιγράμματος του στοιχείου αντί για το εξωτερικό του.

Λυμένο παράδειγμα

Με τις προεπιλεγμένες ρυθμίσεις (οριζόντια μετατόπιση 5px, κατακόρυφη μετατόπιση 5px, θόλωση 10px, εξάπλωση 0px, μαύρο με αδιαφάνεια 20%), το εργαλείο παράγει:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Το ρυθμιστικό αδιαφάνειας του επιλογέα χρώματος κυμαίνεται από 0 έως 100 και μετατρέπεται στην κλίμακα από 0 έως 1 που χρησιμοποιεί το rgba(), έτσι το 20% γίνεται 0,2.

Τύπος ακτίνας περιγράμματος CSS

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

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

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

Λυμένο παράδειγμα

Η προεπιλεγμένη ακτίνα είναι 10px σε κάθε γωνία:

1border-radius: 10px;
2

Μια κυκλική εικόνα avatar χρησιμοποιεί συνήθως border-radius: 50%, αν και αυτή η τιμή βρίσκεται εκτός του εύρους που επιτρέπει το ρυθμιστικό της γεννήτριας (0 έως 100 pixel).

Τύπος σκιάς κειμένου CSS

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

1text-shadow: h-offset v-offset blur color;
2

Λυμένο παράδειγμα

Με τις προεπιλεγμένες ρυθμίσεις (οριζόντια μετατόπιση 2px, κατακόρυφη μετατόπιση 2px, θόλωση 3px, μαύρο με αδιαφάνεια 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Ποιους κωδικούς χρώματος δέχεται η γεννήτρια

Κάθε στοιχείο ελέγχου χρώματος διαθέτει δείγμα χρώματος και πλαίσιο κειμένου. Το πλαίσιο κειμένου δέχεται έναν δεκαεξαδικό κωδικό χρώματος, δηλαδή τη μορφή # που χρησιμοποιείται σε όλο το CSS. Ισχύουν τέσσερα μήκη: τρία ψηφία (#f00), τέσσερα ψηφία (#f00c), έξι ψηφία (#ff0000) και οκτώ ψηφία (#ff0000cc). Οι σύντομες μορφές σημαίνουν το ίδιο χρώμα με τις πλήρεις, επειδή κάθε ψηφίο διπλασιάζεται: το #123 είναι το ίδιο χρώμα με το #112233.

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

Πώς χρησιμοποιείται η γεννήτρια ιδιοτήτων CSS

1. Επιλέξτε μια καρτέλα: Gradient, Box Shadow, Border Radius ή Text Shadow.
2. Ρυθμίστε τα ρυθμιστικά, τους επιλογείς χρώματος και τα πλαίσια ελέγχου. Κάθε ρυθμιστικό έχει δίπλα του ένα πλαίσιο αριθμού για την εισαγωγή ακριβούς τιμής. Το πλαίσιο προεπισκόπησης και ο κώδικας CSS ενημερώνονται αμέσως.
3. Επιλέξτε το κουμπί «Copy to Clipboard» και επικολλήστε τον κώδικα σε ένα φύλλο στυλ ή σε ένα χαρακτηριστικό style.
4. Επιλέξτε «Reset» για να επαναφέρετε κάθε πεδίο και στις τέσσερις καρτέλες στην αρχική του τιμή. Αυτό επαναφέρει επίσης την ενεργή καρτέλα στην καρτέλα Gradient, ακόμη και αν εμφανιζόταν διαφορετική καρτέλα.

Συχνές ερωτήσεις

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

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

Μπορεί αυτό το εργαλείο να δημιουργήσει διαβάθμιση με περισσότερα από δύο χρώματα; Όχι. Και τα δύο πλαίσια διαβάθμισης, το γραμμικό και το ακτινικό, υποστηρίζουν ακριβώς δύο χρώματα, το Color 1 και το Color 2, καθένα με τη δική του θέση σημείου μετάβασης.

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

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

Λειτουργεί το παραγόμενο CSS σε κάθε πρόγραμμα περιήγησης; Οι διαβαθμίσεις, οι σκιές πλαισίου, η ακτίνα περιγράμματος και οι σκιές κειμένου υποστηρίζονται όλα στις τρέχουσες εκδόσεις των Chrome, Firefox, Safari και Edge. Στο αποτέλεσμα δεν προστίθενται προθέματα κατασκευαστών.

Παραπομπές

1. MDN Web Docs: Χρήση διαβαθμίσεων CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow