Przejścia CSS3 w Dreamweaver CS6

• Może 10, 2024

Po dodaniu HTML5 i CSS3, interaktywne strony internetowe stają się oczekiwane. Teraz dzięki Dreamweaver^R CS6 i nowy panel CSS Transitions, możesz tworzyć własne interaktywne efekty bez potrzeby pisania kodu. Dane wyjściowe z tego procesu to tylko CSS3, bez JavaScript. Dlatego nie musisz się martwić, jeśli przeglądarka włączyła JavaScript. Przejścia utworzone przez Dreamweaver mogą być odtwarzane w dowolnej nowoczesnej przeglądarce internetowej.

Zobaczmy, jak łatwo jest tworzyć własne interaktywne przejścia. Przejście można zastosować do dowolnej klasy, ID lub elementu CSS. Wszystko, co musimy zrobić, to ustawić wartości w panelu Przejścia CSS.

1. Naszym pierwszym krokiem jest wybranie elementu, do którego chcemy zastosować przejście. W naszym przykładzie będzie to link do menu.
   
   
2. Kliknij Okno - Przejścia CSS, aby otworzyć panel.
   
   
3. W panelu Przejścia CSS kliknij znak Plus, aby dodać przejście.
   
   
4. W oknie dialogowym Nowe przejście możemy użyć menu Reguła docelowa, aby wybrać ustawienia wstępne lub wpisać własną nazwę przejścia. Wpiszmy nazwę .morph.
   
   
5. Następnie musimy wybrać akcję, która wyzwoli przejście. Z menu Transition On wybierz opcję Hover, aby przejście uruchomiło się po umieszczeniu myszy nad linkiem. Inne opcje obejmują: aktywne, zaznaczone, wyłączone, włączone, fokus, aktywowanie, nieokreślone i docelowe.
   
   
6. W przypadku opcji menu mamy dwie możliwości. Wybierzmy pierwszy.
   
   Użyj tego samego przejścia dla wszystkich właściwości
   Dla każdej właściwości użyj innego przejścia
   
   
7. Do czasu trwania i opóźnienia przejścia możemy użyć sekund lub milisekund. Ustawmy Czas trwania na 1 sekundę, a Opóźnienie na 0,05 sekundy.
   
   
8. W przypadku funkcji pomiaru czasu mamy kilka opcji łagodzenia. Wybierzmy Ease Out.
   
   
9. Aby dodać właściwość CSS, kliknij znak plus i wybierz jedną z wyskakującej listy. Wybierzmy kolor tła.
   
   
10. Po wybraniu właściwości możemy ustawić wartość końcową dla przejścia. W zależności od wybranej właściwości, menu Wartość końcowa wyświetli odpowiednie menu dla tej właściwości. Dla koloru tła otrzymujemy próbnik kolorów. Jeśli dodamy właściwość Font-Weight, otrzymamy menu z ustawionymi wagami.
    
    
11. Na koniec musimy wybrać Gdzie stworzyć przejście. Nasze opcje to Tylko ten dokument lub Nowy plik arkusza stylów. Użyjmy pierwszego.
    
    

Po kliknięciu przycisku Utwórz przejście możemy zobaczyć, że przejście zostało wymienione w panelu Przejścia CSS, co wskazuje, że przejście do zmiany kształtu zostanie uruchomione przez akcję aktywowania i zastosowane do celu a.morph.

Jeśli sprawdzimy widok kodu, zobaczymy, że klasa morf została dodana do linku.

Gdy przesuniemy myszką nad linkiem w widoku na żywo, kolor tła zmieni się.

Ale co jeśli będziemy musieli edytować przejście? Możemy to zrobić za pomocą panelu CSS Transitions.

1. Wybierz przejście a.morph, a ikona Edytuj stanie się aktywna (ikona ołówka).
   
   
2. Kliknij ikonę Edytuj, aby otworzyć okno dialogowe Edytuj przejście. Tutaj możemy zmienić wartości w razie potrzeby lub dodać nową właściwość i wartość końcową.
   
   

Po utworzeniu przejścia morfologicznego możemy z łatwością zastosować go do innych elementów, ponieważ jest on teraz dostępny z menu Reguła docelowa.

* Adobe dostarczyło mi kopię tego oprogramowania w celu sprawdzenia.

Prawa autorskie 2018 Adobe Systems Incorporated. Wszelkie prawa zastrzeżone. Zrzuty ekranowe produktów Adobe zostały przedrukowane za zgodą 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 jest / są [a] zarejestrowanym znakiem towarowym lub znakami towarowymi Adobe Systems Incorporated w Stanach Zjednoczonych i / lub innych krajach.

Instrukcje Wideo: Adobe After Effects CS6 - Sneak Peek - 2012 NAB Show - Las Vegas, NV (Może 2024).