<autoreklama>
Rewolucyjne Witryny Internetowe tani CMS szablony dla stron www retusz zdjec
</autoreklama>

Fancy Border Radius Generator

19 lutego 2019

Wiedzieliście że można zaokrąglać narożniki boksów niesymetrycznie? No to już wiecie. To łatwizna, ale jest też pchełka którą można zrobić to wizualnie. To ta z tytułu tego posta. Polecaju. :)

Clippy – narzędzie do tworzenia kształtów

18 stycznia 2019

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Wycinanie tła

10 grudnia 2018

Jakiś czas temu opisywałem już webappkę Clippingmagic, która wycina tło.
Ta opisywana teraz webappka – Remove.bg – jest jednak o trochę lepsza, choć nie idealna (gdy tło jest różnorodne i kolorystycznie zbliżone do obiektu wycinanego – raczej nie działa). Nic nie zastąpi ręcznego szparowania w fotoszkopie, ale zawsze warto adres remove.bg znać. Może kiedyś się do czegoś przyda…

Prosta gierka HTML

22 listopada 2018

Zapomnieliście już że gry też tu miałem zamiar zamieszczać, co?
Ja też zapomniałem…
Ale sobie przypomniałem i dlatego zapraszam poniżej:

1

Style dla map Google

18 sierpnia 2018

Snazzymaps.com umożliwia stylowanie map googlowych. Można w zasadzie dopracować mapę tak, żeby była dokładnie w stylu strony na której jest prezentowana. To tyle – tylko tyle i aż tyle :)

Obrazy generowane przez AI

11 maja 2018

Jako że blisko mi do grafiki, obrazów i tym podobnych wizualnych rzeczy, a jednocześnie fascynuje mnie tworzenie obrazów kodem/algorytmem – to rzeczą naturalną jest to że zaciekawiły i zauroczyły mnie obrazy tworzone przez sztuczną inteligencję.

W Sieci jest kilka generatorów tego typu obrazów – na przykład deepart.io czy deepdreamgenerator.com.

Jak to działa? Wrzucasz do maszynki dwa obrazy. Maszynka (a raczej AI, która nie jest tak naprawdę sztuczną inteligencją ale algorytmem maszynowym – uczącym się) stosuje styl graficzny drugiego obrazka na pierwszym. Trzeba trochę poczekać i pokombinować, ale ze zwykłych zdjęć wychodzą cuda.

Polecam do pooglądania:

https://deepart.io/latest/

https://deepdreamgenerator.com/feed

https://pl.pinterest.com/revolwebPL/the-best-of-ai-deep-dream-generator/ – mój pinterestowy subiektywny zbiór najlepszych tego typu prac

Zagraj w grę ćwiczącą Grid w CSS

10 stycznia 2018

Grid Garden to kolejna świetna gierka – bawiąc się, uczysz się poprawnie programować w CSS, i to tych najnowszych technik. Razem z dwa posty poniżej opisaną grą – świetny pakiet. Polecam!

Tablica Wimmera

18 listopada 2017

Trochę OT, ale warto zajrzeć. Mój programers z firmy, Picios, stworzył bardzo fajną webappkę to ogarniania, na co warto zwrócić uwagę na niebie w nocy (tj. co świeci najjaśniej). Astronomia here. Sprawdź: Wimmer’s Table.

Zagraj w grę ćwiczącą Flexbox w CSS

20 października 2017

Flexbox to genialne nowe rozwiązanie CSS (zaraz obok grida, ale o nim kiedy indziej). Umożliwia bardzo łatwe i elastyczne pozycjonowanie elementów. Jeśli jeszcze go nie znasz – poznaj dzięki tej grze: Flexbox Froggy. Ja się tą grą nauczyłem flexboxa od zera do bohatera.

Fancybox pozamiatał wszystkie lightboxy

18 sierpnia 2017

To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.
Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.

Jak najszybciej znaleźć ikonę? Nabazgrać!

12 kwietnia 2017

Gugiel wybuścił dziś nową apkę webową – autodraw. Pomysł jest prosty – algorytm bada co bazgrzesz, zgaduje ostateczny kształt i czasie rzeczywistym proponuje gotowe ikony – ładne i równe szkice zamiast Twojego bazgroła. Działa to bardzo dobrze:

Ale ja widzę genialne zastosowanie dla grafików/projektantów. Ile razy traciłeś cenne godziny minuty żeby odnaleźć ikonkę? Wpisujesz w wyszukiwarkę ikon (tą czy inną) tagi, synonimy szukanego słowa itp. To trwa. A tak – Google Autodraw, maz-maz – i odnalezione!
Googlu, kolejny raz przedłużasz mi życie! ;)

Jakie kroje czcionek w konkretnym użyciu?

2 marca 2017

Wśród nas (grafików, projektantów, osób związanych z designem) są osoby, dla których fonty są fetyszem. Te osoby chętnie oglądają galerie krojów, cmokają z uznaniem nad stylem, wymową formy, krzywiznami, podobieństwami itp. a jednocześnie… sami w swoich projektach używają co najwyżej 10 rodzajów fontów. Niestety (a może stety :)) zaliczam się do tych osób. Na blogu Abduzeedo istnieje osobna seria postów prezentujących czcionki, które oglądam często z wywalonym jęzorem.

Wywiad ze mną

1 września 2015

Sam nie mogę w to do końca uwierzyć, ale na oficjalnym polskim blogu legendarnego serwisu Template Monster pojawił się wczoraj wywiad ze mną. Starałem się odpowiadać szczerze i obszernie. Jest trochę o życiu, o drodze do celu, o oczekiwaniach i błądzeniach. Ale i o grafice, webmasterce, traktowaniu Klientów i o pracy.
Myślę że wyszło dość ciekawie, dlatego zapraszam do przeczytania. :)

Sposób na testowanie mobilnych www

23 lipca 2015

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

Gry w przeglądarce i Orc Attack

20 grudnia 2014

Ponieważ lubię także pograć w prste gry, najlepiej bez instalowania niczego na komputerze, postanowiłem stworzyć na tym blogu nowy tag „gry-przeglądarkowe. Pod tym tagiem będę wrzucał linki do gier które mi się spodobały, odprężają i są po prostu fajne. Z tym że nie należy się spodziewać linków do flashówek, jakich pełno w sieci. Owszem – gry flash także moga się pojawić, ale jedynie te najlepsze, przy których posiedziałem przynajmniej kilka godzin. Będę za to faworyzował gry 3d, korzystające z WebGL i HTML5. Takich można się spodziewać najczęściej.

orc attackNa pierwszy ogień gierka którą znalazłem dziś: The Hobbit – Orc Attack. Jesteś elfem i walisz z łuku do orków. Ładna oprawa i całkiem dobry flow w grze sprawiają że ten – w sumie – point’n’shoot – jest całkiem grywalny. :)

Isotope

3 grudnia 2014

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Fluidy w WebGL

20 listopada 2014

fluidwebglPamiętacie Silk? To taka zabawka kolorową plazmą.

Teraz czasy się trochę zmieniły, mamy do dyspozycji zaawansowany silnik graficzny w przeglądarkach – WebGL. I zaczyna się „dziać”. Jedną z zabawek o której warto wspomnieć, jest Fluid Experiment. Zasadniczo to też zabawka, ale się animuje i zachowuje jak płyn. Powiadam Wam – power drzemie w waszych browserach! :)

Parallax na Twojej stronie www

2 listopada 2014

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.

Wyszukiwanie podobnych obrazków

7 października 2014

Podczas pracy przy webdeveloperce dość często, z różnych powodów, zdarza się, że potrzebujemy wyszukać obrazek podobny do tego który już mamy. Najczęściej Klient podsyła mi do projektu jakąś ilustrację do której nie ma praw, a moim zadaniem jest odnaleźć możliwie podobną, którą mogę zakupić wraz z prawami do użycia.

W Chrome sposób na to jest prosty. Wczytuje obrazek do przeglądarki, nasiskam klawisz „s” i klikam na obrazku prawym przyciskiem myszki. Powoduje to wyszukiwanie przez Google obrazków podobnych. Ale to wyszukiwanie nie jest idealne.

tineyeDlatego warto skorzystać z dedykowanej wyszukiwarki tego typu, jaką jest na przykład TinEye. Działa szybko, prosto, intuicyjnie, a wyniki wyszukiwania są bardzo zadowalające.

Spin! czyli kręciołek w JavaScript

30 września 2014

spinjsJuż dwa razy poruszałem temat generatorów loaderów: tutaj i tutaj. jednak w obu przypadkach generatory te produkowały grafikę/animację.

Tym razem jest inaczej. Spin.JS to skrypt który tworzy animację ładowania przez kod JS. Animację co prawda słabo konfigurowalną (chociaż – czy słabo? Zobacz ile suwaczków! :)), ale lekką, przyjemną, bez plików, skalowalną, i przyjazną wszystkim przeglądarkom.

Justowanie wszystkich linii

25 lipca 2014

justified-textPod tym adresem znalazłem fajne rozwiązanie justowania także ostatniej linii. Działa dobrze więc wklejam tutaj dla potomnych (i dla siebie ;)). No chyba że ktoś zna lepsze rozwiązanie tego problemu…?

Kupię stronę www – nowy projekt

1 kwietnia 2014

kupiestroneCoraz częściej zdarza mi się kupować gotowe strony www od osób które chcą je z róznych względów sprzedać. Na szybko stworzyłem ostatnio prostą stronę trochę oszczędzającą mój czas – zamiast wysyłać pytania każdemu kto jest zainteresowany sprzedażą swojego serwisu, teraz będę podawał adres witrynki służącej mi do zbierania takich informacji: KupieStrone.pl , a tam jest już odpowiedni formularz…

Dodatkowo, jest możliwość dopisania się do newslettera i także otrzymywania ofert sprzedaży stron www.

Na GRX.pl kilka nowych szablonów www…

15 marca 2014

Poniżej cztery smaczki spośród kilkunastu nowych. Po więcej zapraszam na GRX.pl :)

Sposób na linie w js – dowolnie pochyłe

15 lutego 2014

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Generator trójkątów CSS

1 stycznia 2014

triangleKolejne proste, łatwe i przydatne narzędzie – CSS Triangle Generator – do tworzenia prostych trójkatów z borderów CSS’owych. Osobiście używam często, działa wysmienicie. Warto znać.

DetURL

20 sierpnia 2013

Krótko, za Strimsem:
Wprowadź „deturl.com/” przed adres filmu na YouTube itp. lub dowolnego obrazka, aby w szybki sposób uzyskać narzędzia do pobrania danego klipu, przerobienia zdjęcia, odczytania danych EXIF, możliwości wyszukania podobnych obrazów i wiele więcej.

Łatwe wycinanie tła online

28 lipca 2013

Clippingmagic.com to prosty onlajnowy program graficzny, odpalany w przeglądarce, używający zaawansowanych funkcji które w prosty sposób można wykorzystać do wycinania obiektów z tła zdjęć. Moim zdaniem rewelka, działa szybko, sprawnie i dokładnie. Przetestowałem i będę używał, chyba nawet Fotoszkopa porzucę w tego rodzaju zadaniach, na rzecz Clippingmagic. Na pewno warto znać.

Konwerter dźwięków

15 lipca 2013

Szybki, prosty, skuteczny konwerter dźwięków. Osobiście używam do przemianowania dźwięków z nagrań telefonu (w formacie totalnie kosmicznym) na mp3. Polecam. Dodatkowo po skonwertowaniu wielu dźwięków można zasiorbać wszsytkie razem, w jednym pliku spakowane. Mniam.

Obrazek w kodzie strony

26 czerwca 2013

Base64 to sposób kodowania danych do ciągu znaków. Używany przez wiele portali do kompresowania/ukrywania danych lub części kodu, jednak jego najfajniejsze i najważniejsze zastosowanie jest inne. Można kodować pliki graficzne. Całe. I umieszczać bezpośrednio w html, jako kod strony. Zastosowane dla ikon i innych małych elementów strony, takie rozwiązanie znakomicie przyspiesza wczytywanie się całości (ładuje się z htmlem, jednocześnie nie blokując kanału przeglądarki). Warto używać, acz zważać trzeba na umiar – ładowanie wszystkich obrazków tym sposobem raczej stronkę zamuli, niż przyspieszy.

Czym to ugryźć? Na przykład tym: base64-image.de. Prosty enkoder, działa wyśmienicie. Takie pchełki fajnie przyspieszają pracę nad stroną.

Kolejne 6 świeżych layoutów dla www

14 czerwca 2013

6 nowych szablonów www. Zobacz więcej na GRX.pl. Zapraszam!

Przekonaj Klienta, że „u mnie działa”

10 czerwca 2013

Screenr. Prosta rzecz – webaplikacja z javowym appletem umożliwiającym szybkie, łatwe i darmowe nagranie filmiku z określonego obszaru pulpitu (tzw. screencast) i wrzucenie owego filmiku na www, razem z playerem. Do czego to przydatne? Do wykonania szybkiego szkolenia/instruktażu dla Klienta z panelu administracyjnego, który właśnie wdrożyliśmy, do umożliwienia Klientowi zobrazowania nam, o co mu chodzi, co nie działa, a co działa nie tak jak powinno, lub do tego, o czym w temacie niniejszego posta :)

Ten blog NIE jest zamknięty…

21 maja 2013

… ale zmieniona została jego formuła.

Jako że zaszły u mnie pewne poważne zmiany największego kalibru, zrozumiałem kilka nowych zależności i procesów życiowych. Dalsze wpisy będą bardzo nieregularne, nierzadko nieuporządkowane, nie na temat i niekoniecznie pisane przeze mnie. Niestety nie będę miał już czasu na dalsze, regularne prowadzenie tego bloga – stąd ta decyzja. Nowe wpisy będą pojawiały się poniżej niniejszego. Zatem, NIE zamykam tego bloga, ale zmieniam i zmniejszam jego rolę i funkcję.

Aby się ze mną skontaktować, zapraszam do odpowiednich miejsc na witrynach moich i mojej firmy:

piotrsadowski.com – prywatne portfolio
revolweb.pl – firma
dobre-strony.pl – marka
grx.pl – szablony html, szaty graficzne dla www
retuszer look at this site.pl – poprawa, modyfikacje i retusz zdjęć

Subtelne wzorki

29 stycznia 2013

Subtle Patterns to zbiór subtelnych w swojej formie, stylowych wzorów (powtarzalnych tekstur) idealnych do zastosowania jako tło strony internetowej, aplikacji, lub w innych projektach graficznych. Znajdziemy tu nie tylko obszerny zbiór ‚patternów’, ale przede wszystkim kilka perełek, na które aż miło popatrzeć i aż trudno oprzeć się pokusie umieszczenia takiej tekstury jako tło swojej strony internetowej. Sama strona także zasługuje na szacun – czysta, estetyczna i przejrzysta :)

Ikonowy krój czcionek – Awesome!

21 stycznia 2013

Kolejne rozwiązanie przyspieszające prace nad wszelkiego rodzaju panelami, podstronami ustawień (i nie tylko). Genialne w swojej prostocie – krój czcionek będący po prostu ikonkami. Rewelka, bo ikony wyświetlane w ten sposób są skalowalne, cieniowalne itp – można z nimi robić w przeglądarce dokładnie to, co ze zwykłym tekstem. A dzisiejsze technologie przecież umożliwiają implementację dowolnego kroju czcionek na stronie… Nic tylko korzystać.

Ikonek w Awesome Font są setki, jeśli nie tysiące. Jeśli nie znalazłeś/aś poszukiwanej ikonki – poszukaj jeszcze raz, na pewno gdzieś tam jest.

Tajemnicą dla mnie jest, jak autoarzy wykonali animowaną (!!!) czcionkę… postaram się to zgłębić, a na razie  – polecam.

Filtrowanie obrazków w locie

16 stycznia 2013


CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Nowa strona piotrsadowski.com

10 stycznia 2013

Z okazji remanentu witryn znajdujących się w całości pod moją egidą, postanowiłem zaktualizować/stworzyć/przywrócić moją osobistą stronę wizytówkową – piotrsadowski.com . I nie ukrywam, że wspominam o tym tutaj głównie z powodu chęci zdobycia jakiegoś linka – adres piotrsadowski.com do tej pory prowadził do strony „O Autorze” tego bloga, i prawie w ogóle nie był linkowany od wielu lat. :)

Sama strona to po prostu agregat projektów z revolweb.pl i grx.pl . Wyszło ich sporo – prawie 300, dlatego zastosowałem Lazy Load – sprawuje się świetnie.

Zapraszam na piotrsadowski.com. :)

Typo-efekty

30 grudnia 2012

Nie wiem jakim cudem dopiero teraz „wpadłem” na ten generator… no ale cóż, tak już jest, Internet jest wielki. Jako uzupełnienie do wpisu o innej, podobnej webaplikacji:

Typoeffects.com to witryna z dwoma rewelacyjnymi generatorami grafik składających się ze słów. Mamy opcję generatora ascii-art, lub napisów ułożonych w kształt obrazka. Opcji i ustawień pracy generatora jest bardzo dużo, a efekty często są po prostu powalające. Warto zajrzeć, chociaż po to żeby się pobawić…