Μεταβάσεις CSS3 στο Dreamweaver CS6

• Ενδέχεται 16, 2024

Με την προσθήκη HTML5 και CSS3, οι διαδραστικοί ιστότοποι καθίστανται αναμενόμενοι. Τώρα, με το Dreamweaver^R CS6 και το νέο παράθυρο CSS Transitions, μπορείτε να δημιουργήσετε τα δικά σας αλληλεπιδραστικά εφέ χωρίς να χρειάζεται να γράψετε κώδικα. Η έξοδος από αυτή τη διαδικασία είναι μόνο CSS3, χωρίς JavaScript. Επομένως, δεν χρειάζεται να ανησυχείτε εάν ο θεατής έχει ενεργοποιήσει τη JavaScript. Οι μεταβάσεις που δημιουργούνται από το Dreamweaver μπορούν να αναπαραχθούν σε οποιοδήποτε σύγχρονο πρόγραμμα περιήγησης ιστού.

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

1. Το πρώτο μας βήμα είναι να επιλέξετε το στοιχείο στο οποίο επιθυμούμε να εφαρμόσουμε τη μετάβαση. Στο παράδειγμά μας θα είναι ένας σύνδεσμος μενού.
   
   
2. Κάντε κλικ στις μεταβάσεις παραθύρου - CSS για να ανοίξετε τον πίνακα.
   
   
3. Στον πίνακα CSS Transitions, κάντε κλικ στο σύμβολο Plus για να προσθέσετε μια μετάβαση.
   
   
4. Στο παράθυρο διαλόγου Νέα μετάβαση, μπορούμε να χρησιμοποιήσουμε το μενού Κανόνας στόχου για να επιλέξετε από τις προεπιλογές ή να πληκτρολογήσετε το δικό μας όνομα για τη μετάβαση. Ας πληκτρολογήσουμε το όνομα .morph.
   
   
5. Στη συνέχεια, πρέπει να επιλέξουμε τη δράση που θα ενεργοποιήσει τη μετάβαση. Από το μενού μετάβασης στο μενού, επιλέξτε "Μετακίνηση", έτσι ώστε η μετάβαση να ενεργοποιηθεί όταν τοποθετήσουμε το ποντίκι πάνω από το σύνδεσμο. Άλλες επιλογές περιλαμβάνουν: ενεργή, ελεγχόμενη, απενεργοποιημένη, ενεργοποιημένη, εστίαση, αιώρηση, απροσδιόριστη και στόχος.
   
   
6. Για την επιλογή μενού, έχουμε δύο επιλογές. Ας επιλέξουμε την πρώτη.
   
   Χρησιμοποιήστε την ίδια μετάβαση για όλες τις ιδιότητες
   Χρησιμοποιήστε μια διαφορετική μετάβαση για κάθε ιδιότητα
   
   
7. Για τη διάρκεια και την καθυστέρηση της μετάβασης, μπορούμε να χρησιμοποιήσουμε δευτερόλεπτα ή χιλιοστά του δευτερολέπτου. Ας θέσουμε τη Διάρκεια σε 1 δευτερόλεπτο και την Καθυστέρηση σε 0,05 δευτερόλεπτα.
   
   
8. Για τη λειτουργία χρονισμού, έχουμε πολλές επιλογές χαλάρωσης. Ας επιλέξουμε το Ease Out.
   
   
9. Για να προσθέσετε μια ιδιότητα CSS, κάντε κλικ στο σύμβολο Plus και επιλέξτε ένα από την αναδυόμενη λίστα. Ας επιλέξετε Background Color.
   
   
10. Μόλις επιλέξουμε μια ιδιότητα, μπορούμε να ορίσουμε την τελική τιμή για τη μετάβαση. Ανάλογα με την ιδιότητα που έχουμε επιλέξει, το μενού Τελική τιμή θα μας δώσει το αντίστοιχο μενού για την εν λόγω ιδιότητα. Για το Χρώμα φόντου παίρνουμε το Color Picker. Αν προσθέσουμε την ιδιότητα Font-Weight, θα έχουμε ένα μενού προκαθορισμένων βαρών.
    
    
11. Τέλος, πρέπει να επιλέξετε Πού να δημιουργήσετε τη μετάβαση. Οι επιλογές μας είναι μόνο αυτό το έγγραφο ή το νέο φύλλο φύλλου στυλ. Ας χρησιμοποιήσουμε την πρώτη.
    
    

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

Αν ελέγξουμε την προβολή κώδικα, βλέπουμε ότι η κλάση morph έχει προστεθεί στον σύνδεσμο.

Όταν περάσουμε το ποντίκι πάνω από τον σύνδεσμο σε Ζωντανή προβολή, το χρώμα φόντου θα αλλάξει.

Αλλά τι θα έπρεπε αν χρειαζόταν να επεξεργαστούμε τη μετάβαση; Μπορούμε να το κάνουμε αυτό μέσω του πίνακα μεταβάσεων CSS.

1. Επιλέξτε τη μετάβαση a.morph και το εικονίδιο Επεξεργασία θα είναι ενεργό (εικονίδιο με μολύβι).
   
   
2. Κάντε κλικ στο εικονίδιο Επεξεργασία για να ανοίξετε το παράθυρο διαλόγου Επεξεργασία μετάβασης. Εδώ μπορούμε να αλλάξουμε τις τιμές όπως απαιτείται ή να προσθέσουμε μια νέα ιδιότητα και τελική τιμή.
   
   

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

* Η Adobe μου έδωσε ένα αντίγραφο αυτού του λογισμικού για σκοπούς αναθεώρησης.

Πνευματικά δικαιώματα 2018 Adobe Systems Incorporated. Ολα τα δικαιώματα διατηρούνται. Οι φωτογραφίες της οθόνης του προϊόντος Adobe ανατυπώνονται με την άδεια της Adobe Systems Incorporated. Adobe Photoshop, Adobe Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, είναι / είναι είτε [ή] καταχωρισμένο εμπορικό σήμα ή εμπορικό σήμα της Adobe Systems Incorporated στις Ηνωμένες Πολιτείες ή / και σε άλλες χώρες.

Οδηγίες Βίντεο: CSS Efecto - 08 Sombra Fija @JoseCodFacilito (Ενδέχεται 2024).