10 sztuczek Design Studio – część 2

Klasa CSS to zestaw skryptów i stylów napisanych w języku CSS, którą chcemy przypisać naszemu elementowi. Możemy myśleć o nich jak o globalnych funkcjach, ułatwiających nam pracę nad wieloma elementami. Przy użyciu klas CSS wystarczy tylko ustalić jej nazwę dla elementu, zamiast przepisywać cały kod. Na dodatek możemy zmieniać klasy skryptami – daje to możliwość tworzenia naprawdę ciekawych przemian.

Przykład zastosowania: w zależności od tego, czy liczba dni nieobecności wybranego pracownika jest poniżej lub powyżej średniej działu, w którym pracuje, możesz zmienić kolor tekstu na zielony lub czerwony.

Edycja klas CSS odbywa się na dodatkowym ekranie, do którego możemy przejść naciskając odpowiedni przycisk znajdujący się w górnym panelu opcji aplikacji:

W zależności od naszej aplikacji i szablonu, na którym ją utworzyliśmy, naciśnięcie przycisku otworzy przypisany już plik .css lub poprosi o wskazanie ścieżki do pliku.

Jeśli znajdujemy się w tej drugiej sytuacji, możemy utworzyć pusty plik tekstowy, zapisać go w formacie .css, a następnie wskazać aplikacji. Jeśli nie mamy żadnego doświadczenia z pisaniem dokumentów tego typów, dla ułatwienia możemy skopiować zawartość już istniejącego np. z aplikacji utworzonej na jakimś szablonie.

Ekran edycji CSS po stronie aplikacji prezentuje się następująco:

Możemy zauważyć, że nasz ekran Outline wskazuje teraz zarys wszystkich klas i właściwości naszego pliku. Poniżej przykład ich działania na elemencie tekstowym.

Tworzymy nową klasę myTekstClear odpowiednio ustawiając w pliku tę linijkę:

.myTekstClear{
font-size:160%;
}

Miejsce między nawiasami wypełniamy wartościami, które chcemy przypisać dla elementów korzystających z naszej klasy. Element font-size pozwala na zmianę wielkości czcionki.

Żeby ustawić klasę dla naszego elementu należy przejść do jego właściwości, a następnie w dziale Display wpisać odpowiednią nazwę w polu CSS Class.

Możemy zauważyć, że wygląd elementu uległ modyfikacji pod wpływem zmiany klasy. Przed jej ustawieniem:

Po jej ustawieniu:

Następnie będziemy dodawać pojedynczo nowe linijki do naszej klasy i przedstawiać efekt każdej z nich.

Uwaga! Plik CSS należy zapisywać na bieżąco po każdej zmianie by móc je podejrzeć.

1. Zmiana koloru
color: darkgray;

Spowoduje zmianę koloru tekstu z czarnego na szary:

2. Dodanie obramowania

text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Spowoduje dodanie czarnego obramowania wokół naszego tekstu:

3. Wyśrodkowanie tekstu

text-align:center !important;

Spowoduje wyśrodkowanie tekstu w zależności od ustawienia elementu:

Nasza funkcja powinna ostatecznie wyglądać tak jak poniżej:

.myTekstClear{

font-size: 160%;
color:darkgray;

text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

text-align:center !important;
}

Co w przypadku kiedy chcielibyśmy np. dynamicznie zmienić koloru tekstu, w zależności od różnych czynników? Nic prostszego! W tym wypadku możemy utworzyć drugą, identyczną klasę, a następnie zmienić w niej kolor oraz nazwę, np. tak jak tutaj:

.myTekstGreen{

font-size: 160%;
color:lightgreen;

text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

text-align:center !important;
}

Żeby zmienić kolor naszego tekstu, w interesującym nas momencie skryptu należałoby wpisać tę linijkę:

TEXT_1.setCSSClass(„myTekstGreen”);

Zapisz się do
naszego newslettera

Nie przegap nowych aktualizacji