5 Cool CSS3 εφέ θα δείτε περισσότερα

Διαφήμιση

Το CSS3 (σε συνδυασμό με τη δύναμη του HTML5) υποστηρίζεται γρήγορα από όλα τα μεγάλα προγράμματα περιήγησης (διαβάστε - οτιδήποτε εκτός του Internet Explorer), έτσι σκέφτηκε ότι τώρα θα ήταν μια καλή στιγμή για να δείτε μερικά από τα δροσερά εφέ CSS που μπορούμε να επιτύχουμε χρησιμοποιώντας τη δύναμη του browser σας και έναν μικρό κώδικα CSS. Θα πρέπει να μπορείτε να δείτε όλα τα εφέ που παρουσιάζονται σε αυτό το άρθρο αν χρησιμοποιείτε το πιο πρόσφατο πρόγραμμα περιήγησης Chrome, Safari ή Firefox.

Πρώτον - Τι είναι το CSS;

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

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

Στρογγυλεμένες γωνίες

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

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-ακτίνα-ακτίνα: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / οριακή ακτίνα: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Σκιά κειμένου

Εδώ είναι ο κώδικας για ορισμένες σκιές κειμένου:

.box_textshadow {κείμενο-σκιά: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Διαβαθμίσεις

Εδώ είναι ο κώδικας για τις κλίσεις CSS:

.box_gradient {χρώμα-φόντο: # 3f9fe3; εικόνα-φόντου: -moz-linear-gradient (κορυφή, # 3f9fe3, #white); / * FF3.6 * / υπόβαθρο: -moz-γραμμική-κλίση (κορυφή, # 1Ε5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%). / * firefox * / φόντο-εικόνα: -ms-γραμμική κλίση (κορυφή, # 3f9fe3, #white); / * IE10 * / εικόνα φόντου: -ο-γραμμική-κλίση (κορυφή, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (γραμμική, αριστερή κορυφή, αριστερά κάτω, από (# 3f9fe3), σε (#white)); / * Saf4 +, Chrome * / φόντο-εικόνα: -webkit-γραμμική κλίση (κορυφή, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / εικόνα φόντου: γραμμική κλίση (κορυφή, # 3f9fe3, #white); φίλτρο: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# άσπρο'); / * IE6-IE9 * / }

Περιστροφή

Εδώ ο κώδικας για να περιστρέψετε κάτι:

.box_rotate {-moz-transform: περιστρέψτε (7.5deg); / * FF3.5 + * / -o-μετασχηματισμός: περιστροφή (7.5deg); / * Opera 10.5 * / -webkit-transform: περιστρέψτε (7.5deg); / * Saf3.1 +, Chrome * / -ms-μετασχηματισμός: περιστροφή (7.5deg); / * IE9 * / μετασχηματισμός: περιστροφή (7.5deg); φίλτρο: progid: DXImageTransform. Microsoft. Matrix (/ * ΙΕ6-ΙΕ9 * / Μ11 = 0.9914448613738104, Μ12 = -0.13052619222005157, Μ21 = 0.13052619222005157, Μ22 = 0.9914448613738104, sizingMethod = 'αυτόματη επέκταση'). ζουμ: 1; }

Κινουμένων σχεδίων

Θα χρειαστείτε αυτόν τον κωδικό μετάβασης σε οποιοδήποτε στοιχείο θέλετε να αλλάξετε. Θα χρειαστεί επίσης να χρησιμοποιήσετε μερικές κλάσεις ψευδο-CSS (όπως: μετακινήστε το δείκτη του ποντικιού για να αλλάξετε τις ιδιότητες που θέλετε να κινούμαστε, όπως χρώμα, μέγεθος ή περιστροφή)

.box_transition {-moz-transition: όλα 0.5s ease-out? / * FF4 + * / -o-μετάβαση: όλα 0.5s ease-out? / * Opera 10.5+ * / -webkit-transition: όλα 0.5s ease-out? / * Saf3.2 +, Chrome * / -ms-transition: όλα 0.5s ease-out? / * IE10; * / μετάβαση: όλα 0.5s ease-out? } 

Ασυμβατότητες διασταυρούμενων προγραμμάτων περιήγησης

Αν και τα περισσότερα σύγχρονα προγράμματα περιήγησης υποστηρίζουν όλα τα CSS3 με κάποιους τρόπους, ορισμένοι εξακολουθούν να χρειάζονται κάποιο ελαφρώς διαφορετικό κώδικα ή hacks για να λειτουργήσουν με τη συγκεκριμένη εφαρμογή του προτύπου. Στον παραπάνω κώδικα για παράδειγμα, θα δείτε πολλές περιπτώσεις -moz- ή -webkit- να προχωρήσουν μερικές από τις ιδιότητες του CSS, οι οποίες σχετίζονται είτε με browsers που βασίζονται στο Mozilla είτε με βάση το Webkit. Γράφοντας αυτές τις έξτρα γραμμές μπορεί να είναι πόνου όμως, οπότε ελέγξτε το css3 γεννήτρια να τα γράψω για εσάς.

συμπέρασμα

Ο ιστός πρόκειται να πάρει μια πολύ πιο συναρπαστική με τις νέες επεκτάσεις CSS3 και HTML5. Χορηγηθεί, θα δούμε μια άλλη ώθηση από το κείμενο που αναβοσβήνει και μια υψηλή αναλογία whiz-bang στο πραγματικό περιεχόμενο (όπως ακριβώς κάναμε όταν τα κινούμενα GIF πρώτα "ανακαλύφθηκαν") αλλά μακροπρόθεσμα θα μάθουμε πώς να χρησιμοποιήσουμε τα εργαλεία του CSS3 για να κάνουμε πιο ενδιαφέροντα τον ιστό διεπαφές. Και hey, μπορείτε πάντα να το απενεργοποιήσετε!

Αν είστε ο ίδιος σχεδιαστής ή προγραμματιστής ιστού, θυμηθείτε ότι το CSS3 δεν πρέπει ποτέ να είναι η μόνη επιλογή. Αν ο ιστότοπός σας δεν λειτουργεί χωρίς CSS3, δεν το έχετε χρησιμοποιήσει σωστά. Το CSS θα πρέπει να χρησιμοποιείται για την ενίσχυση της εμπειρίας, όχι της λειτουργίας του προγράμματος.