Lime Factory

CSS: Normalizuj styl zamiast resetować

Lime Factory — Wed, 16 Nov 2011 09:00:11 +0000

Dawno temu pisałem, o tym, że gdy chcemy zniwelować różnice między przeglądarkami wystarczy wyzerować padding oraz margin. W dzisiejszych czasach to już się nie sprawdza. Mam ciekawsze rozwiązanie – normalize.css.

Od kiedy zacząłem używać html5boilerplate.com do tworzenia stron internetowych moją uwagę zwrócił zwrócił brak kodu css, który resetowałby wszystkie składniki strony. Rozwiązanie dostarczone przez Nicolas Gallagher oraz Jonathan Neal normalizują wszystkie elementy między różnymi przeglądarkami to normalize.css.

Te linijki kodu zapewnią, że przeglądarki zachowują się dość podobnie w interpretowaniu naszego kodu css. Obsługiwana jest w przeglądarkach Chrome, Firefox 3+, Safari 4+, Opera 10+ i Internet Explorer 6+.

Kiedy zaczniesz programować następną stronę nie resetuj jej po prostu zacznij od normalize.css i normalnie programuj.

Adobe Photoshop: Znikający kształt pędzla

Lime Factory — Tue, 15 Nov 2011 09:00:03 +0000

Zdarzyło Ci się kiedyś pracować w Photoshopie i malując pędzlem o określonym kształcie pojawił się problem, że zamiast kształtu pędzla pojawia się krzyżyk. Ups.

Jeżeli wejdziesz w ustawienia Photoshop’a

Naciskasz:

(Mac)

Command

(Win)

Control

Tutaj kiedy przejdziesz na kursor to możesz wybrać czy chcesz:

kursor standardowy do malowania (mocno nie polecam),
precyzyjny,
kursor normalnych rozmiarów (obejmuje wartości do 50% przezroczystości),
kursor pełnych rozmiarów (cały obszar, którym maluje kursor).

Do dwóch ostatnich opcji możemy dodać kursor precyzyjny. No to mamy ustawiony pędzel o wybranym przez nas kształcie, ale podczas malowania nagle zamienia on się w kursor precyzyjny.

Bez nerwów, żeby zmieniać wygląd kursora z precyzyjnego na kursor o określonych rozmiarach wystarczy wcisnąć:

Caps Lock

Następnym razem jak Twój kursor zacznie zmieniać się dziwnie, sprawdź czy nie jest wciśnięty przycisk Caps Lock.

Adobe Photoshop: Szybka zmiana koloru w oknie kolor

Lime Factory — Sun, 13 Nov 2011 12:40:19 +0000

Potrzebujesz szybko wybrać kolor w Photoshopie przeskakując między spektrum kolorów i chcesz to zrobić szybko za pomocą kilku kliknięć. Oto jedna z kilku metod.

Naciśnij

Po otwarciu się okna koloru najedź myszką na spektrum poniżej suwaków i trzymając naciśnięty

Shift

lewym przyciskiem myszy zmieniaj spektrum kolorów, żeby wybrać najlepsze do Twojej pracy. Proste!

Adobe Illustrator: Skalowanie obrysu oraz linii

Lime Factory — Sat, 12 Nov 2011 12:19:04 +0000

Jedną z wielu z opcji w programie Adobe Illustrator, o której nie wiedzą początkujący użytkownicy, a może powodować lekką frustrację to skalowanie obrysu oraz linii.Masz element, który posiada obrys np. 1mm i chcesz go powiększyć, ale nie wiesz jak kontrolować rozmiar obrysu. Czy Twój obrys po powiększeniu będzie posiadał nadal 1mm czy powiększy się proporcjonalnie razem z wypełnieniem.

Naciskasz:

(Mac)

Command

(Win)

Control

Opcja w żółtej ramce po zaznaczeniu będzie powodować skalowanie linii obrysu (dodatkowo również efektów – pamiętaj o tym!). Tak zyskaliśmy kontrolę nad naszym obrysem w Adobe Illustrator.

CSS: Opisy w jednej linii po dwóch stronach stopki

Lime Factory — Thu, 03 Nov 2011 21:21:49 +0000

Stopka internetowa to jeden z istotniejszych elementów strony internetowej o czym już pisałem we wcześniejszym artykule. W poniższym poście opiszę jak rozmieścić teksty w stopce, aby idealnie były w tej samej linii oraz rozmieszczone były po dwóch stronach stopki.

Sprawa jest dosyć prosta do zrobienia, ale nie jest oczywista. Po stworzeniu elementu stopki (footer) dodajemy dwa paragrafy, którym rozmieszczamy na lewo i prawo dzięki właściwości – float, której dajemy wartość “left” dla elementu, który ma być na lewo oraz “right” dla tekstu, który ma być po prawej stronie stopki.

Niestety wartość “float” powoduje, że nasze elementy dla przeglądarki nie mają wysokości. Ups. Ale możemy to naprawić. Dodajemy “

” i to powoduje, że nasze elementy już są widziane przez przeglądarki. Poniżej kod. Sam HTML oraz CSS.