Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS


16 grudnia 2020 / Michał Kortas


Ostatnio bardzo modny ale i za razem praktyczny – z punktu widzenia użytkownika – jest temat udostępniania wszem i wobec ciemnych wersji interfejsu aplikacji webowych. Sam jestem zwolennikiem tego ruchu i z utęsknieniem wypatruję kolejnych usług, które taką formę oferują. Co ciekawe, za pomocą CSS3 i reguł dostępnych w Media Queries Level 5 możemy wykryć pośrednio preferencje systemu operacyjnego (lub bezpośrednio – przeglądarki) użytkownika i łatwo dostosować interfejs własnej aplikacji. Continue reading Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS


Tagi:


Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS?


15 grudnia 2020 / Michał Kortas


Znacie ten ból podczas wypełniania formularza na stronie internetowej? Ciągłe komunikaty – wypełnij to pole, niepoprawny format. Klikamy i klikamy, czasem kilka razy w przycisk wysyłania, za każdym razem dowiadując się o błędach walidacji. Co zrobić, aby takim jak my, żyło się lepiej? Zaoferować choćby minimalną, niewielką pomoc w postaci pseudo-klas CSS :valid i :invalid. Continue reading Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS?


Tagi:


Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit


10 grudnia 2020 / Michał Kortas


Pytaliście w komentarzach jak skracać tekst znajdujący się w kilku wierszach, w akapicie. Jest to obecnie możliwe również za pomocą CSS. Postanowiłem więc odświeżyć ten wpis z przed lat i dostosować go do bieżących możliwości przeglądarek. Pierwsza część zawiera to, co było tutaj do tej pory – skracanie tekstu w jednej linii. Druga część poradnika prezentuje sposób na ucinanie rozbudowanego bloku tekstowego bez stosowania skomplikowanych zabiegów.
Continue reading Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit


Tagi:


Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym


20 września 2014 / Mr.Mr


ściskanie cytrynyCzasami proste problemy są najbardziej irytujące. Dlatego właśnie uruchomiliśmy nasz cykl szybkich wskazówek, które mogą pomóc Wam szybciej uporać się z męczącymi 'bugami' i problemami. Dzisiaj zajmiemy się prostą, ale czasami złośliwą sprawą – rozciąganiem elementów blokowych na 100% szerokości wewnątrz elementów z marginesem wewnętrznym.

Continue reading Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym


Tagi:


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


25 lipca 2014 / Michał Kortas


CSS3 LogoOd 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 nich pozostaje nieruchomo w miejscu.

Nie wiem czy domyślacie się o czym mowa, dlatego już teraz przedstawię wam demo dla tego tutorialu.

Zobacz przykład on-line

Struktura HTML

Zacznijmy od przygotowania prostej strony HTML, która zawierać w sobie będzie cztery oddzielne sekcje ( .content ) informacyjne, oddzielone od siebie blokiem separatora ( .separator ).

Kod CSS

Dobrze, a więc na początek do naszego arkusza stylów dopiszmy następujący, startowy kod.

Separator pomiędzy sekcjami powinien (przynajmniej trochę) odróżniać się od reszty.

Dla każdej sekcji musimy przypisać osobne tło. Przyjęliśmy, że będą to cztery bloki, tak więc dyle deklaracji musimy zamieścić w arkuszu. Tło musi być wystarczająco duże, aby zakryć cały kontener. Oczywiście zostanie ono dopasowane automatycznie dzięki późniejszej właściwości CSS ( background-size ), ale tak czy inaczej rozmiar obrazka musi być dość duży, aby nie stracił on na jakości.

Na koniec część najważniejsza. Style dla sekcji z treścią.

Kluczowym elementem jest linia #6:

Właściwość ta kotwiczy tło danego elementu w miejscu podczas przewijania ekranu.

Podsumowanie

W taki oto prosty sposób, korzystając jedynie z zalet CSSa stworzyliśmy ciekawy efekt. Powyższy tutorial jest tylko prostym przykładem. Zdaję sobie jednak sprawę, że za jego pomocą można przygotować jeszcze lepsze efekty wizualne naszej witryny.

Zobacz przykład on-line


Tagi:


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


12 maja 2014 / Mr.Mr


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.

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


Tagi: