Aspect Ratio w CSS

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.

Stylowy formularz – #szybkiwebdev

Chciałbym wam przedstawić pomysł szybkich kodów do wykorzystania w różnych projektach. Mam nadzieje, że wystarczy mi pomysłów, by wrzucać je regularnie. Zatem zaczynam od pierwszego, stylowego i lekkiego formularza kontaktowego (lub jak ktoś woli rejestracyjnego).

Zapowiedź CSS Container Queries

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.

CSS Scroll Snapping, czyli ciekawe przewijanie

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.

Selektory w CSS – zbiór

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.

Funkcja clamp() w CSS

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.

Flexbox, czyli elastyczne tworzenie stron www

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.

Preprocesory CSS

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.

Animate.css, czyli proste animacje w czystym css

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ę?

Reguła !important w CSS – kiedy i jak używać?

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.