CSS3 prijelazi u Dreamweaveru CS6
Uz dodavanje HTML5 i CSS3, interaktivne web stranice postaju očekivana. Sada, s DreamweaveromR CS6 i nova ploča CSS Transitions možete stvoriti vlastite interaktivne efekte bez potrebe za pisanjem bilo kojeg koda. Izlaz iz ovog procesa je samo CSS3, bez JavaScript-a. Stoga se ne morate brinuti je li gledatelj omogućio JavaScript. Prijelazi koje je stvorio Dreamweaver mogu se reproducirati u bilo kojem modernom web pregledniku.

Da vidimo kako je lako stvoriti vlastite interaktivne prijelaze. Prijelaz se može primijeniti na bilo koji element klase, ID ili CSS. Sve što trebamo učiniti je postaviti vrijednosti na ploči CSS Prijelazi.

  1. Naš prvi korak je odabir elementa na koji želimo primijeniti prijelaz. U našem primjeru to će biti veza s izbornikom.

  2. Kliknite Window - CSS Transitions da otvorite ploču.

  3. Na ploči CSS Transitions kliknite znak Plus kako biste dodali prijelaz.

  4. U dijaloškom okviru Nova tranzicija možemo upotrijebiti izbornik Pravila cilja da odaberemo unaprijed postavljene postavke ili upišemo svoje ime za prijelaz. Ukucajmo u ime .morph.

  5. Dalje moramo odabrati radnju koja će pokrenuti prijelaz. Na izborniku Transition On (Odabir uključenog) odaberite Hover (Hover), tako da će se prijelaz aktivirati kada miš postavimo iznad veze. Ostali izbori uključuju: aktivan, označen, onemogućen, omogućen, fokus, lebdjenje, neodređeno i ciljanje.

  6. Za opciju izbornika imamo dva izbora. Izaberimo prvo.

    Upotrijebite isti prijelaz za sva svojstva
    Upotrijebite drugačiji prijelaz za svaki entitet

  7. Za trajanje i odgađanje prijelaza možemo koristiti Sekunde ili Milisekunde. Postavimo Trajanje na 1 sekundu i Odgoda na .05 sekundi.

  8. Za funkciju vremenskog raspona imamo nekoliko olakšavajućih izbora. Izaberite Ease Out.

  9. Da biste dodali CSS entitet, kliknite znak Plus i odaberite ga s skočnog popisa. Izaberite boju pozadine.

  10. Nakon što odaberemo entitet, možemo postaviti Krajnju vrijednost za prijelaz. Ovisno o entitetu koji smo odabrali, izbornik Krajnja vrijednost dat će nam odgovarajući izbornik za taj entitet. Za pozadinsku boju dobivamo alat za odabir boja. Ako dodamo svojstvo Font-Weight, dobit ćemo izbornik s unaprijed podešenim utezima.

  11. Konačno moramo odabrati gdje stvoriti prijelaz. Naš izbor je samo ovaj dokument ili datoteka novog stila. Upotrijebimo prvi.

Jednom kada kliknemo gumb Stvori prijelaz, vidjet ćemo da je prijelaz naveden na ploči CSS Prijelazi, što ukazuje da će morfalni prijelaz biti pokrenut radom pokazivača i primijenjen na cilj a.morph.

Ako provjerimo prikaz koda, vidimo da je klasa morfija dodana na vezu.

Kad mišem pređemo poveznicu preko Live View-a, boja pozadine će se promijeniti.

Ali što ako trebamo urediti prijelaz? To možemo učiniti putem ploče CSS Prijelazi.

  1. Odaberite prijelaz a.morph i ikona Uredi će postati aktivna (ikona olovke).

  2. Kliknite ikonu Uredi kako biste otvorili dijaloški okvir Uredi prijelaz. Ovdje možemo promijeniti vrijednosti prema potrebi ili dodati novu Svojstvo i Krajnju vrijednost.

Sada kada smo kreirali prijelaz morfema, lako ga možemo primijeniti na druge elemente, jer je to sada dostupno iz izbornika Target Rule.

* Adobe mi je pružio kopiju ovog softvera radi pregleda.

Autorska prava 2018. Adobe Systems Incorporated. Sva prava pridržana. Snimke zaslona Adobe proizvoda preispisane su uz dozvolu tvrtke 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 i Flash Paper je ili su [a] registrirani zaštitni znak (i) ili zaštitni znak (Adobe) tvrtke Adobe Systems Incorporated u Sjedinjenim Državama i / ili drugim zemljama.


Upute Video: Photoshop: Transparentna pozadina (no.5) (Ožujak 2024).