20+ Ενίσχυση εργαλείων και γεννητριών CSS3
Το CSS3 είναι μια βελτιωμένη έκδοση της προδιαγραφής Cascading Style Sheets και έρχεται με πολλές γοητευτικές δυνατότητες που φέρνουν σε επανάσταση τη διάταξη και το σχεδιασμό του Web, καθώς και άλλα πλεονεκτήματα.
Αλλά έχει και κάποια μειονεκτήματα, και η αντιμετώπισή τους απαιτεί νοσταλγία. Το CSS3 είναι νέο στην αγορά, οπότε υπάρχουν ακόμα πολλά που πρέπει να βελτιωθούν.
Το κύριο πρόβλημα είναι ότι οι ιδιότητες είναι συγκεκριμένες για τον περιηγητή και δεν μπορούν εύκολα να εφαρμοστούν σε προγράμματα περιήγησης. Οι προγραμματιστές πρέπει να προσθέσουν επιπλέον κώδικα για να εφαρμόσουν τις ιδιότητες με τον ίδιο τρόπο σε όλα τα προγράμματα περιήγησης.
Σε αυτό το άρθρο, θα επισημάνουμε μερικά αποτελεσματικά εργαλεία CSS3 αυτόματης γεννήτριας που μπορούν να βοηθήσουν τους προγραμματιστές - ειδικά τους τεμπέληδες! - με πολλές εργασίες. Το μεγαλύτερο πλεονέκτημα αυτών των εργαλείων είναι ότι επιτρέπουν την πλήρη προσαρμογή, πράγμα που σημαίνει ότι ο καθένας μπορεί να τα χρησιμοποιήσει με ευκολία.
1. CSS3, παρακαλώ!
CSS3, παρακαλώ είναι ένα εργαλείο πολλαπλών χρήσεων με ευέλικτα χαρακτηριστικά όπως border-radius , box-shadow και γραμμικές κλίσεις. Πρόκειται για μια ηλεκτρονική εφαρμογή που εμφανίζει άμεσα αποτελέσματα στη δεξιά πλευρά του παραθύρου, βοηθώντας τους προγραμματιστές να δημιουργήσουν έναν χρήσιμο κώδικα CSS3 cross-browser σε ένα γρήγορο. CSS3, παρακαλώ σχεδιάστηκε από Paul Irish και Jonathon Neal.
2. Γεννήτρια CSS3
CSS3 Generator βοηθά τους προγραμματιστές να δημιουργούν αποσπάσματα πολλαπλών περιηγητών για διάφορες ιδιότητες CSS3. Παρέχει στους προγραμματιστές πλήρη λειτουργικότητα προσαρμογής, συμπεριλαμβανομένων border-radius , text-shadow , RGBa, μέγεθος κιβωτίου και αλλαγή μεγέθους κουτιού. Απλά κάντε κλικ στο απλό αναπτυσσόμενο μενού και δημιουργήστε τον κωδικό για το επιθυμητό αποτέλεσμα.
3. Ακτίνα ορίων
Ακτίνα ορίων κάνει τα σχέδιά σας να φαίνονται πιο κομψά με λιγότερη προσπάθεια. Εισαγάγετε την επιθυμητή τιμή και θα δημιουργηθεί κώδικας για ορθογώνια με διαφορετικές προδιαγραφές συνόρων. Χρησιμοποιήστε το για να κάνετε τα σχέδια σας αξιολάτρευτο.
4. CSS3 Maker
CSS3 Maker είναι ένα εύχρηστο εργαλείο που συνοδεύεται από ένα αναπτυσσόμενο μενού και διάφορες άλλες επιλογές, όπως μέγεθος κιβωτίου, επιλογείς περιγράμματος και μετασχηματιστές. Απλά εισάγετε τις επιθυμητές τιμές στα πλαίσια και δημιουργείται ο κώδικας μαζί με μια προεπισκόπηση. Ο κώδικας είναι διαθέσιμος για λήψη.
5. Κουμπί Maker
Ο Chris Coyier παρουσιάζει ένα κομψό εργαλείο CSS-Κόλπα για το σχεδιασμό κομψών κουμπιών 3-D. Με Κουμπί Maker , απλά μετακινήστε τα ρυθμιστικά για να προσαρμόσετε τις διαβαθμίσεις κορυφής και κάτω, το χρώμα φόντου του hover, το χρώμα του κειμένου του δείκτη κλπ. για να πάρετε το επιθυμητό κουμπί σας χωρίς καθυστέρηση.
6. CSS3 PIE
CSS3 PIE έρχεται με μια γρήγορη επίδειξη και μερικούς ελέγχους για την εκτέλεση ορισμένων CSS3 ιδιοτήτων, όπως border-radius , box-shadow και γραμμική κλίση. Μετακινήστε τα χειριστήρια για να δείτε τις αλλαγές στο συνοδευτικό πλαίσιο. Στη συνέχεια, σημειώστε το πλαίσιο ελέγχου για να εμφανιστεί το πλαίσιο CSS και να δείτε τον παραγόμενο κώδικα.
7. Widget Pad
Widget Pad μπορεί να ενισχύσει τις δυνατότητες CSS3 που παρουσιάζονται σε προγράμματα περιήγησης Webkit με έναν απλό αλλά αποτελεσματικό αυτόματο-γεννήτορα. Καλύπτει ιδιότητες CSS όπως αδιαφάνεια, στρογγυλεμένες γωνίες, μετασχηματισμούς και άλλα.
8. CSS3 Gen
CSS3 Gen είναι ένα εύχρηστο εργαλείο για αρχάριους προγραμματιστές. Χρησιμοποιήστε τα στοιχεία ελέγχου για να κάνετε μια προοδευτική διάταξη: δημιουργήστε στρογγυλεμένες γωνίες, προσθέστε εφέ σκιάς σε οποιοδήποτε στοιχείο κουτιού και παίξτε με εφέ δροσερό κείμενο. Το εργαλείο βοηθά επίσης τους προγραμματιστές καθορίζοντας τη συμβατότητα του κώδικα με τα προγράμματα περιήγησης.
9. Μενού CSS3
Ένα κομψό αναπτυσσόμενο μενού με πολλές διαδραστικές λειτουργίες είναι μόνο μερικά κλικ μακριά. Κάντε το σχέδιό σας να φαίνεται κομψό με CSS3 μενού . Καλύπτει στρογγυλεμένες γωνίες, κλίσεις και πολλά άλλα. Το εργαλείο μειώνει τον χρόνο κωδικοποίησης για να πάρει κομψά μενού. Απλά κατεβάστε τον κώδικα και ενσωματώστε τον σύμφωνα με τις απαιτήσεις του.
10. Στρογγυλεμένη γωνιακή γεννήτρια
Το CSS Portal δημιούργησε ένα ευέλικτο εργαλείο για τη δημιουργία κώδικα για στρογγυλεμένες γωνίες, οι οποίες καθιστούν τις διατάξεις του Web να φαίνονται αριστοκρατικές. ο Στρογγυλεμένη γωνιακή γεννήτρια καθιστά εύκολη τη δημιουργία προσαρμοσμένου κώδικα για όλες τις γωνίες σε μία κίνηση ή σε γωνία με γωνία.
11. Διάγραμμα κλικ CSS3
CSS3 Κάντε κλικ στο Διάγραμμα βοηθάει με εξαιρετικά εφέ όπως τα χρώματα RGBa, τις σκιές κουτιού, τις ακτινικές κλίσεις και την περιστροφή. Οι προγραμματιστές μπορούν να προσαρμόσουν τα μεγέθη φόντου και να δώσουν στο κείμενο εκπληκτικά αποτελέσματα εγκεφαλικού επεισοδίου Ωστόσο, το εργαλείο δεν διαθέτει πολλές ευέλικτες επιλογές για την προσαρμογή του κώδικα. Ακόμα, είναι μια αποτελεσματική αυτό-γεννήτρια που μπορεί να εξοικονομήσει χρόνο.
12. Δοκιμή επιλογής CSS3
Δοκιμή επιλογής CSS3 είναι μια πλήρης δοκιμαστική σουίτα που παράγει αυτόματα διάφορες μικρές δοκιμές για να αξιολογήσει εάν ένα πρόγραμμα περιήγησης είναι συμβατό με τους επιλογείς CSS. Εάν εντοπίσει ένα ζήτημα συμβατότητας, το επισημαίνει. Αλλά δεν αντιμετωπίζει καλά τους επιλογείς που εξαρτώνται από τους χρήστες λόγω τεχνικών περιορισμών.
13. Γεννήτρια κλίσης
Τα χρώματα μπορούν να αλλάξουν δραματικά ένα σχέδιο. Γεννήτρια κλίσης σας δίνει τη δυνατότητα να σχεδιάσετε μια κλίση τριών χρωμάτων ανά δευτερόλεπτο. Απλά επιλέξτε τα χρώματα έναρξης, μετάβασης και τελειώματος. Στη συνέχεια παράγει την κλίση, με τα χρώματα να απέχουν εξίσου μεταξύ τους. Πιάσε τον κώδικα και πηγαίνετε.
14. Γεννήτρια εικόνων-ορίων
Γεννήτρια εικόνων συνόρων είναι ένα συναρπαστικό εργαλείο CSS3 που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε εικόνες ψυχρού περιγράμματος ρυθμίζοντας τα ρυθμιστικά. Αποκτήστε άμεσο κώδικα για το border-radius ιδιοκτησία. Επιλέξτε οποιαδήποτε εικόνα και χρησιμοποιήστε την για να διαμορφώσετε το φόντο και τα όρια ενός συγκεκριμένου στοιχείου και δώστε στο σχέδιο σας εκπληκτική εμφάνιση.
15. Westciv
Westciv είναι μια συλλογή εργαλείων που πρέπει να αποθηκεύσετε σελιδοδείκτες. Χρησιμοποιήστε το XRAY για να δείτε τη θέση, τα περιθώρια, την επένδυση και πολλές άλλες λεπτομέρειες για οποιοδήποτε στοιχείο. Η μαγνητική τομογραφία σάς βοηθά να δημιουργήσετε τους καλύτερους δυνατούς επιλογείς για ένα συγκεκριμένο στοιχείο. Το Sandbox CSS3 περιλαμβάνει κλίσεις, σκιές και μετασχηματισμούς CSS. Και άλλοι λέγεται ότι έρχονται σύντομα.
16. Xeo CSS
Xeo CSS είναι ένα διαδραστικό εργαλείο με μια εμπειρία γραφείου. Βοηθάει τους προγραμματιστές και τους αρχαρίους να σχεδιάζουν σελίδες CSS και HTML χωρίς να γράφουν μία μόνο γραμμή κώδικα. Δημιουργεί όχι μόνο αποσπάσματα CSS3, αλλά κλάσεις και επιλογείς ταυτότητας. Συνολικά, είναι ένα εξαιρετικό εργαλείο. Καταχωρήστε και ξεκινήστε να σχεδιάζετε μια εξαιρετική διάταξη ιστού.
17. CSS Corner
CSS Corner σας δίνει τη δυνατότητα να δημιουργήσετε στρογγυλεμένες γωνίες με κλίσεις για να δώσετε στο σχέδιο σας μια επαγγελματική εμφάνιση. Ο κωδικός στρογγυλεμένων γωνιών υποστηρίζεται από πολλά προγράμματα περιήγησης. Το μόνο που χρειάζεται να κάνετε είναι να χρησιμοποιήσετε τα στοιχεία ελέγχου, μαζί με τη μικρή λειτουργία προεπισκόπησης, και να πάρετε τον κωδικό.
18. Γεννήτρια κουμπιών CSS3
Τα κουμπιά μπορούν να φτιάξουν έναν κομψό σχεδιασμό - αλλά αν δεν έχουν σχεδιαστεί καλά, θα μπορούσαν να καταστρέψουν ολόκληρη τη διάταξη. Δημιουργήστε δροσερά κουμπιά προσθέτοντας κλίσεις και σκιές. CSS3 Γεννήτρια κουμπιών κλίσης παράγει τον σχετικό κώδικα μέσα σε λίγα δευτερόλεπτα, προσφέροντας μια ποικιλία ελέγχων, συμπεριλαμβανομένων επιπέδων κλίσης, κειμένου και αιωρήματος.
19. Spritebox
Spritebox είναι ένα εργαλείο WYSIWYG ("αυτό που βλέπετε είναι αυτό που παίρνετε"), βοηθώντας τους προγραμματιστές να δημιουργούν κλάσεις CSS και αναγνωριστικά από μια ενιαία εικόνα sprite. Η επιλογή "μεταφορά και απόθεση" κάνει αυτό το εργαλείο ευχάριστα διαδραστικό. Το Spritebox υποστηρίζει πολλά προγράμματα περιήγησης, επομένως τα θέματα συμβατότητας μπορούν να επιλυθούν γρήγορα. Επιλέξτε οποιοδήποτε τμήμα μιας εικόνας, το οποίο μπορεί να μεταφερθεί από οποιαδήποτε διεύθυνση URL ή να μεταφορτωθεί από έναν υπολογιστή, και να ορίσετε το όνομα της κλάσης. Το εργαλείο θα δημιουργήσει αυτόματα κανόνες CSS για τη θέση του φόντου.
20. Επεξεργαστής κλίσεων
Δώστε στο σχεδιασμό σας μια πολύχρωμη εμφάνιση με τις λειτουργίες που μοιάζουν με το Adobe Gradient Editor . Σχεδιάστε διαφανείς διαβαθμίσεις CSS και προσθέστε fade-in, fade-out, ημι-διαφάνεια και παρόμοια εφέ για να πάρετε ένα πολύχρωμο κουμπί κλίσης.
21. Παιδική χαρά CSS3 του Mike Plate
Ο Mike Plate (ένας προγραμματιστής ιστού και κινητής τηλεφωνίας) παρουσιάζει ένα απίστευτο ηλεκτρονικό εργαλείο, CSS3 Παιδική χαρά , η οποία διευκολύνει την ανάπτυξη ποικίλων χαρακτηριστικών, συμπεριλαμβανομένων των σκιών κειμένου, των μετασχηματισμών και των υπόβαθρων κλίσης. Αυτό το εκπληκτικό εργαλείο έχει επίσης μια επιλογή αλλαγής μεγέθους και επανατοποθέτησης, με συλλέκτες χρωμάτων και ρυθμιστικά που μπορούν να σας βοηθήσουν να στυλ ένα πλαίσιο κειμένου. Όταν γίνει η τροποποίηση, εμφανίζεται αμέσως η προεπισκόπηση με τον δημιουργούμενο κώδικα.
συμπέρασμα
Με CSS3, μπορεί κανείς να κάνει θαύματα με web layouts. Αλλά κάποιος χρειάζεται τεχνικές δεξιότητες. Τα εύχρηστα εργαλεία που αναφέρονται εδώ θα είναι εξαιρετικά χρήσιμα για τους επαγγελματίες που επιθυμούν να δημιουργήσουν όσο το δυνατόν περισσότερους κωδικούς συμβατούς με τον browser για διάφορες ιδιότητες του CSS3 και θα βοηθήσουν επίσης όσους είναι νέοι στον τομέα του σχεδιασμού.
Οτιδήποτε χάσαμε; Ποια εργαλεία CSS3 στηρίζονται περισσότερο;