CSS

Dobór palety kolorów

Dobór palety kolorów

slav
Nigdy nie byłem specjalnie dobry z kolorami. Dla wygody przez bardzo długi czas nosiłem się na czarno, potem jak typowo upośledzony społecznie informatyk w kolorach safari. Tak samo z projektami, nad którymi pracowałem – grafik miał przygotować wszystko, a ja żadnych wariacji na dany temat nie robiłem. Do tej pory nie wiem co ze sobą wygląda dobrze. Zgaduję, że właśnie dla takich wybitnie upośledzonych kolorystycznie jednostek powstał projekt www.degraeve.com – wystarczy wkleić link do zdjęcia i… zostanie dla nas wygenerowana paleta kolorów.
less

less

slav

LESS to procesor CSS. Idea jest prosta – CSS jest coraz bardziej skomplikowany, LESS to narzędzie które pozwala na uproszczenie i wprowadzenie dodatkowych funkcji do CSS. Jakich funkcji – jakich jak zmienne, zagnieżdzanie styli, mixins (nie mam pojęcia jak to przetłumaczyć) i kilku innych dobrodziejstw jak np. funkcje. Można go używać na kilka różnych sposobów – jednym z nich jest załączenie less.js w kodzie strony który kompiluje pliki .less w locie, albo kompilowanie ich przy pomocy kompilatora.

reset.css

reset.css

slav
O reset.css każdy web developer słyszał i korzystał nie raz. Bardzo wygodna strona pozwalające na pobranie na skopiwanie styli bezpośrednio do schowka znajduje się tutaj www.cssreset.com

CSS Transitions (przejścia) i JavaScript

slav

CSS Transitions – nie wiem jak to przetłumaczyć poprawnie na język polski, więc będę trzymał się oryginalnej wymowy.

Definicja CSS3 definiuje transitions jako możliwość zmian wartości CSS w płynny sposób, w określonym czasie. Idea jest prosta – przy pomocy transitions możemy robić to samo co wcześniej korzystając ze zmiany wartości takich jak “left” czy “top” tyle, że w bardzo płynny sposób i z wykorzystaniem akceleracji sprzętowej. Mamy dostęp do ograniczonej liczby właściwości takich jak:

Jak kodować HTML w newsletterze

Jak kodować HTML w newsletterze

slav

Podstawowe narzędzie marketingowe współczesnego internetu – newsletter, w niektórych krajach znane jako EDM . Kto chociaż raz próbował, wie że nie jest to specjalnie łatwe zadanie. Znajomość HTML’a i CSS nie wystarczy, trzeba znać odpowiednie sztuczki i posiadać doświadczenie. Na czym polega problem? Na tym, że w przeciwieństwie do zwykłych stron musimy zwrócić uwagę “jedynie” na 3 głównej przeglądarki i ich wariacje. Zakładając jednak że kodujemy poprawnie i nie szalejemy ze stylami strona będzie mniej więcej wyglądać poprawnie. W przypadku EDMów liczba klientów jest praktycznie nieograniczona, a większość z nich ma swoją własną interpretacje HTML CSS i świata 😉

Uwolnij się od prefixów CSS

Uwolnij się od prefixów CSS

slav

Bardzo ciekawe rozwiązanie uwalniające od tworzenia specjalnych reguł CSS dla każdej z przeglądarek. Piszę tutaj o rozwiązaniach pozwalających na tworzenie gradientów w tle, czy okrągłych narożników: -webkit-border-radius: 50%; -moz-border-radius: 50%; [ . Żeby było ciekawiej – rozwiązanie to działa client-side, czyli cała zabawa jest po stronie przeglądarki i nie wymaga instalowania niczego na serwerze. Wystarczy zaimportować 2KB JavaScript i problem z głowy. Zapomniałbym o odnośniku do serwisu: -prefix-free . Przykład zastosowania poniżej:

InstaCSS czyli porządna dokumentacja CSS

slav

Nie wiem jak wy, ale ja nie pamiętam wszystkich parametrów i możliwych właściwości paremetrów CSS. Zwykle gdy mam jakiś problem zaczynam googlować i czasami wynik trafia się od razu, czasami… po chwili. Dobra dokumentacja to podstawa, dlatego polecam projekt Instant CSS – w jednym miejscu zebrano opisy właściwości CSS3. Do tego mamy bardzo wygodną wyszukiwarkę, która pozwala szybko odnaleźć zadany parametr.

Frameworki HTML5

slav

Nigdy nie byłem specjalnym fanem frameworków HTML5. Wprawdzie zdarzyło mi się kilka razy użyć Blueprint  ale finalnie kończyło się zawsze na pisaniu wszystkiego od podstaw. Potem wchodziła do gry optymalizacja pod IE i po pewnym czasie strona wyglądała przyzwoicie. Niestety w dobie dzisiejszych technologii, gdzie nasza strona musi wyglądać dobrze zarówno na zwykłym PC, jak i na każdym urządzeniu mobilnym począwszy od telefonu, przez pady skończywszy na duuużych ekranach.

WebPutty edytor CSS online

WebPutty edytor CSS online

slav

Nazwa serwisu jest odrobinę myląca – początkowo myślałem, że w końcu doczekałem się porządnej realizacji terminala SSH przez przeglądarkę. Okazuje się jednak, że WebPutty to całkiem przyzwoity edytor CSS online. Cały serwis jest w fazie beta, ale wygląda bardzo przyzwoicie. System pozwala na edycję plików CSS z rzeczywistem podglądem zmian na edytowanej stronie. Aby go wypróbować niezbędne jest konto w serwisie gmail.

Gradienty w CSS

slav
Nie tak dawno temu gradienty na stronach WWW były dosyć upierdliwe do wstawiania. Najprostszym rozwiązaniem było wycięcię powtarzającego się elementu a potem skorzystanie z kombinacji: .tlo { background: url('images/gradient.jpg') repeat-x #000; } Odkąd pojawił się CSS3 gradienty mogą być renderowane przez przeglądarki. Składnia niestety jest dosyć upierdliwa i skomplikowana i oczywiście dla każdej przeglądarki inna. Z pomocą przychodzą nam różne serwisy, jeden z nich to Ultimate CSS Gradient Generator .