przykład - Kurs HTML i CSS
HTML5 / Nawigacja <nav>...przedzierania się przez mniej istotne treści, które w kodzie źródłowym dokumentu znajdują się przed nim. Przykład <nav> Poniżej przedstawiony przykład zawiera dwie sekcje nawigacyjne: pierwsza dla całego serwisu, a druga w obrębie artykułu na stronie. <nav> <ul> <li><a href="index.html">Strona główna</a></li> <li><a href="contents.html">Spis treści</a></li> </ul> </nav> <article> <h1>Mój artykuł</h1> <nav> <ul> <li><a href="#sec1">Rozdział 1</a></li> <li><a...
- HTML5 / Uwydatnienie <mark>
...możemy przekazać użytkownikowi, że taki fragment może być dla niego szczególnie przydatny, biorąc pod uwagę czynności, które właśnie podjął. Na przykład jeżeli użytkownik właśnie użył wyszukiwarki w serwisie, w wynikach wyszukiwania możemy uwydatnić słowa, których szukał. Należy wyraźnie odróżnić znaczenie uwydatnienia realizowanego przez znacznik MARK od EM i STRONG. Element MARK uwydatnia tekst tylko w określonym kontekście (w innym może już nie być zaznaczony). Natomiast znacznik EM...
- HTML5 / Autouzupełnianie <datalist>
...<option value="wartość1" label="skrót1"> <option value="wartość2" label="skrót2"> </select> </datalist> Przykład <datalist> Zobacz przykład: DATALIST
- HTML5 / Pasek postępu <progress>
...specjalny animowany pasek postępu, którego pozycja będzie np. przechodzić w kółko z jego lewej na prawą stronę. Przykład <progress> Zobacz przykład: PROGRESS
- HTML5 / Otwierany panel <details, summary>
...inaczej niż zamknięty - np. można dodać do niego czerwoną ramkę: details[open] { border: 1px solid red; } Przykład <details, summary> Zobacz przykład: DETAILS, SUMMARY
Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}...white, black) radial-gradient(closest-corner at 25% 25%, white, black) radial-gradient(farthest-corner at 25% 25%, white, black) Inne ciekawe przykłady: radial-gradient(at 50% 110%, lightskyblue 40%, fuchsia, purple, blue, lime, yellow, orange, red, lightskyblue 60%) radial-gradient(ellipse 33% 66% at right top, white, red 75%, black) Powtarzany gradient promienisty {background: repeating-radial-gradient} (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera) selektor...
- Układ elastyczny CSS / Kolejność {order}
...W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4 blok 5 Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i...
- Układ elastyczny CSS / Wyrównanie wiersza {align-items, align-self}
...w pionie CSS? Aby wyśrodkować zawartość w pionie za pomocą CSS, można użyć właściwości align-items z wartością center w kontenerze flexbox. Oto przykład: .kontener { display: flex; align-items: center; /* Wyśrodkowanie w pionie */ }.
Globalne obiekty w JavaScript / Przekształcanie wartości w parseInt - parseInt...Pozwala przekształcić podany tekst na liczbę całkowitą. O tym, w jakim systemie jest zapisana liczba, decyduje podstawa systemu liczbowego. Na przykład w systemie heksadecymalnym (szesnastkowym) mamy do dyspozycji 16 cyfr: cyfry arabskie 0-9 i litery A-F (wielkość znaków nie ma znaczenia). Literze A odpowiada wartość 10, B - 11 itd. Innym popularnym systemem liczbowym jest system oktalny (ósemkowy) - podstawa 8. Natomiast na co dzień posługujemy się systemem decymalnym (dziesiętnym)...
- Alternatywne sposoby definiowania funkcji w JavaScript - Function / Dynamiczne tworzenie funkcji w JavaScript - new Function
Spis treści new Function new Function length new Function new Function() new Function(body) new Function(p1, p2... pn, body) Parametry: String body - ciało (kod źródłowy) funkcji String p1, String p2... String pn - lista nazw argumentów funkcji; możliwe jest również łączenie kilku nazw argumentów w jednej zmiennej tekstowej rozdzielając je przecinkami - dlatego konstrukcja: "p1", "p2", "p3", "p4" jest równoważna: "p1,p2, p3", "p4" Wartość: Function - nowa instancja funkcji...