Panel Przejścia CSS umożliwia tworzenie, modyfikowanie i usuwanie efektów przejścia CSS3.

Aby utworzyć efekt przejścia CSS3, należy zdefiniować klasę przejścia. Robi się to, przypisując odpowiednie wartości tym właściwościom elementu, które sterują przejściem. Jeśli przed przystąpieniem do tworzenia klasy przejścia był już zaznaczony element, to klasa przejścia zostanie automatycznie zastosowana do tego elementu.

Wygenerowany kod CSS można dodać do bieżącego dokumentu albo wybrać zewnętrzny plik CSS.

Tworzenie i stosowanie efektu przejścia CSS3

  1. (Opcjonalnie) Zaznacz element (akapit, nagłówek itp.), do którego chcesz zastosować efekt przejścia. Można również utworzyć przejście, a dopiero później zastosować je do elementu.

  2. Wybierz polecenie Okno > Przejścia CSS.

  3. Kliknij ikonę .

  4. Utwórz klasę przejścia, korzystając z opcji w oknie dialogowym Nowe przejście.

    Reguła docelowa

    Wpisz nazwę selektora. Selektorem może być dowolny selektor CSS, np. znacznik, reguła, identyfikator lub selektor złożony. Na przykład aby zastosować efekty przejścia do wszystkich znaczników <hr>, wpisz selektor hr

    Przejście podczas

    Wybierz stan, do którego chcesz zastosować przejście. Na przykład aby efekt przejścia był stosowany wtedy, gdy kursor myszy przesuwa się nad element, należy użyć opcji hover.

    Użyj tego samego efektu przejścia dla wszystkich właściwości

    Wybranie tej opcji umożliwia użycie tych samych wartości parametrów Czas trwania, Pauza i Funkcja regulacji czasu dla wszystkich właściwości CSS, które mają podlegać przejściu.

    Użyj innego efektu przejścia dla każdej właściwości

    Wybranie tej opcji umożliwia podawanie osobnych wartości parametrów Czas trwania, Pauza i Funkcja regulacji czasu dla poszczególnych właściwości CSS, które mają podlegać przejściu.

    Właściwość

    Kliknij ikonę , aby dodać właściwość CSS do efektu przejścia.

    Czas trwania

    Wprowadź czas trwania efektu przejścia w sekundach (s) lub milisekundach (ms).

    Pauza

    Określa czas oczekiwania (w sekundach lub milisekundach) na rozpoczęcie efektu przejścia.

    Funkcja regulacji czasu

    Wybierz styl przejścia spośród dostępnych opcji.

    Wartość końcowa

    Końcowa wartość efektu przejścia. Aby na przykład po zakończeniu efektu przejścia rozmiar czcionki zwiększył się do 40 pikseli, należy podać wartość 40 px dla właściwości „font-size”.

    Wybierz położenie przejścia

    Aby osadzić styl w bieżącym dokumencie, wybierz opcję Tylko ten dokument.

    Jeśli chcesz utworzyć zewnętrzny arkusz stylów dla kodu CSS3, wybierz opcję Nowy plik z arkuszem stylów. Po kliknięciu opcji Utwórz przejście program poprosi o określenie miejsca, w którym ma zostać zapisany nowy plik CSS. Nowo utworzony arkusz stylów jest dodawany do menu Wybierz położenie przejścia.

Edytowanie efektów przejścia CSS3

  1. Przejdź do panelu Przejścia CSS i zaznacz efekt przejścia, który chcesz edytować.

  2. Kliknij ikonę .

  3. Posługując się oknem dialogowym Edytuj przejście, zmodyfikuj wprowadzone wcześniej wartości przejścia.

Wyłączanie notacji skróconej CSS dla przejść

  1. Wybierz polecenie Edycja > Preferencje.

  2. Wybierz opcję Style CSS.

  3. W sekcji Użyj skrótów dla usuń zaznaczenie pozycji Przejście.


Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online