15 μεγάλες γεννήτριες HTML5 και CSS3
Τα HTML5 και CSS3 είναι σπουδαίες γλώσσες για να ξεκινήσετε να μαθαίνετε, και πάντα πίστευα ότι ένας από τους καλύτερους τρόπους για να αρχίσετε να μαθαίνετε είναι να καταδυθείτε και να χειριστείτε τον κώδικα. Όπως θα μπορούσατε πιθανώς να πείτε, αυτό είναι όπου οι γεννήτριες μπαίνουν μέσα. Είναι ένας πολύ καλός τρόπος για να δημιουργήσετε κάποιο κωδικό, να παίξετε μαζί του και να μάθετε.
Όχι μόνο αυτό, είναι απίστευτα χρήσιμο γιατί συχνά ως προγραμματιστής ή σχεδιαστής βρίσκουμε ότι κάνουμε πράγματα ξανά και ξανά. Λοιπόν, οι γεννήτριες μπορούν να απογυμνώσουν την άκρη και να κάνουν αυτά τα μικρά πράγματα για σας κάθε φορά.
Για παράδειγμα, έχω ένα απόσπασμα κειμένου-διαστολέα που δημιουργεί ένα πρότυπο HTML5 για το οποίο έγραψα εδώ . Τώρα, ο διαστολέας κειμένου είναι υπέροχος αλλά δεν λύνει κάθε ανάγκη και σε αυτή την περίπτωση υπάρχει μεγάλη ανάγκη για γεννήτριες, έτσι έφτασα στο χρόνο για να βρω 20 από τα αγαπημένα μου και να περιγράψω γιατί τους αρέσουν.
Θα πω ότι το μεγαλύτερο μέρος αυτής της λίστας θα επικεντρωθεί σε γεννήτριες CSS3, απλώς και μόνο επειδή είναι σε ζήτηση περισσότερο από τις γεννήτριες HTML5 και θα μάθουμε γιατί. Σημείωση: κάντε κλικ στις εικόνες για να ανοίξετε τους ιστότοπους.
Γεννήτριες CSS3
Υπάρχει μια κάπως αρνητική συνήθεια όταν πρόκειται για αυτές τις γεννήτριες, και πρέπει να πω ότι ως σχεδιαστής και προγραμματιστής δεν υπάρχει τίποτα αρνητικό για τη χρήση ενός. Είναι ένας τεράστιος εξοικονομητής χρόνου και με κάθε ειλικρίνεια γνωρίζω τρεις προγραμματιστές που έγραψαν τις δικές τους γεννήτριες απλά επειδή ήθελαν να βοηθήσουν την κοινότητα. Λοιπόν, να έχετε υπόψη ότι δεν είναι σαν να χρησιμοποιείτε κάτι ταμπού που γίνεται από το AOL. Αυτές είναι πολύ φυσικές και οργανικές γεννήτριες που έχουν προκύψει καθώς τις χρειαζόμαστε. Γιατί λοιπόν να μην μοιραστείτε με κάποιον από τον πλούτο; Ας δούμε μερικά από τα αγαπημένα μου και γιατί να τα απολαύσετε.
Γενικές Γεννήτριες
Αυτό το τμήμα θα επικεντρωθεί σε γεννήτριες που φροντίζουν τις ανάγκες και τις χρήσεις ευρέος φάσματος. Αυτά θα καλύψουν σχεδόν όλα όσα θα χρειαστείτε ή θέλετε σε μια γεννήτρια, αλλά από τη φύση τους μπορεί να είναι χειρότερα από τις λεπτομέρειες. Αυτός είναι ο λόγος που θα δώσω τόσες πολλές επιλογές αργότερα σε αυτό το άρθρο για συγκεκριμένους τύπους.
CSS3.me
Αυτή είναι μία από τις ακριβείς γεννήτριες στις οποίες αναφέρομαι. Αυτό δημιουργήθηκε από έναν από τους αγαπημένους μου σχεδιαστές, Eric Hoffman , και είναι καταπληκτικό. Πολύ απλό, ελάχιστο και κομψό, αλλά ταυτόχρονα πολύ λειτουργικό. Σας δίνει τη δυνατότητα να αλλάξετε και να ρυθμίσετε την ακτίνα του πλαισίου, την σκιά, την κλίση και την αδιαφάνεια - είναι αρκετά λειτουργική.
Σημείωση: Ρίξτε μια ματιά στον ιστότοπο του Eric. είναι ένα εξαιρετικό παράδειγμα κινητού πρώτου σχεδίου. Είναι επίσης σχεδιαστής στο Zendesk , γι 'αυτό στείλτε του κάποια αγάπη, αν έχετε απολαύσει ποτέ αυτό το προϊόν.
CSS3 Maker
Συχνά οι άνθρωποι θα βρουν γεννήτριες που αγαπούν και θα κολλήσουν μαζί τους. Και αυτό ακριβώς συνέβη με έναν πελάτη που είχα εργαστεί προηγουμένως σε σχέση με αυτή τη γεννήτρια. Ήταν απόλυτα ερωτευμένος με αυτό, και μπορώ να δω γιατί - είναι σίγουρα λειτουργικό. Μπορεί να μην είναι το πιο όμορφο πράγμα που έγινε ποτέ, αλλά φαίνεται να έχει όλα τα κουδούνια και σφυρίχτρες.
Μπορείτε να κάνετε @ εργασία γραμματοσειράς, εργασία κινούμενων εικόνων, σκιά κουτιού, σκιά κειμένου, περιστροφή κειμένου, μεταβάσεις, κλίσεις, ακτίνα πλαισίου και πολλά άλλα. Είναι ένα που συνήθως έχω σελιδοδείκτη, αλλά σπάνια χρησιμοποιώ μόνο για το πόσο καλά κάνουν οι μικρότερες γεννήτριες σε καθεμιά από τις αντίστοιχες κατηγορίες τους. Αλλά είναι σίγουρα μια καλή γεννήτρια για να δοκιμάσετε αν χρειάζεστε ένα και δεν σας αρέσει να μεταβείτε σε μια δέσμη διαφορετικών.
CSS3 Generator
Αυτό είναι ένα άλλο καλό γενικό που παρέχει πολλή λειτουργικότητα. Μου αρέσει αυτό γιατί έχει ωραία και εύκολη πτώση, και εύκολη στη χρήση λειτουργικότητα. Ο σχεδιασμός είναι επίσης αρκετά ωραίο. Προσφέρει επίσης μια ωραία λειτουργικότητα μεγέθους κουτιού. Αυτός προσφέρει μεγάλη ικανότητα να κάνει τα εξής: ακτίνα ακρών, σκιά κουτιού, σκιά κειμένου, RGBA, πολλαπλές στήλες, μέγεθος κιβωτίου, περίγραμμα, μεταβάσεις, μετασχηματισμούς, κλίσεις επιλογής. Νομίζω ότι αυτό είναι ένα από τα αγαπημένα μου, επειδή ο σχεδιασμός και το UI είναι τόσο καθαρό. Συνήθως χρησιμοποιώ αυτό όταν ξεχάσω τον cssmaker.
Κουμπιά Γεννήτριες
CSS3-Κόλπα Button Maker
Ένας από τους πρώτους κατασκευαστές κουμπιών που έβλεπα πίσω την ίδια μέρα με έκανε πραγματικά να τρυπώ. Ήταν πολύ γραμμικό, δεν είχε UI σε αυτό (ειρωνικά) και ήταν συνολικά ένα φρικτά σχεδιασμένο προϊόν. Ως δευτερεύουσα σημείωση, θα μιλήσω για κάτι παρόμοιο στη συνέχεια, αλλά προς το παρόν θα δείξω ένα που βρήκα πάνω από css3tricks , και είναι πραγματικά ωραίο.
Ένα από τα βασικά σημεία που πρέπει να αναφέρουμε εδώ είναι το γεγονός ότι είναι σχεδόν εξ ολοκλήρου ελεγχόμενο από ένα ρυθμιστικό σύρετε και πτώση, το οποίο είναι πραγματικά ωραίο. Απλά περιμένετε έως ότου πρέπει να εισάγετε τα πάντα με το χέρι χρησιμοποιώντας το πληκτρολόγιο και θα θελήσετε να έχετε ένα ωραίο συρόμενο slider. Ως τελικό σημείωμα πλευρά, CSS3 Tricks είναι μια υπέροχη τοποθεσία με έναν τόνο καλά οργανωμένο και στοχαστικό περιεχόμενο που όλοι θα ήθελαν να ελέγξουν έξω.
CSS3 Button.net
Και τώρα έρχομαι στην γεννήτρια που μόλις αναφέρω. Ο σχεδιασμός μπορεί να λείπει, αλλά προσφέρει πολύ περισσότερη επιλογή από την προηγούμενη, η οποία είναι ειρωνικά συχνά πως λειτουργούν τα πράγματα. Μερικές φορές θα θέλατε ευκολία στη χρήση και μερικές φορές χρειάζεστε κάποια σοβαρή επιλογή όταν πρόκειται για γεννήτριες, και αυτές οι τελευταίες δύο χτύπησαν πραγματικά και τα δύο αυτά σημεία.
Αυτή η δυνατότητα προσφέρει τη δυνατότητα προσθήκης πολλαπλών σκιών κειμένου, εσωτερικών σκιών, ορίων και χρωμάτων γραμματοσειράς, ενώ ο τελευταίος δεν μπόρεσε πραγματικά να πάρει πολλές λεπτομέρειες. Μπορεί να είναι δύσκολο να το καταλάβεις από την αρχή αλλά θα το πάρετε αν παίζεις με αυτό για λίγα λεπτά. Θεωρώ ότι αυτό είναι το πιο χρήσιμο αν είστε συνηθισμένοι στο Windows UI, και ως αποτέλεσμα είχα πελάτες να μου πει ότι αυτό ήταν το αγαπημένο τους, επειδή έχουν κολλήσει στο XP για χρόνια και δεν ξέρουν τίποτα καλύτερο. Και τώρα είμαι σίγουρος ότι μερικοί από εσάς αναρωτιέστε, αλλά είναι ειλικρινά πώς πηγαίνει - ορισμένοι πελάτες θέλουν συνδέσμους με γεννήτριες για να μάθουν για τον εαυτό τους αφού τους εντυπωσιάσετε. Συνήθως τους συνδέω Lynda , TeamTreehouse , και μερικές από αυτές τις γεννήτριες για καλό μέτρο.
Γεννήτρια κουμπιών CSS3
Αυτό είναι πραγματικά διασκεδαστικό. Σας δίνει ένα μεγάλο κουμπί για να χειριστείτε, δηλαδή σε ένα ρετρό χρώμα. Μπορείτε στη συνέχεια να χειριστείτε τη σκιά, τα σύνορα, το χρώμα και πάνω από αυτό σας δίνει τη δυνατότητα να επεξεργαστείτε το hover-over. Μου αρέσει αυτό γιατί είναι ένα που βρήκα λίγο πίσω όταν ήμουν για πρώτη φορά στο CSS, και πραγματικά μου έδωσε μια ιδέα για το τι μπορεί να κάνει. Τα ρυθμιστικά σύρετε και απόθεση είναι ιδανικά για ανθρώπους που είναι νέοι στις γλώσσες, επειδή μπορείτε να δείτε τι μπορείτε να κάνετε αμέσως. Τώρα, θα πω, δεν το χρησιμοποιώ ιδιαίτερα ιδιαίτερα - υπό το πρίσμα άλλων που έχουν προκύψει, αλλά είναι μια μεγάλη μνήμη.
Γεννήτριες εικόνων και ακτινών
Εικόνα συνόρων
Τίποτα δεν χτυπά border-image.com όταν πρόκειται να πάρει μια συγκεκριμένη εικόνα και στη συνέχεια να το αναπαραγάγει για να βρει το σωστό στυλ των συνόρων. Βεβαιωθείτε ότι δεν παραβιάζετε τα πνευματικά δικαιώματα αν και χρησιμοποιήστε την εικόνα κάποιου άλλου χωρίς απόδοση.
Αλλά ας πούμε ότι σχεδιάσατε ένα βέλος ή ένα τρίγωνο και θα θέλατε να βρείτε μια γεννήτρια για να την επαναλάβετε σε όλα τα σύνορα του site σας ή ακόμα και στα σύνορα ενός στοιχείου. Λοιπόν, τίποτα δεν είναι καλύτερο από αυτό το site όταν πρόκειται για την ανάγκη αυτή. Μπορείτε να χειριστείτε την μετατόπιση, το μέγεθος και την επανάληψη που έχει η εικόνα.
Μόλις φτάσετε στον ιστότοπο, θα δείτε μια εικόνα παράδειγμα που έχουν φορτωθεί, αλλά είναι πραγματικά πολύ πιο χρήσιμη από ότι η εικόνα έχει δείξει. Συχνά θα το χρησιμοποιήσω για σχέδια σε υπόβαθρα που θέλω να επαναλάβω και / ή να δούμε πώς θα φαινόταν πραγματικό γρήγορο, πριν να αναπαράγει στην πραγματικότητα το σύνολο του φόντου στο Photoshop. Μπορείτε να το χρησιμοποιήσετε για οτιδήποτε σχετίζεται με επαναλαμβανόμενες εικόνες, πραγματικά.
Ακτίνα ακρών
Αυτό είναι ένα μεγάλο και ελάχιστο μικρό εργαλείο, το οποίο συχνά βρίσκω πολύ πρακτικό. Με αυτό, το μόνο που κάνετε είναι απλά να ρυθμίσετε πόση στρογγυλεμένη άκρη θέλετε σε κάθε γωνία. Πολύ πρακτικό, πολύ απλό. Και στη συνέχεια, απλά ελέγξτε τι είδους πρόθεμα του προγράμματος περιήγησης θέλετε να συμπεριλάβετε και το boom έγινε. Είναι ένα πανέμορφο UI με κάθε ειλικρίνεια. Θα πρέπει να γίνονται εξετάσεις στα μαθήματα πληροφορικής, όπου το μόνο που κάνετε είναι να προσπαθήσετε να βρείτε κάτι τόσο απλό και λειτουργικό όσο αυτό είναι.
Γεννήτριες κλίσης CSS3
Χρώμα Zilla Gradient Editor
Αυτό χρεώνεται ως ο τελικός επεξεργαστής κλίσης CSS3, και για καλό δικαίωμα. Στην πραγματικότητα, είναι τόσο φοβερό ότι είναι ο μόνος επεξεργαστής κλίσεων που θα συμπεριλάβω εδώ. Έχει έναν τόνο χαρακτηριστικών και είναι πολύ εύχρηστο και εύκολο να το ξεκινήσετε. Απλά σύρετε γύρω από τα μαύρα και μπλε μολύβια λίγο και θα δείτε γρήγορα τι κάνουν. Κάνουν επίσης ένα πρόγραμμα περιήγησης στο Χρώμιο ή Firefox αυτό είναι πραγματικά χρήσιμο για τους σχεδιαστές που εργάζονται στο διαδίκτυο. Επίσης, φροντίστε να παίζετε με τις προεπιλογές σε αυτό, γιατί πολλές φορές αυτές είναι αρκετά καλές - ο καθένας που τους επέλεξε έκανε πολύ καλή δουλειά.
Τυπογραφικές γεννήτριες / συντάκτες
@fontface Generator
Αυτό είναι ένα πραγματικά ενδιαφέρον προϊόν. Αυτό που κάνει είναι ότι σας επιτρέπει να ανεβάζετε τις γραμματοσειρές που έχετε επιλέξει από τον ιστό ή να έχετε στον υπολογιστή και, στη συνέχεια, σας δίνει ένα αρχείο εξόδου που είναι έτοιμο να συνεργαστεί στο διαδίκτυο. Παίρνετε περισσότερα από ένα πράγματα όμως, μπορείτε να πάρετε μερικά πράγματα. Παίρνετε τις ιδιότητες CSS για @ γραμματοσειρά με δεδομένη τη γραμματοσειρά που επιλέξατε και ένα αρχείο HTML που εμφανίζει τη γραμματοσειρά και τις πολλές χρήσεις της. Είναι πραγματικά ένα σπουδαίο εργαλείο για να ελέγξετε το πλήρες δυναμικό της γραμματοσειράς εάν δεν είστε σίγουροι γι 'αυτό και ειδικά εάν δεν έχετε το χρόνο να δημιουργήσετε έναν ολόκληρο ιστότοπο με τη συγκεκριμένη γραμματοσειρά πριν λάβετε την απόφαση.
Αντίστροφη γεννήτρια CSS3
CSS3 Παρακαλώ
Αυτό είναι ένα πραγματικά συναρπαστικό προϊόν. Βασικά, αυτό που κάνει είναι ότι σας δίνει ένα σύνολο κιβωτίων, και όλα τα CSS για αυτό, και στη συνέχεια σας δίνει τη δυνατότητα να ενεργοποιήσετε και να απενεργοποιήσετε τις ενότητες για να δείτε τι κάνουν. Έτσι, μπορείτε ουσιαστικά να αντιστρέψετε το CSS3 για να μάθετε τι κάνει, και στη συνέχεια μπορείτε να δείτε τι κάνετε. Αυτός είναι ένας πολύ καλός τρόπος για να μάθετε το CSS3 αν σας ενδιαφέρει, αλλά πιστεύετε ότι οι γεννήτριες είναι λίγο πολύ περίπλοκες.
CSS3 Generators Shadow Drop
Γεννήτρια σκιών Webestools
Μου αρέσει πολύ αυτή η γεννήτρια σκιάς, επειδή πηγαίνει σε λεπτομέρεια και βάθος όσον αφορά τις σκιές που δεν είναι οι άλλες γεννήτριες. Μπορεί να μην μοιάζει με το καλύτερο σχεδιασμένο προϊόν ποτέ, αλλά είναι σίγουρα φοβερό. Έχει ένθετες σκιές, ξεκινώντας τις σκιές και την ικανότητα να χειριστεί τις αντισταθμίσεις, να ρυθμίσει τα χρώματα και να κάνει σχεδόν οτιδήποτε μπορεί να κάνει με τον κώδικα - αλλά με ένα ωραίο μπαρ. Ω, πόσο αγαπώ το τράβηγμα του μπαρ. Ελέγξτε αυτό το ένα αν θέλετε να δείτε γενικά τι μπορεί να μοιάζει με την ιδέα της σκιάς σας προτού να το κωδικοποιήσετε.
Γεννήτριες HTML5
Οι γεννήτορες HTML5 είναι δύσκολο να βρεθούν και ο λόγος για αυτό είναι πιθανώς εξαιτίας του μεγάλου Πίνακας ελέγχου HTML5 είναι. Δεν πρόκειται να μιλήσουμε γι 'αυτό, επειδή δεν είναι γενικά μια γεννήτρια, γι' αυτό θα το συνθέσω εδώ: Είναι βασικά ένα πρότυπο HTML5 που έχει ήδη συμπληρωθεί και είναι έτοιμο για να συνεργαστείτε, οπότε ελέγξτε εάν δεν το έχετε δει. Είναι πραγματικά φοβερό πραγματικά. Πολλοί άνθρωποι το χρησιμοποιούν ως αρχικό πρότυπο για τους ιστότοπούς τους και για καλό λόγο. Τώρα πίσω στις γεννήτριες. Η εύρεση ενός ποιοτικού είναι στην πραγματικότητα αρκετά δύσκολη, αλλά κατάφερα να βρω μερικά εδώ που θα δείξω - και έπειτα έχω και άλλες γενικευμένες που αγγίζουν όλα τα θέματα αυτού του άρθρου.
Shikiryu HTML5 Generator
Η γεννήτρια HTML5 του Shikiryu είναι πολύ πιο περίπλοκη. Μπορείτε να προσθέσετε λειτουργίες που σας επιτρέπουν να κάνετε πράγματα μέσα στο Blueprint (mixins κ.λπ.) και φανταχτερό - έτσι είναι πραγματικά πολύ χρήσιμο. Μου αρέσει επειδή είναι λίγο πιο σημασιολογική από τις άλλες επιλογές, και ταυτόχρονα σας επιτρέπει να προσθέσετε πραγματικά δημοφιλείς εφαρμογές τρίτων που οι άνθρωποι αγαπούν να χρησιμοποιούν.
Μεταβείτε στη γεννήτρια HTML5
Αυτή είναι μια ενδιαφέρουσα γεννήτρια. Αυτό που κάνει είναι ότι σας επιτρέπει να δημιουργήσετε ένα γρήγορο και εύκολο πλαίσιο για εργοτάξια, αλλά σε αντίθεση με το Boatplate HTML5, μας επιτρέπει να επιλέγουμε ακριβώς ποιοι επιλογείς θα προτιμούσαμε να δούμε στο πλαίσιο μας. Στην πραγματικότητα έχω την τάση να το χρησιμοποιήσω για να δημιουργήσω κώδικα αντί για Bootplate HTML5 όταν χρειάζομαι μερικούς περισσότερους επιλογείς ή αντικείμενα από αυτά που προσφέρει. Τώρα, δεν ακολουθεί ακριβώς όλες τις όμορφα σχεδιασμένες αρχές της σημασιολογικής σήμανσης - όπως το HTML5 Boilerplate - αλλά κάνει μια αρκετά καλή δουλειά και μπορείτε να μπείτε και να κάνετε τα υπόλοιπα εάν θέλετε πραγματικά να το χρησιμοποιήσετε.
Quackit HTML5 Generator
Αυτό το ένα κάνει ένα βήμα πίσω, και αντί να σας δώσει ακριβώς μια ομάδα κώδικα που είναι αρκετά γενική και βασική, σας επιτρέπει να εισάγετε όλες τις δικές σας πληροφορίες. Αυτό είναι πραγματικά χρήσιμο και έχω βρει ότι άλλοι που είναι νεότεροι στους ιστότοπους αγαπούν πραγματικά. Αγαπούν ιδιαίτερα αυτό, έχω βρει, δεδομένου ότι παράγει το πρότυπο HTML βάση για να μπορείτε να κάνετε εμφάνιση όμως επιθυμείτε με το CSS. Αν λοιπόν μαθαίνεις CSS και εξακολουθείς να είναι λίγο θολό σε HTML (αν και δεν είσαι σίγουρος γιατί θα ήταν έτσι) τότε μπορείς να το κάνεις αυτό.
Και αυτό θα το βάλουμε στο τέλος. Αυτές οι γεννήτριες είναι απλά καταπληκτικές για να εργάζεστε με γρήγορο και ευέλικτο τρόπο, αλλά αντί για επιχειρηματίες, είστε για σχεδιαστές. Και αυτό είναι πολύ λαμπρό κατά τη γνώμη μου. Έχετε μια γρήγορη ιδέα για μια ακτίνα ακτίνας (tab'd ίσως;), ή μια σκιά, ή μια κλίση χρώματος, ή ένα πρότυπο html5 με σχέδιο συμπεριλαμβάνεται - καλά αυτά είναι ακριβώς για σας τότε. Σημειώστε ότι αυτό δεν ήταν μια εξαντλητική λίστα, αλλά ήταν μερικά από τα αγαπημένα μου και αυτά που χρησιμοποίησαν οι συνάδελφοί μου στο παρελθόν. Μου αρέσει πραγματικά να χρησιμοποιώ πολλά από αυτά, και ελπίζω να το κάνετε και εγώ.