Perfection or Vanity

Głównym argumentem osób nie stosujących standardów w projektowaniu jest twierdzenie, jakoby nie wszystkie układy tabelaryczne dało się przenieść do CSS. Dzisiaj chcę pokazać jeden z nich. Zadaniem kodera jest umieścić dwa tła rozciągające się do szerokości przęglądarki – jeden z lewej, drugi z prawej. Przykładowo taki nagłówek:

Podczas tworzenia tego designu zachciało mi się uwiecznić proces zapisz-przełącz-przeładuj w serii screenshotów. Pokazują one w jaki sposób wygląda składanie strony przy pomocy CSS – podobną prezentację już kiedyś postowałem.

Jak widzicie, nie ma znaczenia to jak strona wygląda po wpisaniu HTML-a, ważne jest to co potem CSS z nim robi. Dodam jeszcze, jeśli nie byłoby to jasne: HTML nie był edytowany podczas tej prezentacji ani razu.

Czytając dzisiaj Sitepoint natknąłem się na detal, który bardzo mi się spodobał. W pracy mam bardzo toporny scroll w myszce, więc klikąłem nim, aby uaktywnić przesuwanie samymi ruchami gryzonia. Wtedy zamiast zwyczajnego półprzezroczystego kółka pokazało mi się takie.

Przygotowując kawałek kodu JavaScript zechciałem wyraźnie zaznaczyć, że pływająca warstwa znajduje się nad resztą strony. Oczywistym wyborem był cień – wyzwanie polegało na tym, że chciałem aby był prawdziwie półprzezroczysty oraz wyglądał inaczej (IMO: lepiej). Od zawsze podobał mi się efekt Outer Glow w Photoshopie, stąd i taki zamierzałem zrobić w CSS.

Czasami zdarza się tak, że oddając gotową stronę (zarządzaną zazwyczaj przez panel administracyjny) nie przewidzimy dokładnie ile danych klient będzie chciał w nią wstawić. Chyba najbardziej wrażliwą częścią strony jest nawigacja - złożona z listy nieuporządkowanej, i floatowanych pozycji.

Istnieją dwa podejścia do zaprojektowania takiego menu - pierwsze to określić na stałe szerokość elementu, a drugie to pozwolić aby szerokość była kształtowana przez długość tekstu. Oba mogą zawieść, jeśli potrzeba dłuższej etykietki niż tej w pliku PSD. Dlatego postanowiłem wykorzystać możliwości CSS2 i użyć min & max-width do osiągnięcia rozsądnego kompromisu.

Dzisiejszego wieczora czytając angielskie teksty ponownie zdenerwowałem się na totalny bałagan panujący na stronie (niezastąpionego merytorycznie) słownika Ling.pl.

Czy oni nie mogą go oczyścić i postawić na zawartość?
Czy wszystko musi być takie brzydkie?

Tym razem jednak nie poprzestałem na pytaniach i postanowiłem coś z tym zrobić. Trzy godziny później miałem przed sobą plik UserCSS, który wywala wszystko co na stronie niepotrzebne i oczyszcza layout.