ЦСС3 Прелази у Дреамвеавер ЦС6

• Може 11, 2024

Додавањем ХТМЛ5 и ЦСС3, интерактивне веб локације постају очекиване. Сада, са Дреамвеавер-ом^Р ЦС6 и нови ЦСС Транситионс панел можете да креирате сопствене интерактивне ефекте без потребе за писањем било којег кода. Излаз из овог процеса је само ЦСС3, без ЈаваСцрипт-а. Због тога не морате бринути да ли је прегледач омогућио ЈаваСцрипт. Прелази који је креирао Дреамвеавер могу се репродуковати у било којем модерном веб претраживачу.

Да видимо како је лако креирати сопствене интерактивне прелазе. Прелаз се може применити на било који елемент класе, ИД или ЦСС. Све што треба да урадимо је да поставимо вредности на плочи ЦСС Прелази.

1. Наш први корак је одабир елемента на који желимо да применимо транзицију. У нашем примеру то ће бити веза са менијем.
   
   
2. Кликните Виндов - ЦСС Транситионс да бисте отворили панел.
   
   
3. На плочи ЦСС Транситионс кликните знак Плус да бисте додали прелаз.
   
   
4. У дијалошком оквиру Нова транзиција можемо да користимо изборник Правила циља да бирамо између унапред подешених поставки или унесемо своје име за транзицију. Укуцајмо име .морпх.
   
   
5. Даље морамо одабрати радњу која ће покренути транзицију. Из менија Транситион Он изаберите Ховер тако да ће се прелазак активирати када миш поставимо изнад везе. Остали избори укључују: активан, означен, онемогућен, омогућен, фокус, лебдење, неодређено и циљање.
   
   
6. За опцију менија имамо два избора. Изабери прво.
   
   Користите исти прелаз за све некретнине
   Користите другачији прелаз за сваки ентитет
   
   
7. За трајање и одлагање прелаза, можемо користити Секунде или Милисекунде. Поставимо Трајање на 1 секунду и Одлагање на .05 секунди.
   
   
8. За функцију тајминг имамо неколико олакшавајућих избора. Изабери Еасе Оут.
   
   
9. Да бисте додали својство ЦСС, кликните знак Плус и одаберите га са скочног пописа. Изаберимо позадинску боју.
   
   
10. Након што изаберемо својство, можемо поставити крајњу вредност за прелаз. У зависности од својства које смо изабрали, мени Енд Валуе ће нам дати одговарајући мени за тај ентитет. За позадинску боју добијамо алат за одабир боја. Ако додамо својство Фонт-Веигхт, добићемо мени унапред подешених тежина.
    
    
11. Коначно морамо одабрати где да креирамо транзицију. Наш избор је само овај документ или датотека новог стила таблице. Користимо прво.
    
    

Једном када кликнемо на дугме Цреате Транситион, видећемо да је прелаз наведен на плочи ЦСС Транситионс, што указује да ће морф транзиција бити покренута радњом лебдења и примењена на а.морпх циљ.

Ако проверимо приказ кода, видимо да је класа морфија додана у везу.

Кад мишем пређемо преко везе у приказу уживо, боја позадине ће се променити.

Али шта ако треба да уредимо транзицију? То можемо учинити преко ЦСС плоче за транзиције.

1. Изаберите а.морпх прелаз и икона Уреди ће постати активна (икона оловке).
   
   
2. Кликните на икону Уреди да отворите дијалог Уређивање прелаза. Овде можемо променити вредности по потреби или додати нову Својство и Крајњу вредност.
   
   

Сада када смо креирали морфални прелаз, лако га можемо применити на друге елементе, јер је сада доступан из менија Правило циља.

* Адобе ми је пружио копију овог софтвера ради прегледа.

Ауторска права 2018. Адобе Системс Инцорпоратед. Сва права задржана. Снимке екрана Адобе производа поново су одштампане уз дозволу компаније Адобе Системс Инцорпоратед. Адобе, Пхотосхоп, Пхотосхоп Албум, Пхотосхоп Елементс, Иллустратор, ИнДесигн, ГоЛиве, Ацробат, Цуе, Премиере Про, Премиере Елементс, Бридге, Афтер Еффецтс, ИнЦопи, Дреамвеавер, Фласх, АцтионСцрипт, Фиреворкс, Цонтрибуте, Цаптивате, Фласх Цаталист и Фласх Папер је или су [а] регистровани заштитни знак (и) или заштитни знак (Адобе) компаније Адобе Системс Инцорпоратед у Сједињеним Државама и / или другим земљама.

Видео Упутства: CSS3 Full Screen Background Image - Dreamweaver CS6 Tutorial (Може 2024).