10 από τις πιο cool CSS3 και CSS Effects
Το γνωρίζουμε όλοι και το αγαπάμε όλοι, και φυσικά μέχρι τώρα ίσως ήδη γνωρίζετε ότι μιλάω για CSS και CSS3.
Στην πραγματικότητα, ίσως πρέπει να αφιερώσουμε λίγο χρόνο για να ευχαριστήσουμε το CSS3, προτού προχωρήσουμε περαιτέρω για την επιτάχυνση των ωρών φόρτωσης για όλους τους αγαπημένους σας ιστότοπους. Αυτοί, αν ξέρουν τι κάνουν, είναι πολύ πιθανό να χρησιμοποιούν το CSS3 στη θέση ενός τόνου εικόνων για να βελτιώσουν τους χρόνους φόρτωσης των χρηστών, κάτι που είναι πολύ φοβερό.
Είναι απολύτως αποδεκτό το γεγονός ότι απλά δεν χρειαζόμαστε εικόνες για να κάνουμε όλα τα πράγματα που τα χρησιμοποιούσαμε. Με τις διαβαθμίσεις του CSS3, τις μεταβάσεις και όλα τα εφέ, φαινόταν να έχει πάρει πολύ βάρος από τους ώμους των ιστοσελίδων μας, γιατί ας είμαστε ειλικρινείς - οι εικόνες σίγουρα τους βάρυναν κάτω.
Μην το συγχέετε όμως, το CSS3 και το CSS δεν μπορούν να κάνουν τα πάντα αλλά, ειρωνικά, αμφιβάλλω ότι οι περισσότεροι από εμάς γνωρίζουν τους περιορισμούς του ή τι ωθεί τις άκρες των δυνατοτήτων του.
Λοιπόν, σήμερα είμαστε εδώ για να το βρούμε αυτό. Ας μπει λοιπόν σε αυτό που σίγουρα θα είναι ένα ενδιαφέρον και συναρπαστικό ταξίδι της ανακάλυψης για όλους εμάς που είναι οπαδοί των CSS3 και CSS.
Σημείωση: Κάνατε όλα αυτά με το τεκμήριο ότι κάποιος χρήστης βρίσκεται στο Google Chrome, οπότε παρακαλώ για την αγάπη όλων όσων είναι ιεροί πριν την πραγματική εφαρμογή αυτών στον ιστότοπό σας, χρησιμοποιήστε τα κατάλληλα προθέματα για άλλα προγράμματα περιήγησης. Μην αντιγράφετε και επικολλάτε από εδώ και πιστεύετε ότι όλα θα δουλέψουν τέλεια, γιατί μπορεί - αλλά δεν μπορεί.
Εφέ που βασίζονται σε κείμενο
Αναγλύφων
Λένε ότι οι Anaglyphs, ακόμα και όταν γίνονται στο CSS3, μπορούν να εμφανιστούν σε 3D, αν έχετε κάποια γυαλιστικά γυαλιά στο σπίτι σας. Αυτό όμως δεν είμαι σίγουρος, αλλά αυτό που ξέρω είναι ότι μπορεί να φανεί φοβερό για ορισμένα θέματα για διάφορα έργα (όπως ένα θέμα ρετρό βίντεο και παρόμοια).
Αυτό το εφέ δημιουργείται με την αντιστάθμιση δύο από τα κόκκινα πράσινα και μπλε χρώματα (rgb). Για να ξεκινήσουμε τα πράγματα για αυτό το αποτέλεσμα χρειαζόμαστε δύο από τις ίδιες λέξεις και τους χρειαζόμαστε και οι δύο για να μπορέσουμε να στοχεύσουμε στο CSS, έτσι ώστε να μπορέσουμε να δουλέψουμε σε αυτά την επανάληψη και τη μαγεία των χρωμάτων. Σε αυτήν την περίπτωση όμως, αντί να προσθέσουμε περιττές HTML στην ετικέτα που χρησιμοποιούμε για αυτές τις λέξεις, μπορούμε απλά να χρησιμοποιήσουμε την ψευδο-τάξη "after" για να προσθέσουμε τη δεύτερη λέξη. Για να το κάνουμε αυτό θα χρησιμοποιήσουμε αυτό το παράδειγμα: φανταστείτε ότι χρησιμοποιούμε μια H1 για να εμφανίσουμε την πρώτη μας λέξη, όπως:
Anaglyph
Θα κάνουμε τότε:
h1:after {content: “Anaglyph”;}Αυτό θα μας δώσει αυτή την ωραία επανάληψη και θα εμφανίσει: "Anaglyph Anaglyph" στη σελίδα. Έτσι, τώρα ας αρχίσουμε να το στυλ αυτό ώστε να μπορούμε να πετάξουμε σε κάποια από αυτά τα φανταχτερά 3D ομορφιά.
h1 {display: inline;position: relative;letter-spacing: -5px; /* This will push it together giving us a nice 3D vibe */color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */}h1:after {content: “Anaglyph”;position: absolute;left: 8px; top: 6px; /* These are aligning it to be where we’d like relative to the last word */color: rgba (255,0,0,0.5); /* This gives us a red at 50% opacity */}Η χρήση του RGBA εδώ είναι πολύ σημαντική επειδή επιτρέπει τη ρύθμιση μιας διαφάνειας άλφα έτσι ώστε το επικαλυμμένο κείμενο να μην αποκλείει τελείως το κείμενο κάτω από αυτό και μας δίνει μια ωραία διαφάνεια. Το κείμενο στο μετά ψευδο στοιχείο μετά τοποθετείται απολύτως να είναι ελαφρώς μετατοπισμένο από το υποκείμενο κείμενο όπως μπορείτε να δείτε, και αυτό είναι πολύ σημαντικό επίσης.
Φροντίστε να παίζετε με αυτές τις θέσεις λίγο όπως θα θέλατε και να δοκιμάσετε διάφορα χρώματα, γιατί υπάρχει μεγάλη διασκέδαση που πρέπει να έχετε εδώ. Αλλά για να τελειώσουμε αυτό το αποτέλεσμα μέχρι να πετάξουμε πάνω στην κόκκινη επικάλυψη, και voila έχουμε το αναγλυφικό αποτέλεσμα μας.
Κλίσεις κειμένου
Οι κλίσεις CSS3 φαίνεται να είναι όλη η οργή αυτές τις μέρες, και σωστά. Όπως συζητήσαμε νωρίτερα, ήταν κάτι που στο παρελθόν ήταν διαθέσιμο μόνο από κάτι σαν το Photoshop και την ενσωμάτωση εικόνων στον ιστότοπό σας. Τώρα, όμως, μπορείτε να το κάνετε όλα μέσα από ένα κομμάτι της CSS3 μαγεία.
Και σημειώνοντας, με ξόρκια που δεν είναι πολύ περίπλοκα σε αυτό. Ας δούμε, λοιπόν, τι πρέπει να προσφέρουμε εδώ στην κατηγορία της κλίσης των γραμματοσειρών και πώς να αποκομίσουμε κάποια μαγεία μέσα σε αυτήν.
Γραμμική, από πάνω προς τα κάτω:
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#00000), to(#FFFFFF));Γραμμική, από αριστερά προς τα δεξιά:
-webkit-linear-gradient(left, #000000, #FFFFFF);Γραμμική κλίση (με ομοιόμορφη διακοπή χρώματος):
-webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color-stop(0.75, #1a82f7), to(#FFFFFF));Radial Gradient:
-webkit-radial-gradient(circle, #000000, #FFFFFF);Ακτινωτή κλίση (θέση):
-webkit-radial-gradient(80% 20%, closest-corner, #000000, #FFFFFF);Ας δούμε λοιπόν ένα παράδειγμα εδώ, και ας αρχίσουμε με h1.
CSS3 Gradient
Στη συνέχεια, ας αρχίσουμε να το στυλ με ένα κομμάτι της μαγείας του CSS3:
h1 {font-size: 100px;font-family: somethingfancy_or_not, arial; /* These two can be anything you like *//* Here’s where the fun starts */-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to (rgba(0,0,0,1)));}h1:after {content: “CSS3 Gradient”;color: #d6d6d6;text-shadow: 1px 2px 5px #000;Τώρα, μην συγχέεται με την ποσότητα παρένθεσης που χρησιμοποιείται στις ρυθμίσεις RGBA, καθώς μπορεί συχνά να συγχέουν ακόμα και τους πιο έμπειρους προγραμματιστές και όλοι θα ξεχάσουμε και θα τους καταργήσουμε κατά περιόδους, γι 'αυτό να θυμάστε ότι είμαστε όλοι άνθρωποι .
Αλλά επιτρέψτε μου να καταρρίψω αυτό που συμβαίνει εδώ. Εδώ χρησιμοποιούμε μια εικόνα μάσκας ως τρόπο για να κόβουμε το ορατό τμήμα του στοιχείου σύμφωνα με τη διαφάνεια της εικόνας της μάσκας. Στη συνέχεια, χρησιμοποιούμε το ψευδο-στοιχείο μετά, για να δώσουμε μια ωραία σκιά κειμένου στο στοιχείο μας.
Αυτό δεν είναι φυσικά απαραίτητο για μια διαβάθμιση, αλλά είναι ένας καλός τρόπος για να ξεφλουδίσετε είναι αυτό που συμβαίνει και σίγουρα σας επιτρέπει να δείτε πόσο μακριά μπορούμε να τεντώσουμε μια απλή κλίση. Τώρα, πηγαίνετε αγκαλιά και παίζετε με όλα τα στυλ των κλίσεων και σιγουρευτείτε ότι θα βρεθείτε με κάτι κομψό για το επόμενο έργο σας.
Βγάζοντας το κείμενο
Ένα από τα λίγα πράγματα που πολύ σπάνια χρειαζόμαστε, αλλά στην πραγματικότητα μπορούμε να σκεφτούμε είναι ενδιαφέρον να κτυπήσουμε κείμενο για να φανεί σαν να καταρρέει με τα γράμματα ανέπαφα. Μερικές φορές αυτό μπορεί να οφείλεται στο γεγονός ότι είμαστε εμμονή με βαμπίρ και θέλουμε το κείμενο να αιμορραγεί το κόκκινο αίμα της εκδίκησης, Ή θα μπορούσε απλώς να είναι απλώς και μόνο επειδή θέλουμε να στάζει ένα ελαφρύ νερό, όπως διαβάζουμε. Μερικές φορές έχω δει ακόμη και ανθρώπους να το χρησιμοποιούν με στοιχεία div καθώς η σελίδα κυλάει από επιφάνεια σε υποβρύχιο στυλ, όπου οι υποβρύχιες περιοχές είναι πολύ πιο βαριές στη θολή τους και ως εκ τούτου φαίνεται να στάζουν λίγο (ή φαίνεται να είναι υποβρύχιο).
Η σύνταξη γι 'αυτό είναι πολύ απλή, οπότε θα την αφήσω με την περίπλοκη εξήγηση - αλλά θα σας δώσω μια εισαγωγή για το πώς να το κάνετε σε μια πρόταση. Όλα βασίζονται στην επανάληψη. Λοιπόν, ας πούμε ότι θέλετε να στάξετε αρκετά μακριά, καλά θα χρησιμοποιούσαμε περίπου 15 σκιές κειμένου σε διάφορες y offset για να έχουμε αυτό το αποτέλεσμα. Αν θέλουμε μόνο λίγους, τότε θα χρησιμοποιούσαμε μόνο μερικούς με μικρότερες αντισταθμίσεις. Ένα παράδειγμα που χρησιμοποιεί ένα κόκκινο vampiric αποτέλεσμα θα είναι:
.drip {color: #EEE;text-shadow: 4px 4px 1px #300000;4px 6px 1px #400000; 4px 8px 1px #500000; /*......and so on, until*/ 4px 60px 5px #FF0000;}Βασικά, μπορείτε να κρατήσετε αυτό μέχρι να φτάσετε το επιθυμητό όριο (off-set του άξονα y) ή να εργαστείτε προς τα πίσω εάν θέλετε το αντίθετο και μια μικρότερη μετατόπιση. Ωστόσο, βεβαιωθείτε ότι δεν το χρησιμοποιείτε υπερβολικά - επειδή, όπως είπα, αυτό είναι ένα πολύ ασυνήθιστο αποτέλεσμα και ένα που είμαι σίγουρος ότι δεν υπάρχουν τόνοι υποθέσεων χρήσης για. Προσπαθήστε όμως να το δοκιμάσετε σίγουρα, καθώς οι επαναλαμβανόμενες σκιές κειμένου είναι πολύ ενδιαφέρουσες.
Κομψά χαρακτηριστικά
Το ραμμένο βλέμμα
Αν δεν θέλετε να χρησιμοποιήσετε το Photoshop ή το jQuery για να πάρετε κάποια τρελά εφέ, τότε το CSS3 είναι ίσως το επόμενο καλύτερο στοίχημά σας. Τώρα, φυσικά, ο καθένας μπορεί να πετάξει ένα διακεκομμένο σύνορο σε ένα κομμάτι περιεχομένου ή ένα div και να πει ότι είναι ραμμένο, αλλά το πραγματικό κλειδί είναι να το χρησιμοποιήσει σε εφαπτομένη με μερικά άλλα χαρακτηριστικά CSS3 που πραγματικά το κάνουν να ξεχωρίζει σαν ένα κομψό add- επί.
Αυτό που πραγματικά θέλετε να κάνετε είναι να ρίξετε μια ωραία σκιά σταγόνας με μεγάλη ακτίνα διάδοσης. Ο λόγος είναι ότι θέλετε να πάρετε το χρώμα του φόντου να αιμορραγεί πέρα από τα σύνορα και για να το κάνετε αυτό ρυθμίζετε πραγματικά την ακτίνα διάδοσης (το τέταρτο στοιχείο). Για παράδειγμα, θα έκανα κάτι σαν:
.stitched_element {border: 2px dashed #ffffff;box-shadow: 0 0 0 8px #ff0030;}Αυτό θα σας δώσει ένα ωραίο αποτέλεσμα που οι άλλοι άνθρωποι φαίνεται να ξοδεύουν γραμμές και γραμμές άσκοπης CSS για να δημιουργήσουν. Στην πραγματικότητα, αυτό είναι ένα αποτέλεσμα όπου μπορεί να θέλετε να παίξετε με τη δημιουργία του στο Photoshop για πρώτη φορά, ακριβώς έτσι ώστε να καταλάβετε τη θεωρία πίσω από αυτό που κάνετε εδώ.
Έχω περάσει πιθανώς 6 ώρες στο Photoshop τον περασμένο μήνα παίζοντας με ραμμένα εφέ, γιατί ειλικρινά είναι πραγματικά διασκεδαστικό - και σας βοηθούν να καταλάβετε τι ακριβώς προσπαθείτε να κάνετε για να κάνετε το CSS.
Αυτό το φανταχτερό
Μπορείτε να ρωτήσετε τον εαυτό σας: "Όπου στον κόσμο οι άνθρωποι παίρνουν αυτά τα καταπληκτικά ampersands που βλέπω γύρω από όλη την ώρα." Μπορεί να έχετε ψάξει ακόμη και υψηλή και χαμηλή για ένα σε όλες τις τυποποιημένες γραμματοσειρές που συναντάτε και, όπως και εγώ, πιθανότατα δεν το βρήκα μέχρι να δεις κάποιον να γράφει γι 'αυτό. Ο λόγος είναι ότι είναι μια γραμματοσειρά που πρέπει να κάνετε άδεια χρήσης για να χρησιμοποιήσετε και γι 'αυτό πολλοί από εμάς προτιμούν τη γραμματοσειρά του ιστού ή τις τυποποιημένες εναλλακτικές λύσεις.
Μια από τις μεγάλες εναλλακτικές λύσεις σε ένα λειτουργικό σύστημα Mac OSX (έρχεται από προεπιλογή) είναι η πλάγια γραφή "Cochin". Εάν εναλλακτικά προτιμάτε μια γραμματοσειρά Google Web, ελέγξτε έξω Josefin Sans .
Ξέρω ότι αυτό δεν είναι αρκετά CSS3, αλλά είναι μια ωραία μικρή @ δράση γραμματοσειράς και σε αυτή την περίπτωση θα σας δημιουργήσω ένα σύνδεσμο για τη λήψη της γραμματοσειράς και τα πάντα. Τώρα, αυτή είναι μια γραμματοσειρά Google Web so σας δείχνουν πώς να το κάνετε αυτό στη σελίδα τους, αλλά είναι ωραίο να έχετε κατά νου ότι μπορείτε να συνδυάσετε τα δύο χαρακτηριστικά για την εργασία με τις γραμματοσειρές. Και για να διευκολύνω αυτό το χρόνο το έχω συμπεριλάβει στον κώδικα εδώ, και αυτό είναι απευθείας στη γραμματοσειρά που μας δίνει ένα φανταχτερό ampersand. Αλλά να είστε βέβαιος να παίξει με την πλάγια χρήση αυτών των γραμματοσειρών, δεδομένου ότι εκεί είναι όπου συνήθως θα πάρετε τις πραγματικά ενδιαφέρουσες χρήσεις.
@font-face {font-family: ‘Josefin Sans’;src: url(https://fonts.googleapis.com/css?family=Josefin+Sans);}Και εκεί πηγαίνετε. Λίγες σημειώσεις σχετικά με τη χρήση όμως. Όπως μπορείτε να πείτε από την παραπάνω εικόνα, αυτό είναι ένα πολύ "φανταχτερό" ampersand και είναι καλύτερο να χρησιμοποιείται όταν αντιπαραβάλλετε δύο πρόσωπα γραμματοσειράς, ή σε γαμήλιες προσκλήσεις ή άλλα "φανταχτερά" γεγονότα. Το έχω χρησιμοποιήσει και σε πολύ μοντέρνα κομμάτια σχεδιασμού, αλλά δεν νιώθω ότι δεν μπορείτε να το χρησιμοποιήσετε επειδή κάνετε κάτι σύγχρονο. Λέω απλά ότι δεν μπορεί να είναι η τέλεια λύση «grunge» αν αυτό είναι αυτό που πηγαίνετε. Πρέπει να πω, όμως, μεταξύ ενός τολμηρού και ενός λεπτού τύπου, αυτό το ampersand φαίνεται όμορφο.
Μονόπλευρη σκιά κουτιού
Όλοι γνωρίζουμε και αγαπάμε τις σκιές κουτιού, αλλά μερικές φορές η τυπική σκιά μπορεί να μην είναι ακριβώς αυτό που θέλουμε. Για παράδειγμα, μερικές φορές μπορεί να κάνουμε μια ρεαλιστική σκίαση ενός συγκεκριμένου στοιχείου στον ιστότοπό μας και να θέλουμε η σκιά να εμφανίζεται μόνο μία συγκεκριμένη πλευρά. Ή ίσως να ενδιαφέρουμε να κάνουμε ένα στοιχείο hover ή ένα στοιχείο αναπήδησης και ας το παραδεχτούμε - τίποτα δεν ενισχύει την ομορφιά σαν σκιά μονής όψης κουτιού.
Αυτό που κάνουμε εδώ είναι πολύ απλό στην πραγματικότητα, θα χρησιμοποιήσουμε αρνητική ακτίνα εξάπλωσης για να συμπιεστήσουμε τη σκιά κουτιού από μια άκρη. Έτσι, για παράδειγμα, ας φανταστούμε ότι έχουμε ένα γκρι στοιχείο κιβωτίου και είναι ρυθμισμένο με πλάτος και ύψος 40px έως 40px. Το CSS θα μοιάζει με:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}Αυτό θα μας δώσει ακριβώς αυτό που χρειαζόμαστε και σε μια απλοποιημένη γραμμή κώδικα σε αυτό. Όπως είπα, αν χρησιμοποιείτε ένα στοιχείο φωτισμού (ή θέμα) για να σκιάσετε τον ιστότοπό σας σε μια συγκεκριμένη κατεύθυνση σαν να ήταν μια ζωγραφιά, αυτή είναι η τέλεια λύση για εσάς.
Παρομοίως, αναπήδηση ή αιωρούνται: τα στοιχεία αναπήδησης είναι τέλεια για αυτό. Στην τελευταία περίπτωση, ενεργοποιήστε τη σκιά αφού ξεκινήσει η αναπήδηση και απενεργοποιήστε τη μετά την προσγείωσή της και, στη συνέχεια, το wow φαίνεται να μεταμορφώνετε ήδη σε σχεδιαστή.
Μεταφορά σε CSS Sprite
Οι CSS Sprites είναι μια διασκεδαστική τεχνική και οι περισσότεροι από εμάς είναι περισσότερο από πιθανό να τους γνωρίσουμε. Αλλά μόνο σε περίπτωση που δεν είστε, επιτρέψτε μου να συνοψίσω τι είναι. Ένα CSS Sprite είναι μια μεγάλη εικόνα που περιέχει τουλάχιστον δύο περιοχές προβολής, μία που είναι μέσα στην προβολή και μία που εμφανίζεται σε κάποιο είδος αλληλεπίδρασης χρήστη (συνήθως ένα ποντίκι).
Τώρα που ξέρετε τι είναι, θα δημιουργήσουμε την πρώτη μας, και ίσως πιο βασική εικόνα CSS sprite. Σε αυτή την περίπτωση θα χρησιμοποιήσουμε ένα hover link και οι δύο εικόνες μπορεί να είναι οτιδήποτε θέλετε, αλλά θα το ονομάσουμε "sprite.png". Θα χρησιμοποιήσουμε επίσης ένα στοιχείο για να φιλοξενήσουμε τον σύνδεσμό μας και την εικόνα μας, γι 'αυτό θα χρησιμοποιήσουμε τη σύνταξη CSS στο παρασκήνιο. Έτσι ο κώδικας μας θα μοιάζει με:
a {display: block;background: url(sprite.png) no-repeat;height: 50px /*Example that is needed for the hover explanation*/width: /*the appropriate width here*/}a:hover {background-position: 0 -50px;}Όπως μπορείτε να δείτε, το πραγματικό μυστικό εδώ είναι αυτό που συμβαίνει όταν ο χρήστης αιωρείται πάνω από το στοιχείο εικόνας και η εικόνα μεταβαίνει στον άξονα Υ σε μήκος 50 pixels. Ο λόγος γι 'αυτό είναι το ακριβές ύψος της εικόνας, επομένως δεν θα υπάρξει εναπόθεση ή επικάλυψη κατά τη διάρκεια της αιώρησης μετάβασης και θα φανεί καθαρό και ομαλό όσο μπορεί.
Αυτό είναι το πραγματικό μυστικό των εικόνων sprite, και αιωρούνται πάνω από τις ενέργειες. Ανεξάρτητα από το γεγονός ότι μπορεί να έχετε μια πολύ παράξενη ή επιμήκη εικόνα, πρέπει να έχετε την μετατόπιση y (ή x), ανάλογα με το τι πηγαίνετε, ακριβώς στο πλάτος (x) ή στο ύψος (y) . Καθαρή και απλή και όμορφη διασκέδαση σε αυτό Τώρα πηγαίνετε και κάνετε τα δικά σας σπρέι!
Στρώση
Ενδέχεται να ενδιαφέρεστε για τη στρωματοποίηση πραγμάτων στον ιστότοπό σας. Είτε χαρτί, φύλλα, δέντρα ή το πιο γελοίο πράγμα, όπως τα πρόσωπα των ανθρώπων, μπορείτε να χρησιμοποιήσετε την ίδια σύνταξη για να ξεφύγετε με αυτό που θέλετε. Είναι βασικά μια επιλογή από σκιά κουτιού μακριά από το πρώτο στοιχείο σας για να δώσει το «αποτέλεσμα» που ψάχνετε.
Σε αυτή την περίπτωση θα χρησιμοποιήσουμε ένα απλό div με ένα γκρίζο φόντο, ώστε να μπορείτε να συλλέξετε όσα αναφέρουμε. Θα κάνουμε, ως συνήθως, κατάδυση δεξιά και στη συνέχεια θα εξηγήσουμε αργότερα.
.layering {background: #EEE;box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0.15);}Αυτό που βλέπουμε μπορεί να φαίνεται λίγο περίπλοκο, αλλά είναι μάλλον απλό. Αυτό που συμβαίνει είναι η σκιά, το στρώμα, η σκιά, το στρώμα και η σκιά. Επομένως, το επάνω στρώμα σε αυτή την περίπτωση είναι div με χρώμα φόντου #EEE. Στη συνέχεια, έχουμε την πρώτη σκιά κουτιού που δουλεύει ως σκιά σε αυτό το ανώτερο στρώμα, τότε εμφανίζεται το δεύτερο στρώμα (σημειώστε το #EEE) και στη συνέχεια έχουμε τη σκιά του δεύτερου στρώματος και στη συνέχεια το τρίτο στρώμα (σημειώστε ξανά το #EEE) και στη συνέχεια τη σκιά του.
Αρκετά απλή, και με τις επιλογές που έχουμε κάνει δίνει ένα ωραίο στοίβα ή στρωματοειδές αποτέλεσμα. Και πάλι, αυτό μπορεί να χρησιμοποιηθεί με οτιδήποτε πραγματικά, απλά πρέπει να πηδήξετε με την ευθυγράμμιση για να το κάνετε σωστό. Θυμηθείτε όμως ότι όταν κάνετε layering θα είναι καλύτερα να δουλέψετε από πάνω αριστερά κάτω προς τα κάτω δεξιά με τις εικόνες ή τα divs σας, καθώς ρέει πιο φυσικά.
Λειτουργικότητα
Υπεύθυνος σχεδιασμός: iPad στυλ
Ας το παραδεχτούμε, ο ευαίσθητος σχεδιασμός είναι εξαιρετικά σημαντικός. Και δεν με νοιάζει αν μισείς ερωτήσεις μέσων και ρευστά πλέγματα, θα τα χρησιμοποιείς σε λίγα χρόνια, ανεξάρτητα από το αν τους αρέσεις. Αναμένουμε ότι θα είναι ένα πρότυπο στο σχεδιασμό ιστοσελίδων, ειδικά δεδομένου του αριθμού των διαφόρων μεγεθών οθόνης και των αναλύσεων συσκευών που χτυπούν την αγορά και υιοθετούνται με ανησυχητικά υψηλό ρυθμό - σε όλη τη διαδρομή από τα 27 "iMacs έως τα iPod Touch και όλα τα μεταξύ τους , και όλοι περιηγούνται στο διαδίκτυο.
Όλοι χρειάζονται μια ωραία εμπειρία και, ειλικρινά, κανείς δεν θέλει να κάνει μια διαφορετική εκδοχή του site τους για κάθε συσκευή, καθώς αυτό είναι απλά πάρα πολύ δουλειά. Είμαστε απασχολημένοι, έτσι χρειαζόμαστε μια λύση για τους πολυάσχολους ανθρώπους. Αυτό είναι όπου τα ερωτήματα των μέσων ενημέρωσης έρχονται στο μίγμα. Αυτό που θα επικεντρωθώ εδώ είναι τα συγκεκριμένα ερωτήματα του iPad, αλλά από αυτό μπορείτε να συγκεντρώσετε ό, τι χρειάζεστε για να σπρώξετε τα ερωτήματά σας σε άλλα μεγέθη οθόνης. Μετά από αυτό έρχεται μόνο η αλλαγή της διάταξης του ιστοτόπου σας ώστε να αντικατοπτρίζει αυτά τα μεγέθη οθόνης που άλλαξαν. Ας ρίξουμε λοιπόν κάποιους κώδικες και μετά να μιλήσουμε για αυτό.
@media only screen and (device-width: 768px) { /*General layouts*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {/*Portrait*/ }@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { /*Landscape*/ }Αυτό δεν πρέπει να είναι πάρα πολύ δύσκολο να δούμε τι συμβαίνει εδώ, αλλά αυτό που κάνουμε είναι να χρησιμοποιήσουμε τα ερωτήματα των μέσων μαζικής ενημέρωσης " συγκεκριμένη σύνταξη να σπάσει και να επιτρέψει την προβολή του ιστότοπού μας για να αντικατοπτρίζει καλύτερα για συγκεκριμένα μεγέθη οθόνης. Λοιπόν, ας υποθέσουμε ότι έχουμε ένα H1 με κάποιο κείμενο μεγέθους 60px ... καλά, αυτό είναι πιθανώς καλό για τα iMacs και άλλους μεγάλους υπολογιστές, αλλά αυτό πιθανότατα δεν θα ταιριάζει με το υπόλοιπο site σας σε μια πιο συντηρητική προβολή iPad . Επομένως, αυτό που θα κάνουμε είναι μέσα στο γράμμα του κώδικα μας:
@media only screen and (device-width: 768px) { h1: font-size 60px }Και αυτό θα το μέγεθος για τις οθόνες iPad κατάλληλα. Φυσικά, αυτά τα μεγέθη ήταν απλώς παραδείγματα που θα ήταν καλύτερα να δοκιμάσετε τον ιστότοπό σας για συγκεκριμένα μεγέθη και τέτοια, προτού προχωρήσετε στην οριστικοποίηση των ερωτημάτων σας, αλλά αυτή είναι μια μέθοδος που θα σας εξοικονομήσει έναν τόνο εργασίας μακροπρόθεσμα ).
ΣΗΜΕΙΩΣΗ: Αν είστε εξοικειωμένοι με τον προγραμματισμό αντικειμένων, τότε αυτό είναι κάτι που θα έρθει δεύτερη φύση, αυτό που εξετάζουμε είναι βασικά μια 'if then' δήλωση των ειδών για την απόδοση του browser μας στην οθόνη του site μας. Κατά τη γνώμη μου, αυτό είναι ένα από τα καλύτερα πράγματα για να βγει από το CSS, καλά ... πάντα.
Χρήσιμη πλοήγηση (επέκταση)
Η πλοήγηση δεν είναι πάντα τέλεια στους ιστότοπούς μας και γι 'αυτό μερικές φορές πρέπει να επιστρέψουμε στο σχεδιαστή για να ξανασκεφτούμε το πώς το κάνουμε και αν μπορούμε να χρησιμοποιήσουμε το CSS3 για να μας βοηθήσετε.
Ας φανταστούμε ότι έχουμε μια μπάρα πλοήγησης στην κορυφή της ιστοσελίδας μας, αλλά θα θέλαμε να προσθέσουμε περισσότερα από ένα pop όταν οι χρήστες ποντίκι πάνω από αυτό, αφήνοντάς τους να γνωρίζουν ότι μπορούν να το χρησιμοποιήσουν και ότι είναι πράγματι ένα ελκυστικό πράγμα για αυτούς κάντε κλικ στο. Λοιπόν, ο καλύτερος τρόπος για να γίνει αυτό θα ήταν να πετάξετε σε μια απλή μετάβαση στο webkit χρησιμοποιώντας τη μέθοδο ευκολίας. Επομένως, αυτό που θα κάνουμε είναι να δώσουμε ένα παράδειγμα σχετικά με ένα στοιχείο «nav».
Φυσικά σε αυτό το παράδειγμα θα πρέπει να κάνετε όλοι τις ρυθμίσεις μόνοι σας, απλά κοιτάζουμε το ακριβές μεταβατικό στοιχείο που θα σας βοηθούσε σε αυτή την περίπτωση.
nav a {-webkit-transition: width 0.15s ease;}ή
nav a {-webkit-transition: all .2 ease-in-out; } /* based on your preference for anims obviously */nav a:hover {-webkit-transform: scale(1.1);}Μερικές σημειώσεις σχετικά με τις ιδιότητες μετάβασης webkit, ώστε να μπορείτε να τις χρησιμοποιήσετε σωστά στον ιστότοπό σας. Είναι ένα μαγικό ραβδί βασικά και παίρνει τρεις αξίες. Η ιδιότητα που κινείται, η διάρκεια της κινούμενης εικόνας και μια 'λειτουργία χρονισμού' (αυτό επιδρά στην επιτάχυνση των κινούμενων εικόνων για ένα ομαλότερο αποτέλεσμα).
Υπάρχουν πολλοί τρόποι να συνεργαστούμε με αυτούς, και πολλοί πόροι εκεί έξω εδώ και εδώ και εδώ . Αλλά ελπίζω να σας δώσω μια εισαγωγή στο τι είναι δυνατό μαζί τους και πραγματικά ωριμάζει τη δίψα σας για κατανόηση, ώστε να βγείτε έξω και να πειραματιστείτε αρκετά. Πολλή διασκέδαση εδώ.
Και έτσι φτάνουμε στο τέλος του ταξιδιού μας. Απλώς σημειώστε ότι δεν ήταν εξαντλητικός ή πλήρης κατάλογος με οποιονδήποτε τρόπο, αλλά ελπίζω ότι προκάλεσε το ενδιαφέρον σας για μερικά από τα πιο ενδιαφέροντα πράγματα που μπορείτε να κάνετε με το CSS και το CSS3. Είναι ένας τρελός και διασκεδαστικός κόσμος κατά καιρούς, και μερικές φορές ένας απογοητευτικός.
Μετά από όλα, όλοι γνωρίζουμε πώς είναι όταν ένας σχεδιαστής δεν μπορεί να πάρει ένα div για να εμφανίσει ένα παιδικό στοιχείο σωστά ή όταν ένα στοιχείο κειμένου δεν κάνει αρκετά αυτό που θέλετε.
Συνεχίστε να έρχεστε σε επαφή με τους αγαπημένους σας σχεδιαστές και δημιουργήστε έναν κύκλο φίλων σε αυτόν τον χώρο, με τον οποίο μπορείτε να επικοινωνείτε και να μοιράζεστε αυτά τα κόλπα με το παρελθόν, διότι γνωρίζω ότι έτσι έμαθα τα περισσότερα από αυτά που έχω μοιραστεί σήμερα και έχω να πω ότι νομίζω ότι είναι το καλύτερο που μπορείτε να κάνετε ως σχεδιαστής ιστοσελίδων. Twitter είναι μια μεγάλη πηγή για αυτό, και να αναζητήσετε [dot] twitter ακόμα καλύτερη. Εν τω μεταξύ, θα σας αφήσω να πειραματιστείτε, αλλά όχι πριν από μια τελευταία πρόταση.
Πηγαίνετε νεαρός Padawan και παίζουν με τη διασκέδαση που σας περιμένει ως σχεδιαστής ιστοσελίδων στον άγριο κόσμο του στυλ και του σχεδιασμού μέσα CSS (3).
Ποιες είναι οι αγαπημένες σας νέες τεχνικές CSS3; Ή ελάχιστα χρησιμοποιούμενες / ελάχιστα γνωστές τεχνικές CSS; Ενημερώστε μας στα σχόλια!