Δημιουργία ενός πλαισίου με HTML5 & Amp? CSS3

#close" title="Κοντά" class=close>  Χ 
  Modal Box 
  Πρόκειται για ένα παράδειγμα μοντέλου που μπορεί να δημιουργηθεί χρησιμοποιώντας τις εξουσίες του CSS3. 
  Θα μπορούσατε να κάνετε πολλά πράγματα εδώ όπως να έχετε μια αναδυόμενη διαφήμιση που δείχνει πότε φορτώνεται ο ιστότοπός σας ή δημιουργήστε μια φόρμα σύνδεσης / εγγραφής για τους χρήστες. 

Ξεκινώντας το στυλ

Αυτή τη στιγμή έχουμε ακριβώς έναν σύνδεσμο με ένα div που δείχνει κάτω από αυτό. Θα ξεκινήσουμε να σχεδιάζουμε το κιβώτιο μας και να το κάνουμε πραγματικά λειτουργικό. Ας δημιουργήσουμε πρώτα τις κλάσεις modalDialog μας και να αρχίσουμε να προχωρούμε.

.modalDialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}

Ο κώδικας εδώ είναι πολύ απλός. Στυλίζουμε το παράθυρο διαλόγου δίνοντάς του μια σταθερή θέση, που σημαίνει ότι θα μετακινηθεί προς τα κάτω στη σελίδα, όταν είναι ανοικτή, αν μετακινηθείτε. Επίσης, ορίσαμε τις κορυφαίες, τις σωστές, τις κάτω και τις αριστερές άκρες μας σε 0, ώστε το σκούρο φόντο μας να εκτείνεται σε ολόκληρη την οθόνη.

Δεδομένου ότι πρόκειται να θέσουμε το φόντο γύρω από το κιβώτιο modal να σκοτεινιάσει όταν είναι ανοιχτό, θέτουμε το φόντο σε μαύρο και αλλάζουμε ελαφρώς την αδιαφάνεια. Επίσης, βεβαιώνουμε ότι το modal box μας βρίσκεται πάνω από όλα, θέτοντας την ιδιότητα z-index.

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

Μπορεί να μην είστε εντελώς εξοικειωμένοι με την ιδιότητα δείκτη δείκτη, αλλά σας επιτρέπει να ελέγχετε πότε κάνετε και δεν θέλετε τα στοιχεία να είναι clickable. Το θέσαμε για την κλάση modalDialog , επειδή δεν θέλουμε να είναι δυνατή η σύνδεση με το σύνδεσμο έως ότου αποφορτιστεί η ψευδο-τάξη ": target".

Λειτουργικότητα και εμφάνιση

Τώρα ας προσθέσουμε την ψευδο-τάξη στόχου μας καθώς και το στυλ για το κουτάκι μας.

.modalDialog:target {opacity:1;pointer-events: auto;}.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);}

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

Τότε στυλίσουμε την ετικέτα div, ρυθμίζοντας το πλάτος, τη θέση και χρησιμοποιώντας τα περιθώρια μας για να χτυπήσουμε το modal πλαίσιο προς τα κάτω από το επάνω μέρος και να το κεντράσουμε στη σελίδα μας. Στη συνέχεια, προσθέτουμε ένα μικρό ύφος, δημιουργώντας ένα παραπέτασμα, ορίζοντας μια ωραία ακτίνα ακρών και χρησιμοποιώντας μια κλίση από άσπρο σε σκούρο γκρι για το υπόβαθρό μας.

Κλείνοντας το

Τώρα που έχουμε σχεδιάσει το modal box και το έκαναν λειτουργικό, το τελευταίο πράγμα που πρέπει να κάνουμε είναι να φτιάξουμε το κλείσιμο του κουμπιού μας που φαίνεται καλό. Η χρήση των CSS3 και HTML5 μπορεί να δημιουργήσει κουμπιά που μοιάζουν με εικόνες, αλλά πραγματικά δεν είναι. Εδώ είναι το CSS που χρησιμοποιούμε για αυτό:

.close {background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover { background: #00d9ff; }

Για το κλείσιμο του κουμπιού μας θέτουμε το κουμπί φόντου και τοποθετούμε το κείμενο χρησιμοποιώντας την ευθυγράμμιση κειμένου και ύψος γραμμής. Κατόπιν τοποθετούμε το κουμπί χρησιμοποιώντας την απόλυτη θέση και ορίζουμε τις κορυφαίες και τις δεξιές ιδιότητές μας. Πώς μπορούμε να το κάνουμε κύκλο και να προσθέσουμε λίγο βάθος; Ρυθμίσαμε την ακτίνα των ακτίνων σε 12 και δημιουργήσαμε μια ελαφριά σκιά. Στη συνέχεια, για να προσθέσετε μια μικρή απόκριση από το χρήστη, αλλάζουμε το φόντο σε ανοιχτόχρωμο όταν το βάλετε πάνω του (άλλες ιδέες για την τοποθέτηση του ποντικιού περιλαμβάνουν την προσθήκη γραμμικής μετάβασης, την αλλαγή γραμματοσειράς ή την ελαφρά επέκταση της σκιάς του κουτιού).

Γιατί το modal box μας είναι καλύτερο

Όπως ίσως έχετε παρατηρήσει, το μεγάλο σημείο πώλησης με αυτήν την τεχνική είναι η δημιουργία ενός κουτιού μεταδεδομένων σε HTML5 και CSS3. Γιατί είναι τόσο μεγάλη αυτή η υπόθεση; Modal κουτιά στο JavaScript είναι κάτι που ένας αρχάριος θα μπορούσε να δημιουργήσει, υπάρχουν εκατοντάδες παραδείγματα και λήψεις έτοιμες να χρησιμοποιηθούν. Γιατί λοιπόν θέλουμε να καταργήσουμε το JavaScript υπέρ των HTML5 και CSS3;

Θα ήταν αφελές από εμένα να πω ότι ένα σημείο πώλησης είναι να βεβαιωθείτε ότι τα άτομα με JavaScript μπορούν να τα χρησιμοποιήσουν. τα στατιστικά στοιχεία δείχνουν ότι μόνο το 2% των ανθρώπων σε όλο τον κόσμο περιηγούνται χωρίς JavaScript, οπότε αν αυτό δεν είναι πρόβλημα, τι είναι; Λοιπόν επωφεληθήκαμε από τις μεταβάσεις του CSS3 κατά τη δημιουργία του modal box μας. Ο πλήρης κώδικας ήταν:

-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;

Χρησιμοποιήσαμε μόνο τρεις γραμμές κώδικα για να δημιουργήσουμε την κινούμενη εικόνα μας. Εάν το συγκρίνετε με οποιαδήποτε βιβλιοθήκη κινούμενων σχεδίων JavaScript, θα σας συγκλονιστεί για να δείτε πόσο ελαχιστοποιείται ο κώδικας. Αυτό οδηγεί σε έναν άλλο λόγο, δηλαδή, έχουμε καθαρότερο κώδικα. Γνωρίζουμε τι div που εφαρμόζει το κινούμενο σχέδιο και ότι είναι μόνο 3 γραμμές. Αυτό μας διευκολύνει να το τροποποιήσουμε ή να αλλάξουμε το div όπως το θεωρούμε κατάλληλο και να μην ανησυχείς για την αλλαγή του div στο JavaScript καθώς και του CSS και του HTML.

Τέλος, το HTML5 και το CSS3 είναι το μέλλον. Όλοι εργάζονται για την υλοποίησή τους στα σχέδιά τους και τα σχέδιά τους, και η χρήση τους συμβάλλει στη διαιώνιση της υιοθέτησής του και εξασφαλίζει ότι δεν θα μείνει πίσω. Παίρνετε καθαρότερο κώδικα, δεν χρειάζεται να ανησυχείτε για τις βιβλιοθήκες JavaScript και έχετε έναν ολόκληρο αριθμό σχεδιαστών ιστοσελίδων και προγραμματιστών που είναι έτοιμοι να σας βοηθήσουν σε οποιεσδήποτε απορίες μπορεί να έχετε επειδή είναι ενθουσιασμένοι για να μάθουν περισσότερα για τη γλώσσα . Τα HTML5 και CSS3 δεν πηγαίνουν οπουδήποτε, οπότε δεν υπάρχει κανένας λόγος να μην τα χρησιμοποιείτε.

Πότε πρέπει να χρησιμοποιείτε τα πλαίσια τρόπων

Τώρα λοιπόν που καλύψαμε πώς να φτιάξουμε τα modal boxes και γιατί πρέπει να τα κάνουμε με HTML5 και CSS3, τι γίνεται όταν πρέπει να χρησιμοποιήσεις τα modalo boxes;

Φόρμα εγγραφής / εγγραφής

Νομίζω ότι τα πλαίσια των τρόπων είναι ιδιαίτερα χρήσιμα όταν χρησιμοποιούνται για τις φόρμες εγγραφής και εγγραφής. Δημιουργεί μια τέτοια βελτιωμένη εμπειρία για τον χρήστη και μπορεί πραγματικά να κάνει μια εντύπωση στους επισκέπτες σας.

Εμφάνιση εικόνων / βίντεο

Μια άλλη άριστη χρήση των modal boxes είναι η εμφάνιση εικόνων ή βίντεο (κοινώς γνωστών ως lightboxes). Επιτρέπει στον χρήστη να βλέπει το περιεχόμενο του ιστότοπού σας χωρίς να εγκαταλείπει την ιστοσελίδα, διατηρώντας έτσι την περαιτέρω επένδυσή του στην εμπειρία σας στο διαδίκτυο.

Σχόλια χρηστών

Όταν ένας χρήστης αλληλεπιδράσει στην ιστοσελίδα σας και θέλετε να επικοινωνήσετε ή να τον ειδοποιήσετε για κάτι, ποιος καλύτερος τρόπος για να το κάνετε απ 'ό, τι ένα modal box; Το Facebook αποκομίζει μεγάλο πλεονέκτημα για αυτό όταν θέλετε να αλλάξετε τη γλώσσα σας στον ιστότοπό σας ή για σύντομες αποκλίσεις όπως η σύνδεση "Γιατί πρέπει να δώσω τα γενέθλιά μου" κατά την εγγραφή σας. Αν δεν έχει αρκετό κείμενο ή δεν χρειάζεται να είναι ολόκληρη η σελίδα, γιατί να μην χρησιμοποιήσετε ένα κουτάκι τρόπων;

Διαφημίσεις

Ένα εξαιρετικό παράδειγμα της διαφήμισης που χρησιμοποιεί τα modalo boxes είναι η ραδιοφωνική υπηρεσία Pandora. Αν δεν είστε μέλος της υπηρεσίας πριμοδότησης, κάθε φορά που θα λάβετε μια διαφήμιση στην οθόνη σας. Μερικές φορές αυτές είναι ηχητικές διαφημίσεις που μοιάζουν σαν να ακούτε μόνο ένα τραγούδι και μερικές φορές είναι ένα αναδυόμενο παράθυρο για ένα βίντεο. Αυτή είναι μια μεγάλη τακτική για τους ανθρώπους που θέλουν να ενθέσουν τη διαφήμιση στις ιστοσελίδες τους χωρίς να τις έχουν πάντα στη σελίδα.

συμπέρασμα

Εκεί μπορείτε να δημιουργήσετε ένα απλό μεταφραστικό πλαίσιο HTML5 και CSS3 και μπορείτε να το χρησιμοποιήσετε για πράγματα όπως φόρμες σύνδεσης / εγγραφής χρήστη, διαφημίσεις και πολλά άλλα. Έχετε επίσης μάθει γιατί πρέπει να χρησιμοποιήσουμε τα HTML5 και CSS3 αντί για το JavaScript και είδαμε μερικά παραδείγματα για τον τρόπο με τον οποίο οι ιστότοποι χρησιμοποιούν πλαίσια modal και πώς μπορείτε να τα εφαρμόσετε στα δικά σας σχέδια.

Είστε ενθουσιασμένοι από τις δυνατότητες του HTML5 & CSS3; Θα τελειώσει η JavaScript το δρόμο του Flash; Δώστε μας τις απόψεις σας στα παρακάτω σχόλια.

Εικόνα μικρογραφίας μέσω Shutterstock.