css – webroad.pl

Scroll Snap – polepszanie zachowania przesuwanych elementów

25 sierpnia 2021 / Michał Kortas

Czy spotkałeś się z elementami na stronach internetowych, których przesuwanie i przeglądanie na urządzeniu mobilnym wołało o pomstę do nieba? Na pewno tak. To choćby różnego rodzaju karty informacyjne lub zdjęcia w galerii. Istnieje jednak sposób, który znacznie uprzyjemni korzystanie z nich, a wymaga dodania jedynie kilku linijek w CSS i znany jest pod nazwą Scroll-Snap. Continue reading Scroll Snap – polepszanie zachowania przesuwanych elementów

Tagi: css • scroll behavior • scroll-snap

Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS

24 sierpnia 2021 / Michał Kortas

Słyszałem gdzieś kiedyś opinię, w której to blokowanie nagłówków tabeli z poziomu CSS działa tylko i wyłącznie w demach artykułów, w których się znajdują. Postaram się dzisiaj zagiąć czasoprzestrzeń tak, by końcowy efekt wyszedł z tej czarnej dziury przez horyzont zdarzeń i zadziałał również u Ciebie (oczywiście jeśli mówimy o najnowszych przeglądarkach).

Przygotowanie szkieletu tabeli

Tabela testowa będzie posiadała kilka kolumn i wiele wierszy, aby ukazać blokadę nagłówków w działaniu. Treścią się nie przejmujemy, dodając Lorem Ipsum.

Jeśli jesteś zainteresowany efektem końcowym, zerknij na poniższe GIFy lub odwiedź stronę: https://webroad.pl/demo/table-sticky-headers/

Nie chciałem rozciągać listingu w nieskończoność – powiel więc poniższą część <tbody> i zawarte w niej wiersze kilkadziesiąt razy, tak by pojawił się suwak pionowy.

<table>
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
            <th>Amet</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Consectetur adipiscing elit</th>
            <td>Nunc libero purus, venenatis hendrerit feugiat</td>
            <td>Fusce et leo tristique, sollicitudin leo ut, mattis augue</td>
            <td>Praesent placerat, libero sit amet suscipit</td>
            <td>Cras laoreet dolor vitae velit sollicitudin</td>
            <td>Consectetur adipiscing elit</td>
            <td>Nunc libero purus, venenatis hendrerit feugiat</td>
            <td>Fusce et leo tristique, sollicitudin leo ut, mattis augue</td>
            <td>Praesent placerat, libero sit amet suscipit</td>
            <td>Cras laoreet dolor vitae velit sollicitudin</td>
        </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

<th>Lorem</th>

<th>Ipsum</th>

<th>Dolor</th>

<th>Lorem</th>

<th>Ipsum</th>

<th>Dolor</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">Consectetur adipiscing elit</th>

<td>Nunc libero purus, venenatis hendrerit feugiat</td>

<td>Fusce et leo tristique, sollicitudin leo ut, mattis augue</td>

<td>Praesent placerat, libero sit amet suscipit</td>

<td>Cras laoreet dolor vitae velit sollicitudin</td>

<td>Consectetur adipiscing elit</td>

<td>Nunc libero purus, venenatis hendrerit feugiat</td>

<td>Fusce et leo tristique, sollicitudin leo ut, mattis augue</td>

<td>Praesent placerat, libero sit amet suscipit</td>

<td>Cras laoreet dolor vitae velit sollicitudin</td>

</tr>

</tbody>

</table>

Style tabeli, aby nie wyglądała zbyt surowo, niech będą następujące:

table {
    color: #333;
    background: white;
    border: 1px solid #888;
    font-size: 12pt;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
}

table th,
table td {
    padding: 1rem;
    border: 1px solid #888;
    text-align: left;
    white-space: nowrap;
    color: #777;
}

table th {
    background-color: #888;
    color: #fff;
}

table {

color: #333;

background: white;

border: 1px solid #888;

font-size: 12pt;

border-collapse: separate;

border-spacing: 0;

border-radius: 3px;

font-family: Arial, Helvetica, sans-serif;

}

table th,

table td {

padding: 1rem;

border: 1px solid #888;

text-align: left;

white-space: nowrap;

color: #777;

}

table th {

background-color: #888;

color: #fff;

}

Efekt na ten moment:

Tabela z nagłówkami

Czas na część właściwą. Blokujemy nagłówki.

Blokowanie nagłówków przy przewijaniu strony w pionie

Najczęściej potrzebujemy właśnie tej blokady – górny wiersz nagłówka ma zostać przyklejony do górnej części ekranu. By uzyskać ten efekt w dokumencie HTML wystarczy dopisać do powyższej tabeli następujące kilka linijek kodu CSS:

table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

table thead th {

position: sticky;

top: 0;

z-index: 10;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

}

Po odświeżeniu widoku i przewinięciu pionowym suwakiem nagłówek pozostanie na górze.

Zablokowany nagłówek poziomy tabeli

Blokowanie nagłówków przy przewijaniu strony w poziomie

Blokowanie pierwszej kolumny nie jest zbyt popularne, jednak często klient przyzwyczajony do blokad kolumn w Excelu może sobie zażyczyć i taką funkcjonalność.

Jeśli wcześniej nie zauważyłeś, spójrz ponownie na listing HTML tabeli, szczególnie na pierwszą kolumnę wiersza.

<tr>
    <th scope="row">Consectetur adipiscing elit</th>
    <!-- Pozostałe kolumny -->
</tr>

<tr>

<th scope="row">Consectetur adipiscing elit</th>

</tr>

Zamiast <td> użyliśmy komórki <th> z atrybutem scope o wartości row. Mając tak przygotowaną kolumnę możemy teraz dodać odpowiednie style, aby ją zablokować.

table tbody th[scope=row] {
    position: sticky;
    left: 0;
    z-index: 9;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
}

table tbody th[scope=row] {

position: sticky;

left: 0;

z-index: 9;

box-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);

}

Co otrzymaliśmy?

Zablokowany pionowy nagłówek tabeli

Super! Czy u Ciebie działa? :-)

Na co zwrócić uwagę przy blokowaniu nagłówków?

Kilka wskazówek do wdrażania blokady nagłówków zebrałem i wypisałem na poniższej liście:

dodajemy z-index większy dla komórek w nagłówku poziomym, aby nagłówek pionowy chował się pod spód,
jeśli blokujemy nagłówek przy przewijaniu pionowym określamy pozycję top lub bottom,
jeśli blokujemy nagłówek przy przewijaniu poziomym określamy pozycję left lub right,
dodajemy kolor tła do nagłówków, aby komórki przesuwane nie były widoczne przy przewijaniu po nimi,
dodajemy cień, aby ukazać warstwy nadrzędne, jakimi są nagłówki.

Kod i demo

Kod z powyższego przykładu zamieściłem na GitHubie.

Demo możesz zobaczyć na specjalnie przygotowanej stronie.

Tagi: css • HTML • nagłówek • sticky • tabela

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: css • dark mode • light mode • media • tryb ciemny

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: css • formularze • invalid • valid • walidacja

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: akapit • css • ellipsis • line-clamp • linia • skracanie • skracanie tekstu • top • ucinanie tekstu

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

Czasami 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: css • HTML • wskazówka

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

25 lipca 2014 / Michał Kortas

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 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 ).

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css.css" rel="stylesheet">
</head>

<body>
<header>
	<img src="https://webroad.pl/wp-content/uploads/2014/07/webroad-horizontal.png" alt="Logo">
</header>
	<div class="content bg1">
		<h2>Cześć, witamy na WEBroad!</h2>
		<p>Jest to blog dla webmasterów, poszukujących wiedzy <br>na temat projektowania stron internetowych.</p>
	</div>  

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg2">
		<h2>Szukasz pracy lub pracownika?</h2>
		<p>Mamy dla Ciebie specjalną tablicę z ogłoszeniami o pracę.</p>
	</div>

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg3">
		<h2>Nie znalazłeś odpowiedzi?</h2>
		<p>Zapytaj o rozwiązanie na naszym forum.</p>
	</div>

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg4">
		<h2>Chcesz się z nami skontaktować?</h2>
		<p>Zrób to za pomocą odpowiedniego formularza.</p>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

</header>

<h2>Cześć, witamy na WEBroad!</h2>

<p>Jest to blog dla webmasterów, poszukujących wiedzy <br>na temat projektowania stron internetowych.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Szukasz pracy lub pracownika?</h2>

<p>Mamy dla Ciebie specjalną tablicę z ogłoszeniami o pracę.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Nie znalazłeś odpowiedzi?</h2>

<p>Zapytaj o rozwiązanie na naszym forum.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Chcesz się z nami skontaktować?</h2>

<p>Zrób to za pomocą odpowiedniego formularza.</p>

</div>

</body>

</html>

Kod CSS

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

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext);
* {
  box-sizing: border-box;
}
html {
  font-size: 1em;
  font-family: 'Oswald';
  background-color: #fff;
  color: #d9d9d9;
  
}
body {
  margin: 0;
}
h2 {margin: 0; font-size: 3em;}
header {text-align: center; height: auto; padding: 20px 0 20px;}
header img {max-width: 400px;}

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext);

* {

box-sizing: border-box;

}

html {

font-size: 1em;

font-family: 'Oswald';

background-color: #fff;

color: #d9d9d9;

}

body {

margin: 0;

}

h2 {margin: 0; font-size: 3em;}

header {text-align: center; height: auto; padding: 20px 0 20px;}

header img {max-width: 400px;}

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

.separator {
  font-size: 1.6em;
  padding: 2.6em 0;
  text-align: center;
  background: #333;
}

.separator {

font-size: 1.6em;

padding: 2.6em 0;

text-align: center;

background: #333;

}

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.

.bg1 {
  background-color: #fff;
  background-image: url("bg1.jpg");
}
.bg2 {
  background-color: #fff;
  background-image: url("bg2.jpg");
}
.bg3 {
  background-color: #fff;
  background-image: url("bg3.jpg");
}
.bg4 {
  background-color: #fff;
  background-image: url("bg4.jpg");
}

.bg1 {

background-color: #fff;

}

.bg2 {

background-color: #fff;

}

.bg3 {

background-color: #fff;

}

.bg4 {

background-color: #fff;

}

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

.content {
  color: #fff;
  min-height: 650px;
  text-align: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-shadow: 0 0 20px #000;
  font-size: 1.8em;
}

.content {

color: #fff;

min-height: 650px;

text-align: center;

background-size: cover;

background-attachment: fixed;

background-repeat: no-repeat;

text-shadow: 0 0 20px #000;

font-size: 1.8em;

}

Kluczowym elementem jest linia #6:

  background-attachment: fixed;

6	background-attachment: fixed;

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: css • fixed background • Masked Background • promowany

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: css • firefox • wskazówka

Scroll Snap – polepszanie zachowania przesuwanych elementów

Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS

Przygotowanie szkieletu tabeli

Blokowanie nagłówków przy przewijaniu strony w pionie

Blokowanie nagłówków przy przewijaniu strony w poziomie

Na co zwrócić uwagę przy blokowaniu nagłówków?

Kod i demo

Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS

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

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

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

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

Struktura HTML

Kod CSS

Podsumowanie

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

Partner technologiczny

Najnowsze komentarze

Robert

początkujący

Tom

awprojekt

Temat