מעברים CSS3 ב- Dreamweaver CS6

• אַפּרִיל 29, 2024

בתוספת HTML5 ו- CSS3, אתרים אינטראקטיביים הופכים להיות הצפויים. עכשיו, עם Dreamweaver^ר CS6 ופאנל המעברים החדש של CSS, תוכלו ליצור אפקטים אינטראקטיביים משלכם ללא צורך לכתוב קוד כלשהו. הפלט מתהליך זה הוא CSS3 בלבד, ללא JavaScript. לכן, אינך צריך לדאוג אם הצופה אפשר JavaScript. המעברים שנוצרו על ידי Dreamweaver יכולים לשחק בכל דפדפן אינטרנט מודרני.

בואו נראה כמה קל ליצור מעברים אינטראקטיביים משלנו. ניתן להחיל את המעבר על כל רכיב בכיתה, ID או CSS. כל שעלינו לעשות הוא להגדיר את הערכים בחלונית CSS Transitions.

1. הצעד הראשון שלנו הוא לבחור את האלמנט אליו אנו רוצים להחיל את המעבר. בדוגמה שלנו זה יהיה קישור לתפריט.
   
   
2. לחץ על חלון - מעברי CSS כדי לפתוח את החלונית.
   
   
3. בחלונית CSS Transitions, לחץ על סימן הפלוס כדי להוסיף מעבר.
   
   
4. בתיבת הדו-שיח מעבר חדש, נוכל להשתמש בתפריט כלל היעד כדי לבחור מההגדרות הקבועות מראש או להקליד בשם שלנו לצורך המעבר. בואו נקליד את השם .morph.
   
   
5. בשלב הבא עלינו לבחור בפעולה שתפעיל את המעבר. מתפריט מעבר On, בחר בריחוף כך שהמעבר יפעל כאשר אנו מציבים את העכבר מעל הקישור. אפשרויות אחרות כוללות: פעיל, מסומן, מושבת, מופעל, מיקוד, רחף, בלתי מוגדר ומיקוד.
   
   
6. לאפשרות התפריט, יש לנו שתי אפשרויות. בואו לבחור את הראשון.
   
   השתמש באותו מעבר לכל המאפיינים
   השתמש במעבר שונה עבור כל נכס
   
   
7. למשך המעבר ולעיכובו, אנו יכולים להשתמש בשניות או במילי שניות. בואו נקבע את משך הזמן לשנייה אחת ואת העיכוב ל05 שניה.
   
   
8. לגבי פונקציית העיתוי, יש לנו כמה אפשרויות הקלה. בואו לבחור Ease Out.
   
   
9. כדי להוסיף נכס CSS, לחץ על סימן הפלוס ובחר אחד מהרשימה המוקפצת. בואו לבחור צבע רקע.
   
   
10. לאחר שבחרנו נכס נוכל להגדיר את ערך הקצה למעבר. בהתאם לנכס שבחרנו, תפריט ערך הקצה ייתן לנו את התפריט המתאים עבור אותו נכס. עבור צבע הרקע אנו מקבלים את בורר הצבעים. אם נוסיף את המאפיין משקל גופן, נקבל תפריט של משקולות מוגדרות מראש.
    
    
11. לבסוף עלינו לבחור היכן ליצור את המעבר. הבחירות שלנו הן מסמך זה בלבד או קובץ גיליון סגנון חדש. בוא נשתמש בראשון.
    
    

לאחר שנלחץ על כפתור יצירת המעבר, נוכל לראות שהמעבר רשום בחלונית CSS Transitions, מה שמצביע על כך שהמעבר morph יופעל על ידי פעולת הרחף ותוחל על היעד a.morph.

אם אנו בודקים את תצוגת הקוד, אנו רואים שכיתת morph נוספה לקישור.

כשאנו מעבירים את העכבר מעל הקישור בתצוגת Live, צבע הרקע ישתנה.

אבל מה אם היינו צריכים לערוך את המעבר? אנו יכולים לעשות זאת דרך החלונית CSS Transitions.

1. בחרו במעבר a.morph וסמל העריכה יהפוך לפעיל (סמל עיפרון).
   
   
2. לחץ על סמל העריכה כדי לפתוח את תיבת הדו-שיח עריכת מעבר. כאן נוכל לשנות את הערכים לפי הצורך או להוסיף נכס וערך קצה חדשים.
   
   

כעת, לאחר שנוצר המעבר מורף, אנו יכולים להחיל אותו בקלות על אלמנטים אחרים מכיוון שהוא זמין כעת מתפריט כלל היעד.

* Adobe סיפקה לי עותק של תוכנה זו לצורכי סקירה.

זכויות יוצרים 2018 Adobe Systems Incorporated. כל הזכויות שמורות. צילומי מסך של מוצרי אדובי הודפסו מחדש עם אישור של Adobe Systems Incorporated. אדובי, פוטושופ, אלבום פוטושופ, אלמנטים פוטושופ, אילוסטרייטור, InDesign, GoLive, Acrobat, Cue, Premiere Pro, אלמנטים בכורה, גשר, After Effects, InCopy, Dreamweaver, Flash, ActionScript, זיקוקים, לתרום, לכידת, Flash Catalyst ונייר פלאש. הוא / הם [a] סימנים מסחריים רשומים או סימנים מסחריים של Adobe Systems Incorporated בארצות הברית ו / או במדינות אחרות.

הוראות וידאו: Adobe Flash CS5 - אדובי פלאש - מדריך אובייקטים צבעים אפקטים (אַפּרִיל 2024).