CSS3 prelivi za Linux

Ako ste se ikada dotakli dizajniranja za Web, onda ste neizostavno upoznati sa formulom HTML + CSS = BINGO! Dakle, izgled i raspored objekata formiranih u HTML kodu kontrolišemo pomoću standarda CSS (Cascading Style Sheet). Tako je već nekih desetak godina, a ako ste ovo radili u skorije vreme, onda je pažnja usmerena ka trećoj generaciji stilova, poznatijoj kao CSS3. Jedna od zanimljivosti ove generacije standarda je mogućnost pravljenja linearnih preliva za popunu objekata (npr. pozadine strane ili nekog dela sa tekstom, menija, dugmadi i slično). Ručno pravljenje linear-gradient definicija bez direktnog uvida u izgled rezultata ravno je kotrljanju Sizifovog kamena.

Program Gradiator iz naslova ovog teksta je jednostavan, mali softver koji će pomenuti istorijski kamen gurnuti do najvišeg vrha, a zapravo omogućava lako kreiranje CSS3 definicija za linearne prelive. Napisan je u neizbežnom Pythonu, i osim tarball paketa za ručnu instalaciju na ostale distribucije, koji može da se preuzme sa zvanične web stranice projekta, instalacija na sistemu Ubuntu svodi se na dodavanje PPA repozitorijuma i finiširanje posla komandama:

sudo add-apt-repository ppa:cooperjona/gradiator -y

sudo apt-get update

sudo apt-get install gradiator -y

Pokretač programa smešta se u odeljak za razvoj Unity (SK 1/2011) menija, a alternativno pokretanje samog programa svodi se na izvršavanje komande gradiator.

Interfejs programa je jednostavan, intuitivan, funkcionalan, a takođe i vizuelno dopadljiv. Nema nikakvih menija i ikonica, već je podeljen na horizontalne odeljke. Na vrhu je traka za prikaz preliva sa slajderom za dodavanje, pomeranje i uklanjanje stanica boje (engl. color stops).

Niže je odeljak koji prikazuje providnost (alpha), HEX vrednost boje izabrane stanice, poziciju i opciju za njeno uklanjanje. Klikom na neko od prva tri informativna polja ovaj odeljak menja izgled u skladu s tim kako izabrano polje može da se podešava. Tako možemo da dobijemo polje za unos i klizač za izbor providnosti, odnosno pozicije stanice, i polje za ručni unos vrednosti boje (u formatu HEX, RGB ili HSL) ili automatski izbor pipetom na standardnom GTK Color selektoru. Stanice boje (stops) dodaju se jednostavnim klikom na slajder sa stanicama, a uklanjaju se klikom na polje remove stop onda kada je stanica izabrana, a postavke njenih karakteristika sačuvane.

Treći horizontalni odeljak sastoji se od birača smera preliva i dugmadi za podešavanja programa (izbor web browserâ za koje će biti generisana specifična CSS definicija; podržani su Firefox, Webkit, Legacy Webkit, Opera, IE i CSS3) i donaciju autoru programa na levoj strani, odnosno vizuelnog „živog” prikaza preliva na desnoj strani. Na samom dnu je dugme GET CODE, koje CSS definiciju dizajniranog preliva kopira u clipboard.

Program radi stabilno i brzo, i na najvišem nivou i skoro u potpunosti ispunjava povereni mu zadatak. Kažemo skoro zbog nekoliko uočenih mana, kao što su nedostatak čuvanja napravljenih preliva sa mogućnošću učitavanja nekog ranije sačuvanog šablona, te resetovanje na podrazumevane postavke preliva. Nema ni voljene nam opcije Undo, pa kad jednom sačuvate izmene, nema nazad osim da ručno ispravljate urađeno. Ovo je posebno problematično u slučaju da promenimo providnost neke stanice, pa onda promenimo i njenu boju. Nakon toga nije moguće vratiti (ne)providnost te stanice na 100 odsto, pa se rešenje ovog problema svodi na uklanjanje stanice i dodavanje nove.

Mi se svakako nadamo tome da će pomenuti nedostaci već u narednoj mikroverziji biti otklonjeni. Ako već pravite linearne prelive za Web, Gradiator je svakako alatka koju morate imati.

Aleksandar UROŠEVIĆ