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. :)

Silk – zabawka, czy generator grafiki?

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.

Jednak zastanawiam się, czy grafik wygenerowanych za pomocą „Silka” nie użyć przy projektowaniu stron. A jak wygląda sprawa praw autorskich? Co prawda pierwszą kreskę narysowałem ja, ale resztę wykonał algorytm, który zaprojektował twórca narzędzia. Tak czy owak – rzecz ciekawa przynajmniej do obejrzenia.

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. ;)

Wyostrzanie obrazków w PHP

Gdy za pomocą biblioteki graficznej GD, skalujemy w PHP obrazek w dół – staje się on po prostu nieostry. Jeśli dodać do tego kompresję JPG (która często dla miniaturek ustawiana jest na sporą wartość) – mamy mdłą miniaturkę, niezachęcającą do kliknięcia w nią tak jak powinna zachęcać. Czy jest na to sposób? Owszem – wystarczy przed zapisaniem miniaturki wyostrzyć ją. Początkowo chciałem taki skrypt sam napisać, ale przerosło mnie to. Zatem, po kilkudziesięciu minutach googlowania – znalazłem działające rozwiązanie, tutaj: adamhopkinson.co.uk/blog/2010/08/26/sharpen-an-image-using-php-and-gd

A na bloga wklejam, bo może komuś oprócz mnie też się przyda… Jeśli znasz podobne rozwiązania/tricki, śmiało daj znać w komentarzu.

(Obrazek zapożyczony z docelowego linku)

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.

Pomysł na tło – „gazetowe” kropki

Bywa tak, że tło strony decyduje o jej atrakcyjności. Jeśli nie mamy na nie pomysłu – z pomocą przychodzą webaplikacje, takie jak Stripe Generator, którego już opisałem.

Ale dzisiaj nie o paskach, a o kropkach – bo spodobała mi się aplikacja Pixelknetes Background Dotter.
Jest to bardzo prosty interfejs umożliwiający stworzenie tła dla strony www ze zmniejszających się kropek (jak w powiększonym druku gazetowym) – w tym z jedną lub dwiema warstwami. Po chwili zabawy można uzyskać bardzo ciekawe, inspirujące efekty. Jedynym minusem jest brak „ludzkiej” wybierajki kolorów – trzeba wpisywać ręcznie kod hex. Ale z drugiej strony co to za grafik który takich kodów nie ma w głowie (a jeśli nie ma – odsyłam do nauki grając w What The Hex).

Moje metody na zmuszenie się do pracy

Każdy freelancer to zna – gdy nie ma się nad sobą bicza (szefa), pojawiają się ciężkie godziny „niechceniamisię”. To wbrew pozorom bardzo trudna sprawa, bo zmusić się nie jest łatwo, a gdy na siłę zmusimy się bez chęci do pracy nad projektem częściowo artystycznym – będziemy podczas jego realizacji iść na skróty, co wpłynie zdecydowanie ujemnie na jego jakość.

Może Ameryki nie odkryję, ale pomyślałem, że wymienię tu kilka moich sposobów na takie chwile. Zrobię to choćby sam dla siebie.

Tak więc, gdy nie możesz się się przemóc, wykonuj następujące czynności (od najbardziej do najsłabiej działającego):

  1. Odpuść. Na 15-30 minut rób coś innego. Nie – nie coś „trochę innego” ale coś całkowicie innego. Im bardziej odległą czynność od Twojej niechcianej pracy będziesz robił(a), tym szybciej zachce Ci się pracować nad tymże niechcianym zadaniem. Zatem, najlepiej, odejdź od komputera, znajdź sobie czynność jak najbardziej „odcyfrowioną”. Obierz ziemniaki na obiad albo pogap się przez okno na pracę mechaników w zakładzie naprzeciwko (u mnie to działa rewelacyjnie, szczególnie jak się kłócą z jakimś ich klientem ;)).
  2. Pomarz sobie. Pamiętasz jakie fantazje miałeś/aś jako dziecko? To było coś! Spróbuj to przywołać, pomarzyć o czymkolwiek – na maksa popuścić wodze wyobraźni i po prostu puścić się na głębokie wody świata w którym absolutnie wszystko jest możliwe. 5 minut takiej sesji znakomicie relaksuje i pobudza chęć pracy.
  3. Wizualizuj. Masz zrobić projekt? Dobrze. Odejdź od komputera, połóż się na wznak i zrób go w myślach. Krok po kroku, w jak największych detalach. Zobaczysz, że w pewnym momencie nie będziesz mógł/mogła się powstrzymać od zasiądnięcia do realnej pracy, tym razem z przyjemnością.
  4. Rozdrobnij się. Wiem że to może wbrew wszystkim szkołom motywacji, ale u mnie to działa. O co chodzi? Otóż każdy ma mnóstwo małych spraw do uprzątnięcia/posegregowania/dokończenia itp. Takie małe prace „głupiego”. Zamień się na chwilę w pedanta i poukładaj i podokańczaj te małe sprawunki. Mój umysł takimi drobnostkami w niewiadomy sposób nakręca się do pracy nad większym dziełem. Może u Ciebie to też zadziała?
  5. Przyśpiesz sobie tętno. To oczywiste, powtarzane w wielu mądrych publikacjach. Zamiast zmuszać się do wysiłku psychicznego – zmuś się do fizycznego. Po chwili pojawi się niechęć do pracy fizycznej, i chęć pracy psychicznej. :)
  6. (gdy już nic nie działa a termin jutro) Zafunduj sobie krótką drzemkę. Max 40 minut. Nawet jeśli nie zaśniesz, zmuś się do leżenia przez ten czas z zamkniętymi oczami. Po wstaniu praca powinna przyjść łatwiej
  7. Rozruszaj umysł. Zadaj sobie stosunkowo skomplikowane zadanie matematyczne i spróbuj rozwiązać je w myślach. Albo postaraj się bez żadnych pomocy przetłumaczyć na obcy (znany Ci) język sens bardzo skomplikowanego, branżowego zdania. Po kilku takich operacjach mózg będzie zmęczony ciężką pracą i uzna za odpoczynek pracę, której wcześniej nie chciał wykonywać.
  8. Napisz wpis na bloga o Twoich metodach na zmuszenie się do pracy ;)

12 ładnych (?) szablonów

Na moim blogu dawno nie prezentowałem moich dziełek. Co prawda przewijają się po lewej, ale ktoś mógłby przegapić, więc nadrabiam – poniżej przedstawiam kilkanaście stosunkowo nowych projektów mojego autorstwa, które mi się najbardziej podobają. Co sądzicie?

Po więcej – zapraszam na GRX.pl.

BTW – zapraszam też do zapisania się do newslettera na GRX.pl – http://www.grx.pl/newsletter.php – dzięki temu będziesz otrzymywać informacje o każdym nowym szablonie.