#frontendowe spojrzenie na tworzenie stron www
Zapytania o media przeglądarki są bardzo istotne, gdy tworzymy responsywne strony www. Dzisiaj dobrą praktyką jest projektowanie stron w tak zwanym podejściu „mobile first” oraz elastycznie dopasowane do rodzaju urządzenia i szerokości jego ekranu. Dzisiaj chcę przedstawić czwarty poziom Media Queries, czyli dostosowanie elementów względem wielu parametrów w nowym podejściu (zakresy).
Łukasz
Prezentacja treści na stronie w formie graficznej to bardzo istotne zagadnienie. Chodzi głównie o to, aby obrazy były umieszczone w odpowiednich proporcjach. W tym przypadku z pomocą przychodzi nam aspect ratio w CSS. Jest to rozwiązanie znane już od dawna, jednak nie wszystkie przeglądarki to wspierają. Przejdźmy do konkretów.
Łukasz
Od jakiegoś czasu można zaobserwować w świecie dev nowy trend lub podejście do tworzenia stron www. Mowa tu o planowanym wprowadzeniu „CSS Container Queries” do obsługi elastycznych layoutów. Tworząc projekt responsywny, często używa się zapytania @media, aby zmienić układ elementów w zależności od rozmiaru widocznego obszaru.
Łukasz
Często przemierzając internet można spotkać strony internetowe typu „one page”. Na niektórych przechodzenie między sekcjami odbywa się na zasadzie przewijania oraz „doskakiwania” do kolejnej/poprzedniej sekcji. Dawniej robiło się to za pomocą JavaScriptu, jednak dzisiaj możliwości są większe. Dzisiaj pozwala już na to sam CSS, o czym będzie w tym wpisie.
Łukasz
Dostępność jest w dzisiejszych czasach bardzo ważna, szczególnie jeśli chodzi o kontrast kolorów na stronach internetowych. Osoby słabo widzące poruszając się w internecie nierzadko mają problem z poprawnym widzeniem treści. Dzisiaj przygotowałem wpis na temat poprawy dostępności strony na podstawie kontrastu w CSS.
Łukasz
Dzisiejszy wpis chciałbym rozpocząć od informacji o tym, iż optymalizacja czcionki na stronie przyniosła mi korzyść w postaci odchudzenia samej strony i ilości pobieranych danych. Bardzo często na stronach widzimy przeróżne kroje czcionek, jedne bardziej, inne mniej czytelne. U mnie na stronie do tej pory używałem kroju Ubuntu, bo w sumie taki mi się podobał. Kwestię gustu i tego, czy czcionka jest ładna lub nie, pomijam.
Łukasz
W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline’. Poniżej przedstawione zostały rodzaje selektorów.
Łukasz
Funkcja clamp() w CSS to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.
Łukasz
Używanie tabel na stronie internetowej czasem sprawia nieco problemów, zwłaszcza, gdy nasz design strony jest elastyczny, responsywny. O ile na pełnowymiarowych komputerach nie sprawia to większych problemów, o tyle na urządzeniach mobilnych potrafi nieco popsuć odbiór danych z tabeli. Dzisiaj postaram się opisać jedno z przykładowych rozwiązań tego kłopotu.
Łukasz
Pojęcie responsywnych stron www każdemu kojarzy się z elastycznymi stronami, które są dostosowane do wyświetlania na różnych rodzajach ekranów. W szczególności pojęcie znane jest osobom na stanowisku frontend developer – osoby odpowiedzialne za część wizualną (techniczną) strony www. Dzisiaj wiodącym trendem jest flexbox.
Łukasz
Jakiś czas temu pisałem o tym jak zrobić screenshot’a w html5, natomiast dzisiaj skupię się na efekcie, który jest coraz bardziej popularny w internecie. Mianowicie zaprezentuję, jak uzyskać responsywne tło w postaci wideo. Sprawa przy responsywnej grafice jest o tyle prostsza, że wystarczy użyć backround-image oraz background-size (cover/contain). A przy wideo?
Łukasz
Każdy frontend’owiec na pewnym etapie swojej przygody z css, napotka pojęcie preprocesor. Ułatwiają one bardzo pracę nad stylowaniem strony, a na pewno ją przyspieszają, co z kolei ma duży wpływ na wydajność. Oczywiście, aby zacząć korzystać z preprocesorów należy swobodnie władać czystym css.
Łukasz
CSS jest prostym językiem i można w nim pisać kod, który jest łatwo dołączany do projektu. Początkujący web deweloper nie zawsze jest świadomy, jakie szkody może wyrządzić nieumiejętne dokładanie kodu css. Wtedy zaczyna się niestety szukanie „na szybko” przyczyny złego stylowania poszczególnych elementów.
Łukasz
Witam. Coraz więcej serwisów internetowych zawiera w sobie efektowne animacje, przejścia, przekształcenia elementów. Kiedyś za te efekty odpowiadały grafiki, np. gif’y, jednak obecnie nie jest już to efektywne rozwiązanie, dlatego wykorzystuje się dobrodziejstwa CSS. Zatem, z czego korzystać? Jak stworzyć lekką, a zarazem efektowną stronę?
Łukasz
Słowami Stephanie Rewis rozpoczynam te wpis, chcąc zwrócić uwagę na istotę „problemu”. Autor powyższego wpisu, sfrustrowany kodami css, zwraca uwagę na nadużywanie pewnych reguł, które niekiedy powodują bałagan w kodzie.
Łukasz
Każdy, kto choć troche interesuje się tworzeniem stron internetowych na pewno zna framework frontendowy Bootstrap. Jest to jeden z najbardziej popularnych i najczęściej wykorzystywanych narzędzi deweloperskich do tworzenia stron. Właśnie została zaprezentowana jego czwarta wersja, póki co w stadium alpha. Jest sporo nowości, a więc zaczynamy.
Łukasz