CSS3 Преходи в Dreamweaver CS6

• Април 29, 2024

С добавянето на HTML5 и CSS3 интерактивните уебсайтове стават очакваните. Сега с Dreamweaver^R CS6 и новият панел CSS Преходи можете да създадете свои собствени интерактивни ефекти, без да е необходимо да пишете никакъв код. Резултатът от този процес е само CSS3, без JavaScript. Следователно няма нужда да се притеснявате дали зрителят е активирал JavaScript. Преходите, създадени от Dreamweaver, могат да играят във всеки модерен уеб браузър.

Нека да видим колко лесно е да създадем свои собствени интерактивни преходи. Преходът може да бъде приложен към всеки елемент от клас, ID или CSS. Всичко, което трябва да направим, е да зададем стойностите в панела CSS Transitions.

1. Първата ни стъпка е да изберем елемента, към който желаем да приложим прехода. В нашия пример това ще бъде връзка към менюто.
   
   
2. Щракнете върху прозорец - CSS преходи, за да отворите панела.
   
   
3. В панела CSS Преходи щракнете върху знака плюс, за да добавите преход.
   
   
4. В диалоговия прозорец Нов преход можем да използваме менюто Целево правило, за да избираме от предварително зададени настройки или да напишем наше собствено име за прехода. Нека въведем името .morph.
   
   
5. След това трябва да изберем действието, което ще задейства прехода. От менюто Transition On изберете Hover, така че преходът да се задейства, когато поставим мишката върху връзката. Други възможности за избор включват: активен, отметен, деактивиран, активиран, фокусиране, задържане, неопределяне и насочване.
   
   
6. За опцията за менюто имаме два варианта. Нека изберем първия.
   
   Използвайте един и същ преход за всички свойства
   Използвайте различен преход за всяка собственост
   
   
7. За продължителността и закъснението на прехода можем да използваме секунди или милисекунди. Нека да зададем Продължителността на 1 секунда и Забавянето на .05 секунда.
   
   
8. За функцията за синхронизиране имаме няколко улесняващи избора. Нека изберем Ease Out.
   
   
9. За да добавите свойство CSS, щракнете върху знака плюс и изберете един от изскачащия списък. Нека изберем Background-Color.
   
   
10. След като сме избрали свойство, можем да зададем крайна стойност за прехода. В зависимост от собствеността, която сме избрали, менюто End Value ще ни даде съответното меню за тази собственост. За Background-Color получаваме Color Picker. Ако добавим свойството Font-Weight, получаваме меню с предварително зададени тегла.
    
    
11. Накрая трябва да изберем къде да създадем прехода. Изборът ни е само този документ или файл с нов стил. Нека използваме първата.
    
    

След като щракнем върху бутона Създаване на преход, можем да видим, че преходът е изброен в панела CSS Преходи, което показва, че преходът на морфа ще бъде задействан от действието на задържане и ще бъде приложен към целта a.morph.

Ако проверим изгледа на кода, виждаме, че класът morph е добавен към връзката.

Когато преминем мишката върху връзката в изглед на живо, цветът на фона ще се промени.

Но какво ще стане, ако трябва да редактираме прехода? Можем да направим това чрез панела CSS Преходи.

1. Изберете прехода a.morph и иконата за редактиране ще стане активна (икона на молив).
   
   
2. Щракнете върху иконата Редактиране, за да отворите диалоговия прозорец Редактиране на прехода. Тук можем да променим стойностите според нуждите или да добавим нова собственост и крайна стойност.
   
   

Сега, когато сме създали прехода на морфа, лесно можем да го приложим към други елементи, тъй като той вече е достъпен от менюто Целево правило.

* Adobe предостави копие на този софтуер за мен за преглед.

Copyright 2018 Adobe Systems Incorporated. Всички права запазени. Екран (и) на екрана с продукти на Adobe препечатани с разрешение от Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst и Flash Paper е или са [a] регистрирана търговска марка (и) или търговска марка (и) на Adobe Systems Incorporated в Съединените щати и / или други страни.

Инструкции Видео: Kак се изключва автоматична хипервръзка в Word? Word уроци от Учебен център Аула. (Април 2024).