Kilka miesięcy temu kolega Mateusz pisał na łamach wortalu o możliwościach, jakie daje nam responsywne tworzenie stron internetowych. W tamtym krótkim wpisie skupił się na wykorzystaniu narzędzia o wpadającej w ucho nazwie – Skeleton. Ja, tym razem, postanowiłem zejść trochę niżej w hierarhii webowych technologii i odwołać się do samych jej korzeni. W dniu dzisiejszym HTML5 jest już oficjalnie zdefiniowany przez konsorcjum, a CSS3 w dużej mierze zadomowił się w naszych przeglądarkach. Nawet Internet Explorer nie jest już aż tak daleko w tyle, jak to było jeszcze jakiś czas temu.

W dzisiejszym wpisie chciałbym omówić praktyczne użycie arkusza stylów CSS3 podczas budowy witryn dostosowujących się do wszelakich rozdzielczości. Z pomocą przyjdzie nam tzw. Media Queries.

Continue reading Responsywny Web Design z wykorzystaniem Media Queries

Przez bardzo długi czas w celu walidacji treści wpisywanej do różnorakich formularzy stosować trzeba było skrypty JS lub PHP. Teraz jednak sytuacja się zmienia. HTML5 daje nam pewne możliwości w zakresie kontroli tego co i jak uzupełniają nasi użytkownicy. Oznaczanie wymaganych pól i nawet bardziej zaawansowane właściwości mogą być wprowadzane już z poziomu kodu HTML. Dlatego warto poszerzyć swoją wiedzę na ten temat. Jeśli nie słyszałeś nigdy o walidacji formularzy w HTML5 to zapraszamy do lektury…

Continue reading Walidacja formularzy w HTML5

Jako twórcy stron i aplikacji internetowych nie jesteśmy specjalistami od jednej technologii. Musimy poznać ich cały stos, co utrudnia proces uczenia się i zwiększa złożoność projektów. Spośród wszystkich narzędzi, zawsze na później odwlekałem naukę JavaScriptu. Choć dzięki podstawowej znajomości języka mogę wzbogacać interfejs, to jednak czasem lubię nacieszyć oko ciekawym efektem i zazdroszczę tym, którzy mieli czas i chęci, by opanować tę technologię. Teraz mam kolejny powód, by odłożyć dokumentację na później.

Continue reading Podstawy animacji w CSS3

W przerwie pomiędzy wpisami, które przedstawiają Wam najciekawsze rozszerzenia najpopularniejszych systemów zarządzania treścią, postanowiłem zamieścić wpis na temat niewielkiej, aczkolwiek bardzo przydatnej funkcji języka HTML5. Jest nią standardowy „Date Picker„, za pomocą którego, w sposób półautomatyczny, wstawimy wybraną datę w polu <input>  naszego formularza. Dotychczas należało korzystać z pobocznych rozwiązań, takich jak Date Picker w jQuery, czy w (sic!) JavaScript. Niestety – wspomnę już o tym na samym początku – problemem jest dotychczasowo słabe wdrożenie owej funkcji do przeglądarek. Na chwilę obecną pełną obsługę zapewnia nam tylko Opera. Chrome natomiast wyświetla poprawnie tylko pierwszy przykład. Mam jednak nadzieję, że taka sytuacja niedługo odejdzie w zapomnienie. Sam wpis polecam potraktować czysto jako ciekawostkę, którą prawdopodobnie za jakiś czas będziemy wdrażać na stronach www. Tak czy inaczej, warto przyjrzeć się bliżej tej nowej funkcji.

Continue reading Date Picker z wykorzystaniem możliwości HTML5

Tzw. zebra table to dość prosty zabieg prowadzący do upiększenia standardowej tabeli. Jednocześnie może doprowadzić do tego, że wielorzędowe tabelki stają się bardziej czytelne dla użytkowników. Pewnie większość z Was kiedyś widziała tak stylowaną tabelę. Co stoi za jej wyglądem? Dzięki jQuery można dodawać i usuwać klasy co nie raz stało się zapleczem dla kreatywnych pomysłów. Tak też było z „pasiastymi” tabelkami. Dzięki przygotowaniu odpowiednich klas w arkuszu stylów, za pomocą skryptu przydzielano je do odpowiednich rzędów tabelki. Takie rozwiązanie nie wymagało ręcznego uzupełniania kodu html a dodatkowo kolorowa tabelka rosła wraz z treścią dzięki czemu ponowna ingerencja nie była potrzebna. Jednak dzięki CSS3 w bardzo prosty sposób możemy stworzyć sobie taką tabelkę jedynie z użyciem naszego arkusza stylów.

Continue reading Tabelka „Zebra” – przy użyciu tylko CSS

Box model to sposób interpretacji marginesów (paddingów) i szerokości poszczególnych elementów, korzystamy z niego od czasów starych, (nie)dobrych tabelek. Ci, którzy walczyli z różnymi wersjami IE (głównie 6) znają problem, który utrudniał życie wielu osobom – IE posiadał inny model pudełkowy, w którym padding dodawany był do szerokości kontenera w przeciwieństwie do modelu realizowanego w pozostałych przeglądarkach i zgodnego ze specyfikacjami W3C.

Dla przypomnienia zobaczmy czym dokładnie różnią się oba modele:

Continue reading Box-sizing – powrót do przeszłości

Były takie czasy kiedy tabelke kojarzono z trzonem layoutu strony internetowej. Czasy te jednak minęły bezpowrotnie. Współcześnie dominującym typem layoutu jest strona internetowa „na divach”, czyli model, w którym wykorzystuje się elementy blokowe div i właściwość float aby stworzyć kontenery dla treści i grafik przedstawianych na naszej witrynie.

Niestety nie jest to model doskonały. Aby nadąrzyć za trendami w projektowaniu trzeba często sięgać po pozycjonowanie absolutne lub relatywne. Sam model strony „na divach” posiada również liczne wady jak chociażby częstą konieczność drobiazgowego kalkulowania dostępnej przestrzeni.

Continue reading Grid Layout – przyszłość w tworzeniu stron internetowych

Internet bez wyszukiwarek byłby stosem nic nam nie mówiących linków – to prawda, której nie będę nawet próbował podważyć. W związku z tym, że dużo łatwiej nam jest wyszukać daną treść, niż zapamiętać i użyć długiego odnośnika, dzisiejszy artykuł – tutorial poświęcony będzie przygotowaniu eleganckiego (i mam nadzieję – ładnego) pola wyszukiwania. Gotowy kod HTML/CSS3 można bez problemu zaaplikować na własnej witrynie lub zmodyfikować go uprzednio, dostosowując panel do własnych potrzeb.

Continue reading Pole wyszukiwania w CSS3

Na pewno nie raz gdy tworzyliście jakąś stronę internetową stawaliście przed starym jak świat problemem – stopka, która „wisi” w powietrzu kiedy na danej podstronie jest zbyt mało treści by zwyczajnie zepchnąć ją w dół. Stopka prezentująca się w taki sposób tak na prawdę nie prezentuje się w ogóle. Optymalnie powinna się ona znajdować na samym dole i być tam nawet jeśli ilość treści nie pozwala na to by jej położenie znalazło się w pożądanym miejscu.

Jak to osiągnąć? Na szczęście nie musimy tutaj wymyślać koła od nowa. W internecie jest kilka popularnych rozwiązań a gdyby ktoś miał czas i ochotę żeby przeszukać fora tematyczne to zapewne znalazł by ich jeszcze więcej. Na szczęście dzięki webroad.pl nie musicie nawet szukać. Przedstawimy Wam kilka popularnych rozwiązań wraz z opisem działania.

Continue reading Sticky Footer – Stopka zawsze u dołu strony

Pierwotnym założeniem CSS było rozdzielenie stylu strony od jej treści. Jakkolwiek samo założenie nadal funkcjonuje to dzisiaj poziom skomplikowania i rozbudowania arkuszy stylów osiągnął taki poziom, że opanowanie naszego pliku css bywa problematyczne. Poza tym język CSS nie jest idealny i nie pozwala na działania bardziej elastyczne. Na szczęście na te problemy znalazło się rozwiązanie a są nim preprocesory CSS. W tym artykule przedstawimy krótką charakterystykę Less CSS.Czym jest Less? Jak reklamują go autorzy jest on „dynamicznym językiem arkuszy stylów”. W skrócie oznacza to, że dzięki językowi Less jesteśmy w stanie zaimplementować w naszym arkuszu dynamiczne zachowania (np. funkcje).

Continue reading Less – dynamiczny język arkuszy stylów