Dopisek uzupełnaijący (a może detronizujący?) poprzedni wpis o tego typu narzędziach: Trzy sprawdzone generatory przycisków CSS3. Otóż webnarzędzie cssbuttongenerator.com jest proste, łatwe, szybkie, dostępne, intuicyjne i darmowe. Ofkors pisze o kreatorze buttonów w css3. Jak dla mnie super – można stworzyć stan nieaktywny i aktywny, zaokrąglenia, cienie, gradienty, przesunięcia, cienie i inne bajery rodem z CSSa trzeciego (bez krzty grafiki ani JS).
Do ulubionych przeglądarki i używania na co dzień dla każdego webmastera.
Tag: css3
Pokaz animacji CSS
Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…
Konwerter fontów TTF do EOT
Jako że niezgodność potrzeb przeglądarek w zakresie używania zewnętrznych krojów czcionek przez css3 (btw tutaj dobre rozwiązanie problemu) powoduje, że dość często (bo przy tworzeniu każdego szablonu) potrzebuję przekonwertować krój zapisany w TTF (takich czcionek mam tysiące) do EOT (a takich mam zaledwie kilka) – znalazłem szybki i pożyteczny konwerter pod adresem http://www.kirsle.net/wizards/ttf2eot.cgi . Używam już kilka miesięcy z powodzeniem, zatem polecam.
Adobe popiera HTML5!
To się musiało stać, chociaż dziwi mnie, że to właśnie Adobe, właściciel technologii Flash, wypuścił narzędzie – Adobe Edge – wizualny edytor HTML5, CSS3 i JS. Na razie to początki, ale dla mnie to wyraźny znak, że flash odchodzi, a na jego miejsce wkraczają nowe technologie.
Kartki CSS3
To taki dodatek do poprzedniego wpisu – bo w tym samym temacie znalazłem podobny materiałs. Oto Pure CSS3 Frame Boxes, czyli świetnie wykonane projekty kartek pojedyńczych lub wielu, z zawiniętymi rogami, przyklejonych w różnych miejscach taśmą, itd. Efekt robi wrażenie, szczególnie gdy uświadomisz sobie, że te grafiki zostały w całości wygenerowane w CSS3… BTW. Czy jest już jakiś wizualny edytor grafiki, który efekt zapisuje w kodzie CSS? :)
Efektowne cienie warstw w CSS
Nowy CSS umożliwia dodanie każdej warstwie cienia – wewnętrznego lub zewnętrznego, o określonym rozmiarze, natężeniu, kolorze i przesunięciu. Ale już przy minimalnej wyobraźni i stosunkowo niewielkich modyfikacjach w samym kodzie CSS – możemy uzyskać o wiele bardziej efektowne efekty cieni. Udowodnił to w swoim blogu Nicolas Gallagher, opisując dokładnie (acz po angielsku) tworzenie takich wypaśnych cieni i serwując smakowity przykład.
Layer Styles
Oszukałem Was – przepraszam.
Ale bezwiednie. :) Bo pisząc notkę o Ultimate CSS Gradient Generator (dwie notki niżej) jako o rewelacyjnym narzędzi do tworzenia gradientów css, nie wiedziałem o webaplikacji Layer Styles more info here.
A Layer Styles potrafi o wiele więcej – możesz edytować cień zewnętrzny i wewnętrzny, gradient tła, obwiednię i zakrzywienie rogów. To wszystko ze wszystkimi możliwymi opcjami, z podglądem w czasie rzeczywistym, i w megawygodnej formie przesuwalnego okna efektów, takiego samego jak w Photoshopie. I to jest naprawdę rewelacja. Wygoda, intuicja, szybkość działania. Tego szukamy. :)
Rewelacyjny generator gradientów CSS
Jak wiadomo, tworzenie zaawansowanych gradientów „z palca” nie jest łatwe. Dlatego szukałem dobrego generatora. I w końcu znalazłem czego szukałem.
Webnarzędzie do generowania różnorakich gradientów kolorystycznych dla elementów CSS3, ze wszystkimi przydatnymi opcjami i bajerami. Intuicyjne, łatwe w obsłudze, szybkie i skuteczne. Oparte na rozwiązaniach GUI znanych z programów graficznych. Generujące w czasie rzeczywistym kod CSS kompatybilny ze wszystkimi nowoczesnymi przeglądarkami. Umiejące także importować gradient z kodu CSS, a nawet z obrazka. No i posiadające zbiór predefiniowanych gradientów – rewelacja. Są tam także gradienty z efektem szkła, odbić, gładkie delikatne przejścia kolorystyczne (trudne do uzyskania i „wyczucia”) itp. cuda. Można także zapisać swoje gradienty.
Zdecydowanie przyda się każdemu tworzącemu nowoczesne strony WWW.
Ale o czym mowa? O narzędziu Ultimate CSS Gradient Generator. Polecam.
Nietypowe kształty w CSS
Nowa generacja języka CSS daje nam bardzo dużo możliwości – między innymi generowanie różnych kształtów boksów za pomocą jedynie kodu CSS. Możliwości jest naprawdę wiele – od prostokątów, rombów, równoległoboków, poprzez koła, elipsy, różnorakie trójkąty, wielokąty, gwiazdy, do kształtu kropli, symbolu nieskończoności lub innych (nawet wymyślnych) kształtów.
Dzięki tym (i innym nowym) możliwościom nowego CSS (i HTML5) – tworzenie stron staje się bardziej programowaniem niż projektowaniem. Ale to temat na inny wpis :)
Wracając do tematu: Jak na razie znalazłem dwa miejsca gdzie opisane są przykłady tworzenia nietypowych kształtów. Jedno z nich to odpowiednia sekcja niezawodnego kursu HTML i CSS Pawła Wimmera. Drugie źródło, o nieco innej formie i podejściu – to The Shapes of CSS – Wpis na stronie css-tricks.com. Treść obu tych źródeł każdy szanujący się webmajster powinien sobie przyswoić w stopniu znacznym. ;)
3 sprawdzone generatory przycisków CSS3
(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.