Kategoria: HTML5 & CSS3

Wskazówka: Wyrównywanie wysokości kolumn na 100% strony

Jakiś czas temu projektowałem szablon zaplecza administracyjnego, składającego się z dwóch i trzech kolumn. Ze względów czysto wizualnych oraz zaleceń klienta, kolumny te miały być w każdym możliwym przypadku wyrównane względem siebie, wypełniając 100% wysokości witryny. Problem ten rozwiązałem w dość prosty sposób, wykorzystując pseudo-element  :before , który w tym krótkim przykładzie Wam zaprezentuję. Struktura HTML Przygotujmy sobie […]

CSS3 Logo

Nakładające się na siebie tła przy przewijaniu strony w CSS3

Od jakiegoś czasu zauważyłem (pewnie nie tylko ja) rosnący trend na budowanie witryn internetowych w stylu „one page”. Jest to ciekawe rozwiązanie kiedy chcemy zaprezentować klientom nasz produkt czy też zaprojektować swoje portfolio. Widziałem już kilka szablonów, które przy przewijaniu ich scrollem przedstawiają bardzo ładny efekt nakładania się na siebie teł poszczególnych sekcji witryny, przy czym każde z […]

Micro Relacja: Bydgoszcz Web Development Meetup #4 + prezentacja

Kolejne, już czwarte, spotkanie Bydgoszcz Web Development Meetup za nami. Miałem przyjemność poprowadzić jedną z trzech prezentacji, która dotyczyła dobrych praktyk CSS, BEM, OOCSS na przykładzie inuit.css. Obok mnie prezentacje przeprowadzili Sebastian Małyska (Przychodzi tester do developera) oraz Michał Kowalkowski (O backwi.re i prowadzeniu startupu w Chinach). Na zakończenie Lightning Talks, podczas których m. in. pośmiałem […]

Responsywne tabele na stronach internetowych

„Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej

Zapewnienie użytkownikom urządzeń mobilnych wygodnego i szybkiego przeglądania stron internetowych to dzisiaj już standardowy wymóg. Responsive Web Design to jeden z fundamentów współczesnej sieci, a rosnąca ilość użytkowników tabletów i smartphone’ów zmusza nas do tego by nie zapominać o użytkownikach tychże urządzeń. O ile technologia poszła na tyle do przodu, że RWD stało się możliwe […]

SVG: optymalizacja i przygotowanie plików

Pliki SVG (Scalable Vector Graphics) w dobie wszechobecnych smartfonów i innych urządzeń o ekranach z wysokim ppi powinny być standardem, ale nadal ze świecą szukać przykładów ich zastosowania w komercyjnych produktach. Po części jest to wina mało świadomych deweloperów, nadal bardzo popularny jest mit o słabym wsparciu dla SVG. Jeżeli zależy nam na wsparciu IE8 […]

HTML

Wskazówka: Pozycjonowanie absolutne wewnątrz komórki tabeli – problem w Firefox

Dzisiaj przedstawimy Wam szybkie rozwiązanie specyficznego problemu występującego w przeglądarce Firefox. Problem dotyczy pozycjonowania absolutnego elementu wewnątrz komórki tabelki. Jeśli chcielibyśie nadać komórce tabeli position:relative i w ten sposób ograniczyć przestrzeń pozycjonowanie elementu dziecka z position:absolute to niestety w przeglądarce ze stajni Mozilla spotka was pewne zaskoczenie.

Block, Element, Modifier w CSS

Miałeś kiedyś taką sytuację, że pod koniec dużego projektu sam nie mogłeś połapać się we własnym kodzie? A może jesteś częścią większego zespołu i często nie wiesz dlaczego Twoi koledzy tworzą takie dziwaczne konstrukcje w arkuszach? Witaj w klubie! Każdy frontendowiec miał coś takiego. Można powiedzieć, że to niestety część zawodu, ale nie martw się […]

Dzielenie wyrazów w CSS

Wskazówka: Jak automatycznie dzielić wyrazy w CSS?

Jeszcze jakiś czas temu automatyczne dzielenie wyrazów na stronach internetowych było właściwie niemożliwe. Sytuacja ta uległa nieznacznej zmianie. Dzisiaj – co prawda na tę chwilę musimy korzystać z przedrostków i to w nie wszystkich przeglądarkach – możemy zaprzęgnąć do działania nasz arkusz CSS. Jest to funkcja dopiero rozwijana, ale należy wierzyć, że w niedługim czasie […]

CSS3 Flexbox – podstawowe założenia

Społecznośc deweloperów od dawna czekała na ‚lepszy’ sposób tworzenia układów stron internetowych. Mankamenty konstrukcji opartych na elementach blokowych ze zdeklarowaną właściwością float, liczne obejścia i sztuczki, które stosowano aby dostosować sztywne układy do wyświetlania się na rozmaitych rozdzielczościach w sposób ergonomiczny i jeszcze wiele innych niedogodności stały się częścią dnia codziennego dla wielu twórców stron […]

Zarządzanie kaskadowymi arkuszami stylów, czyli CSS w praktyce

Mimo że dzień w dzień mamy do czynienia z Kaskadowymi Arkuszami Stylów radzenie sobie z kaskadowością, dziedziczeniem, selektorami i problemami przeglądarkowymi może być czasami trudne. Rozbudowane pliki CSS potrafią przyprawić o zawrót głowy, a ich edycja bez użycia narzędzi deweloperskich wydaje się czasami praktycznie niemożliwa. Dlatego jako twórcy witryn internetowych często zadajemy sobie pytanie o […]