elementy - Kurs HTML i CSS
HTML5 / Otwierany panel <details, summary>...domyślnie otwarty: <details open> <summary>nagłówek</summary> ... </details> Na stronach internetowych bardzo często spotykamy interaktywne elementy w postaci paneli, które otwierają się po kliknięciu w ich nagłówek myszką. Tego typu rozwiązanie jest szczególnie przydatne na stronach, zawierających dużo informacji. Aby nie przytłoczyć użytkownika, czasami lepiej jest na początku wyświetlić mu tylko podstawowe dane, a do szczegółów dać dostęp dopiero, kiedy zyskamy jego zainteresowanie...
Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}...white, black) linear-gradient(to left top, white, black) Zwróć uwagę, że kolory na styku poziomej linii, łączącej powyższe elementy, nie pokrywają się idealnie ze sobą. Powtarzany gradient liniowy {background: repeating-linear-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera) selektor { background: repeating-linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Jeżeli ustawimy odległość punktu początkowego linii gradientu większą...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...wspólnie. Pytania i odpowiedzi {align-items} Co robi "align-items"? W kontekście flexbox CSS, właściwość align-items służy do określenia, jak elementy mają być wyśrodkowane wzdłuż osi poprzecznej (prostopadłej do głównej osi). Możliwe wartości to "flex-start" (domyślne, wyśrodkowanie u góry), "flex-end" (wyśrodkowanie u dołu), "center" (wyśrodkowanie w środku), "stretch" (rozciągnięcie, aby wypełnić całą dostępną przestrzeń) i inne. Dzięki align-items można kontrolować pozycję elementów...
- Układ elastyczny CSS / Wyrównanie wierszy {align-content}
...Internet Explorer 10, Firefox, Opera 12, Chrome) selektor { align-content: wyrównanie } Selektorem może być kontener elastyczny, którego elementy zostały ułożone w wielu wierszach. Wyrównanie: flex-start - wyrównanie wierszy do początkowej krawędzi kontenera flex-end - do końcowej krawędzi kontenera center - wyśrodkowanie wierszy (dla tekstu w języku polskim - w pionie) space-between - równe odstępy między wierszami space-around - równa przestrzeń wokół wierszy stretch...
- HTML5 / Główna treść <main>
...możemy wyznaczyć menu nawigacyjne, nagłówek witryny zwykle z osadzonym logo, stopkę zawierającą np. informacje o prawach autorskich. Wszystkie te elementy niezwykle ułatwiają przeglądanie witryny. Jednak użytkownicy odwiedzają stronę przede wszystkim nie po to, żeby oglądać menu czy logo. Głównym celem jest dotarcie do treści, która jest zawarta w serwisie. Taka treść może ginąć w natłoku wszystkich elementów pomocniczych witryny. Zwłaszcza wyszukiwarki i czytniki ekranowe mogą mieć...
Operacje na tablicach w JavaScript - Array.prototype / Sprawdzanie warunku dla przynajmniej jednego elementu - some(interpretuje: Internet Explorer 9, Firefox, Opera, Chrome) Array.prototype.some(callbackfn) Array.prototype.some(callbackfn, thisArg) Parametry: Function callbackfn - funkcja testująca przyjmująca argumenty: kValue - element tablicy Number k - indeks elementu tablicy Array O - oryginalna tablica thisArg - wartość bieżącego obiektu this dostępnego w czasie wywołania wewnątrz ciała funkcji (domyślnie: undefined) Wartość: Boolean - czy przynajmniej dla jednego elementu tablicy funkcja...
- Operacje na tablicach w JavaScript - Array.prototype / Przekształcanie elementów tablicy - map
(interpretuje: Internet Explorer 9, Firefox, Opera, Chrome) Array.prototype.map(callbackfn) Array.prototype.map(callbackfn, thisArg) Parametry: Function callbackfn - funkcja zwracająca nową wartość elementu i przyjmująca argumenty: kValue - element tablicy Number k - indeks elementu tablicy Array O - oryginalna tablica thisArg - wartość bieżącego obiektu this dostępnego w czasie wywołania wewnątrz ciała funkcji (domyślnie: undefined) Wartość: Array - nowa tablica Wyjątki...
- Komendy CSS3 / Układ elastyczny CSS
...Wartość flex-start | flex-end | center | space-between | space-around | stretch Inicjalizacja stretch Zastosowanie kontener elastyczny, którego elementy zostały ułożone w wielu wierszach Dziedziczenie nie Procenty nie align-items Wspólne wyrównanie wiersza Wartość flex-start | flex-end | center | baseline | stretch Inicjalizacja stretch Zastosowanie kontener elastyczny Dziedziczenie nie Procenty nie align-self Indywidualne wyrównanie wiersza Wartość auto | flex-start...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...kolor tła Definicja koloru który wyświetli się w tle strony w następujących przypadkach: w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub półprzezroczyste (format PNG) przez krótki moment kiedy grafika tapety nie zdąży się jeszcze załadować, a strona będzie już widoczna w oknie przeglądarki jeśli nie uda się załadować grafiki z tapetą - np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...tej własności może być tworzenie widżetów, które często są dostarczane przez podmioty zewnętrzne do wstawienia na swojej stronie. Ponieważ elementy takie są osadzane w wielu różnych serwisach, nie ma możliwości efektywnie dopasować ich wyglądu do każdej strony. Dlatego ich twórcy najczęściej projektują jakiś jeden uniwersalny wygląd i dążą do tego, aby wszędzie wyglądały tak samo. Może w tym pomóc ustawienie na elemencie najbardziej nadrzędnym widżetu deklaracji "all: initial", która...