„CSS3“ perėjimai „Dreamweaver CS6“
Pridėjus HTML5 ir CSS3, interaktyvios svetainės tampa laukiamomis. Dabar su „Dreamweaver“R CS6 ir naująjį CSS perėjimų skydelį galite sukurti savo interaktyvius efektus, nereikia rašyti jokio kodo. Šio proceso išvestis yra tik CSS3, be „JavaScript“. Todėl jums nereikia jaudintis, jei žiūrovas įgalino „JavaScript“. „Dreamweaver“ sukurti perėjimai gali būti atkuriami bet kurioje šiuolaikinėje interneto naršyklėje.

Pažiūrėkime, kaip lengva sukurti savo interaktyvius perėjimus. Perėjimą galima pritaikyti bet kuriai klasei, ID ar CSS elementui. Viskas, ką mums reikia padaryti, yra CSS perėjimų skydelyje nustatyti vertes.

  1. Pirmasis mūsų žingsnis yra pasirinkti elementą, kuriam norime pritaikyti perėjimą. Mūsų pavyzdyje tai bus meniu nuoroda.

  2. Spustelėkite langą - CSS perėjimai, kad atidarytumėte skydelį.

  3. CSS perėjimų skydelyje spustelėkite pliuso ženklą, kad pridėtumėte perėjimą.

  4. Dialogo lange Naujas perėjimas galime naudoti meniu Tikslinė taisyklė, norėdami pasirinkti iš anksto nustatytus parametrus arba įvesti savo vardą perėjimui. Įveskite vardą .morph.

  5. Toliau turime pasirinkti veiksmą, kuris suaktyvins perėjimą. Meniu „Transition On“ pasirinkite Pakreipkite, kad perkėlimas įvyktų, kai užvesime pelę virš nuorodos. Kiti pasirinkimai apima: aktyvų, patikrintą, neįgalų, įjungtą, fokusavimą, užvedimą, neapibrėžtą ir taikinį.

  6. Norėdami pasirinkti meniu variantą, turime du pasirinkimus. Pasirinkime pirmąjį.

    Visoms ypatybėms naudokite tą patį perėjimą
    Kiekvienai ypatybei naudokite skirtingą perėjimą

  7. Perėjimo trukmei ir delsimui galime naudoti sekundes arba milisekundę. Nustatykime trukmę 1 sekundei, o atidėliojimą - 0,05 sekundės.

  8. Laiko nustatymo funkcijai turime kelis lengvinančius pasirinkimus. Pasirinkite „Lengva“.

  9. Norėdami pridėti CSS ypatybę, spustelėkite pliuso ženklą ir iškylančiame sąraše pasirinkite jį. Pasirinkite „Fono spalva“.

  10. Pasirinkę nuosavybę, galime nustatyti galutinę perėjimo vertę. Atsižvelgiant į pasirinktą nuosavybę, meniu Galutinė vertė pateiks atitinkamą tos nuosavybės meniu. Norėdami gauti foninę spalvą, gauname spalvų parinkiklį. Jei pridėsime savybę Šrifto svoris, gausime iš anksto nustatytų svorių meniu.

  11. Galiausiai turime pasirinkti Kur sukurti perėjimą. Mes galime pasirinkti tik šį dokumentą arba naujo stiliaus lapo failą. Panaudosime pirmąjį.

Kai spustelėsime mygtuką Sukurti perėjimą, pamatysime, kad perėjimas buvo pateiktas CSS perėjimų skydelyje, nurodant, kad morfo perėjimą suaktyvins užvedimo veiksmas ir pritaikys a.morph taikiniui.

Jei patikrinsime kodo rodinį, pamatysime, kad nuoroda buvo pridėta morfo klasė.

Kai perkelsime pelę virš nuorodos tiesioginiame rodinyje, fono spalva pasikeis.

O kas, jei mums reiktų redaguoti perėjimą? Tai galime padaryti naudodamiesi CSS Transitions skydeliu.

  1. Pasirinkite a.morph perėjimą ir redagavimo piktograma taps aktyvi (pieštuko piktograma).

  2. Spustelėkite piktogramą Redaguoti, kad atidarytumėte dialogo langą Redaguoti perėjimą. Čia galime prireikus pakeisti reikšmes arba pridėti naują nuosavybės ir galutinę vertę.

Dabar, kai jau sukurtas morfo perėjimas, galime lengvai jį pritaikyti kitiems elementams, nes dabar jį galima rasti meniu Tikslinė taisyklė.

* „Adobe“ man pateikė šios programinės įrangos kopiją peržiūros tikslais.

Autorių teisės 2018 m. „Adobe Systems Incorporated“. Visos teisės saugomos. „Adobe“ produkto ekrano kopija (-os) perspausdinta gavus „Adobe Systems Incorporated“ leidimą. „Adobe“, „Photoshop“, „Photoshop Album“, „Photoshop Elements“, „Illustrator“, „InDesign“, „GoLive“, „Acrobat“, „Cue“, „Premiere Pro“, „Premiere Elements“, „Bridge“, „After Effects“, „InCopy“, „Dreamweaver“, „Flash“, „ActionScript“, „Fejerverkai“, „Prisidėkite“, „Captivate“, „Flash Catalyst“ ir „Flash“ popierius yra (yra) registruotas (-i) prekės ženklas (-ai) arba „Adobe Systems Incorporated“ prekės ženklas (-ai) JAV ir (arba) kitose šalyse.