(Mały trick na początek, z tych oczywistych: To, że są to generatory przycisków, wcale nie oznacza, że można je stosować tylko do generowania przycisków. :) Przecież wystarczy w niewielkim stopniu zmienić kod, a można stworzyć np. bardzo ładne pole tekstowe lub boks na treść…)
W momencie, gdy większość nowoczesnych przeglądarek obsługuje już nowe definicje CSS3, ich użycie zaczyna nabierać sensu. A jest w czym wybierać.
Poprzednio było tylko jednokolorowe tło, ramka, definicja kroju czcionek i jego atrybutów. Teraz dochodzą: dowolne gradienty tła, cienie lub poświaty zewnętrzne lub/i wewnętrzne, dowolny krój czcionek (dla samej czcionki również cienie/poświaty), zaokrąglenia, przekrzywienia, obracanie, a do tego jeszcze animacje (transitions) przy przejściu do/do róznych stanów przycisków. Aż trudno wymyślić coś więcej…
W takiej mnogości opcji nie dziwota że zaczęły pojawiać się generatory. Poniżej zaprezentuję trzy dobre generatory przycisków dowolnych elementów „boksowych” CSS3. Od dobrego do najlepszego.
Na pierwszy ogień, najbardziej popularny:
CSS Tricks Button Maker
Zalety: Prosty, czysty, czytelny, intuicyjny. Przycisk można stworzyć bardzo, ale to bardzo szybko. Pokazuje podgląd na żywo i ustawianie podstawowych opcji: krój czcionki (tylko trzy do wyboru), wielkość czcionki, margines wewnętrzny, zaokrąglenia, kolory gradientu, tekstu i tła dla stanów aktywnego i naciśniętego.
Czego mu brakuje: Niestety brak mu wielu rzeczy. Przede wszystkim precyzyjnej edycji wartości, poza tym ustalania cienia/poświaty, większej ilości czionek do wyboru, definicji wyglądu gradientu, animacji, gradientów i innych opcji dla stanów aktywnego i naciśniętego…. No i wkurza mnie że np. cień dla napisu jest „na sztywno” zdefiniowany. Kod żródłowy przycisku otrzymujemy po jego naciśnięciu – wbrew pozorom nie musi to być oczywiste.
Drugi generator, ten już umie więcej:
CSS3 Button Generator
Zalety: Wszystkie opcje widoczne od razu, podgląd w real-time, ustawienia ładnie pogrupowane: tło, ramki, cienie/poświaty, kolor i wielkość napisu, cienie/poświaty dla napisu, biblioteka gotowych przycisków.
Czego mu brakuje: Brak definicji kroju i atrybutów czcionek, określania jakiegokolwiek wyglądu przycisku w stanie naciśnięcia/po naciśnięciu, suwaki lub nawet zwykłe pola tekstowe byłyby wygodniejsze niż listy select (którymi posługujemy się w przypadku tego generatora) – przez to definiowanie wymarzonego przycisku może potrwać trochę dłużej…
Przypadek trzeci:
DVIA Button Generator (beta)
Zalety: mimo że jeszcze „w betach”, to właściwie wszystkoumiejący. Edycja w zakładkach w osobnym oknie – IMO wygodnie i praktycznie. Definiujemy chyba prawie możliwe wartości na wszystkie możliwe sposoby. Podgląd oczywiście w real-time. Na uwagę zasługuje genialny edytor gradientu, który ja osobiście traktuję jako osobne narzędzie w narzędziu.
Czego mu brakuje: Jako że beta, potrafi czasem (rzadko ale zawsze) sypnąć błędem. Poza tym denerwujące jest to, że wygląd pseudoklasy :hover i :click projektujemy rozpoczynając od domyślnych ustawień, a nie od projektu określonego dla normalnego wyglądu przycisku. Przydałaby się też osobna edycja ramki na każdej z krawędzi, podobnie dla zaokrągleń narożników.
To tyle na dziś… mam nadzieję że się komuś przydałem.
Gwoli przypomnienia: O (innym, prostszym) generatorze przycisków pisałem już tutaj.
Wpadłem ostatnio na webaplikację „Silk”, dzięki której można kilkoma kliknięciami i pociągnięciami myszy wygenerować efektowną, kolorową grafikę. Grafika „rysuje się” w ciekawy sposób, podczas której istnieje możliwość sterowania wiatrem (shift+ruchy myszką) a efekt możemy zapisać. Można też powtórzyć animację. Zabawa przednia, przynajmniej na kilka minut. Lubię takie interaktywne dema, pokazują one moc komputerów i Internetu jako narzędzi.
