Κωδικοποίηση Kung-fu 35 Γραφικά που χτίζονται καθαρά με το CSS3

Κοιτάξτε τα παρακάτω γραφικά, το awesome Photoshop λειτουργεί σωστά; Να, δημιουργούνται από το CSS3. Ναι, είναι εντελώς “συλληφθεί” από το CSS3! Όταν έχουμε δει αρκετά animations CSS3, σκεφτήκαμε ότι όλα αυτά μπορούν να κάνουν το CSS3 ως πιθανός δολοφόνος Flash, αλλά κάνουμε λάθος. Οι προγραμματιστές ίσως δεν ικανοποιούν με τη διασκέδαση της κινούμενης εικόνας, έτσι και πάλι, ωθούν τα όρια του CSS3 για να αμφισβητήσουν τη σφαίρα του γραφικού συντάκτη.

Με αυτό το post έρχονται 35 προσεκτικά σχεδιασμένα CSS3 γραφικά που περιλαμβάνουν ακόμη και κάτι που δεν θα σχετίζονταν με CSS3 όπως Apple iPhone, χαρακτήρας κινουμένων σχεδίων Doraemon, και περισσότερες εκπλήξεις! Heck, μερικοί από αυτούς έρχονται ακόμη και με λεπτομερή φροντιστήριο που σας διδάσκει πώς να το επιτύχετε! Έτσι, μην χάσετε τη μεγάλη ευκαιρία να μάθετε να δημιουργείτε γραφικά χρησιμοποιώντας το CSS3 και λίγο HTML, ας πάμε άτακτα με το CSS3!

Σας συνιστούμε να δείτε αυτές τις παρουσιάσεις χρησιμοποιώντας την τελευταία έκδοση της έκδοσης Safari ή Developer του Google Chrome. Ωστόσο, τα περισσότερα demos υποστηρίζουν την τελευταία έκδοση του Firefox και του Google Chrome.

Εικονίδιο ροής RSS

RSS Feed Εικονίδιο που χτίστηκε με CSS3, αποκλειστικά από το Hongkiat! Μαζί με το σύνδεσμο έρχεται ένα φροντιστήριο στο οποίο μπορείτε πραγματικά να μάθετε “σχεδιάζω” το εικονίδιο RSS Feed χωρίς να χρησιμοποιήσετε ούτε μία εικόνα. Δημιουργήστε το θαύμα CSS3 με τα χέρια σας!

Apple iMac

Ναι, τα μάτια μου δεν μπορούν να το πιστέψουν, αλλά είναι το iMac “συναρμολογημένο” καθαρά με το CSS3.

Πληκτρολόγιο της Apple

Είναι το πληκτρολόγιο της Apple που είναι κατασκευασμένο με CSS3! Heck, τα πλήκτρα του πληκτρολογίου μπορούν ακόμη και να πατηθούν.

Apple iPhone

Α, ένα ακόμα πράγμα: iPhoneCSS3.

άνθος κερασιάς

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

Φλυτζάνι καφέ

Μια κουραστική μέρα; Ας πάρουμε έναν καφέ CSS3, ο οποίος σερβίρεται καλύτερα με το Safari / Google Chrome.

Doraemon

Αυτό το Doraemon είναι διάσημο για δοκιμές συμβατότητας CSS3. Δοκιμάστε το στον Internet Explorer 8 ή παρακάτω και κάντε μια ωραία μέρα.

Meowww!

Τώρα κοιτάζετε μια γάτα χτισμένη εντελώς με κώδικα! Πολύ κακό, το CSS3 δεν μπορεί να δημιουργήσει ηχητικά εφέ, τουλάχιστον για τώρα.

Μανιτάρια, Triforce, Poké, Kirby

“Όντας ένας αδελφός, έχω κάνει μερικές δύσκολες δημιουργίες - ένα μανιτάρι Mario, το Triforce, ένα Pokéball, και ο Kirby. Για όσους χρησιμοποιούν φυλλομετρητές δεινοσαύρων, υπάρχει ένα στιγμιότυπο οθόνης για αυτό που θα έπρεπε να μοιάζει.”

Nyan Cat

“Περιέχει 81 στοιχεία DOM, 688 γραμμές καθαρού CSS και μία λειτουργία JavaScript για βρόχο ήχου. Το CSS μου αποτυγχάνει στη δοκιμασία CSSLint και είμαι πραγματικά περήφανος για αυτό.”

Μοτίβα

Το CSS3 είναι τόσο μεγάλο που μπορεί επίσης να χρησιμοποιηθεί για την οικοδόμηση θεμελιώδους στοιχείου για το σχεδιασμό ιστοσελίδων, όπως αυτά τα μοτίβα.

Ζαχαρωτό

Τα BonBon είναι γλυκά κουμπιά CSS3 που έχουν δημιουργηθεί με στόχο: σέξι εμφάνιση, πραγματικά εύκαμπτα κουμπιά με το πιο μινιμαλιστικό markup όσο το δυνατόν.

iOS εικονίδια

Φοβερο? Ναί. Αυτά τα εικονίδια είναι κατασκευασμένα από στρογγυλεμένες γωνίες, σκιές, κλίσεις, rgba, ψευδο-στοιχεία, και μετασχηματίζει, με τη βοήθεια ορισμένων εργαλείων όπως τα εργαλεία του Westciv και η ακτίνα ακρών.

Εικόνες κοινωνικών μέσων

Αυτό είναι αδύνατο για τον προγραμματιστή ιστού να μην δημιουργήσει εικονίδια κοινωνικών μέσων εάν μπορούν να δημιουργήσουν το iPhone και το Doraemon με το CSS3. Και έχτισαν πραγματικά τέτοιες εικόνες.

Εικόνες κοινωνικών μέσων

Ένα άλλο σύνολο εικονιδίων κοινωνικών μέσων που δείχνουν τις δυνατότητες του CSS3 στη δημιουργία χρησιμοποιήσιμων εικονιδίων.

Ιδιόμορφος

“Το Peculiar είναι ένα πακέτο δωρεάν εικονιδίων που γίνεται μόνο σε CSS. Δημιουργήθηκε για ιστότοπους και εφαρμογές ιστού που εξαρτώνται από λιγότερες αιτήσεις HTTP όσο το δυνατόν ή δεν χρειάζεται να χρησιμοποιήσουν καθόλου εικόνα.”

GUI εικονίδια

84 απλά εικονίδια GUI που χρησιμοποιούν μόνο CSS και σημασιολογική HTML. Αυτό εξακολουθεί να θεωρείται ως “μη έτοιμη για παραγωγή” εικόνες, αλλά φαίνονται πολύ ελπιδοφόρα.

Ο Steve Jobs

Ο Steve Jobs δεν είναι μόνο η εικόνα της ψηφιακής εποχής, αλλά και ο ηγέτης που προωθεί σημαντικά το HTML5.

Αποτυχία φαλαινών Twitter

Η αποτυχημένη φάλαινα του Twitter δεν θα σας εκπλήξει, εκτός από τον Internet Explorer 8 ή μεταγενέστερο.

umbrUI

Στοιχεία διεπαφής χρήστη που έγιναν δυνατά με το CSS3 και μοιάζουν πολύ κομψά!

Λογότυπο του Adobe Photoshop

Ένα αφιέρωμα στο Photoshop χωρίς τη χρήση του Photoshop.

Λογότυπο Android

Το Android αποτελείται από αρκετά απλά σχήματα, αλλά εξηγεί το πλεονέκτημα του CSS3: μπορείτε να κάνετε απλά πράγματα και να τα τροποποιήσετε όποιο τρόπο θέλετε, χρησιμοποιώντας μόνο τον κώδικα, αλλά όχι το Photoshop.

Λογότυπο της Apple

Λογότυπο της Retro της Apple που παρουσιάστηκε με χρήση του CSS3, ακόμα φοβερό με το χρόνο που δημιουργήθηκε.

Λογότυπο Atari

Πριν από χρόνια, ποιος θα πίστευε ότι το λογότυπο Atari θα δημιουργηθεί ξανά χρησιμοποιώντας το CSS3.

Λογότυπο BP

Το απλό λογότυπο μπορεί να γίνει εύκολα με το CSS3. Το καλύτερο πράγμα με μερικά από αυτά τα λογότυπα που εμφανίζονται εδώ είναι ότι υπάρχει κώδικας για να δοκιμάσετε!

Λογότυπο Dribbble

Διάσημος χώρος παρουσίασης με προβολή από το χρήστη Το λογότυπο του Dribbble παρουσιάστηκε χρησιμοποιώντας το CSS3.

Λογότυπο Magento

Το λογότυπο του Magento δεν είναι πολύ δύσκολο να τραβήξει, αλλά το αποτέλεσμα φαίνεται επαγγελματικό.

Λογότυπο McDonald

Αγαπάω το CSS3!

Twitter Bird

Τέλεια αναλογία, καπέλο άκρη στο δημιουργό.

Λογότυπο των Windows

Λογότυπο των Windows! Φαίνεται πραγματικά φοβερό, και είναι εύκολο να δημιουργηθεί!

Λογότυπο του Internet Explorer

Πραγματικά μεγάλη δημιουργία! Λειτουργεί σε μεγάλα προγράμματα περιήγησης εκτός από τον Internet Explorer 8 ή νεότερη έκδοση.

Λογότυπο Google Chrome

Δεν είμαι σίγουρος ότι αγαπάτε το νέο λογότυπο του Google Chrome ή όχι, αλλά αυτό το λογότυπο CSS3 Google Chrome μοιάζει φοβερό!

Λογότυπο της Όπερας

Τώρα μια πρακτική για σας: ποιες είναι οι διαφορές μεταξύ αυτού του κομμάτι CSS3 και της πραγματικής συμφωνίας?

Λογότυπο HTML5

Το HTML5 δεν μπορεί να λάμψει χωρίς CSS3!

Λογότυπο της Volkswagen

Εκτός από το συνδυασμό χρωμάτων, αυτός ο κλώνος CSS3 μοιάζει με τον αρχικό.

Αντανάκλαση

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

Γενικά το γραφικό CSS3 είναι καλό, αλλά αυτό μπορεί να ενοχλητικό ειδικά όταν πρέπει να αλλάξετε το σχέδιο ή απλά να αλλάξετε το μέγεθος του γραφικού, επίσης ο μεγαλύτερος πόνος εδώ είναι ότι η τεχνολογία δεν υποστηρίζεται ακόμη πλήρως από ορισμένα προγράμματα περιήγησης όπως ο Internet Explorer.

Τι νομίζετε; Θα χρησιμοποιήσετε το γραφικό που δημιουργήθηκε με το CSS3 στον ιστότοπό σας; Έχετε κάποια λύση για τα τρέχοντα μειονεκτήματά της; Ενημερώστε μας για τη σκέψη σας και μοιραστείτε μαζί μας εάν μόλις βάλατε ένα γραφικό CSS3!

Περισσότερο

Θέλετε να κάνετε κάτι με το CSS3; Έχετε έρθει στο σωστό μέρος! Παρακάτω είναι οι οδηγοί και τα σεμινάρια που γράφονται για να σας βοηθήσουν σε μεγάλο βαθμό στο δρόμο σας για mastering του CSS3.

• CSS3: Δημιουργία ενός μενού πλοήγησης Breadcrumb
• CSS3: Δημιουργήστε ένα λογότυπο RSS Feed
• CSS3: Δημιουργία πλαισίου αναζήτησης
• CSS3: Οδηγός για αρχάριους
• CSS3 / HTML5: Δημιουργία ιστοσελίδων
• CSS3 / HTML5: Δημιουργήστε μια φόρμα επικοινωνίας που βασίζεται στο AJAX