source - Kurs HTML i CSS
HTML5 / Filmy i dźwięk <video, audio, source>Spis treści <video, audio, source> Wstęp Filmy i dźwięk Atrybuty odtwarzacza autoplay controls loop muted playsinline poster preload width, height Formaty audio/wideo MP3/MP4 OGG/OGV Kodeki Kodeki MP4 Kodeki OGG/OGV Wstęp Przed pojawieniem się języka HTML5, istniały już różne sposoby osadzania treści multimedialnych audio/wideo na stronach internetowych: Osadzenie pliku Uniwersalny sposób odtwarzania plików Niestety miały one spore wady: Większość z nich nie...
- HTML5 / Responsywny obrazek <picture, source>
Spis treści <picture, source> Wstęp Dopasowanie formatu <picture, source type> Dopasowanie kadru <picture, source media> Wstęp (interpretuje: Firefox 38, Opera 25, Chrome 38) Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim...
Obramowanie CSS / Obramowanie obrazkowe {border-image-source}Spis treści {border-image-source} Ramka obrazkowa w tle Obrazek obramowania {border-image-source} Ramka obrazkowa w tle Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź...
Losowy element...function(limit) { if (typeof limit == 'undefined' || limit < 0) limit = 1; else if (!limit) limit = this.length; for (var i = 0, source = this, target = new Array(), n = source.length; i < limit && n > 0; i++) { do { var index = Math.random(); } while (index == 1); index = Math.floor(index * n); target.push(source[index]); source[index] = source[--n]; } return target; } document.write(new Array( // Tu wpisz kolejne elementy: 'Tekst 1', 'Tekst 2...
Obiekt wyrażenia regularnego - RegExp / Tworzenie nowej instancji wyrażenia regularnego - new RegExpSpis treści new RegExp new RegExp source global ignoreCase multiline lastIndex new RegExp new RegExp() new RegExp(pattern) new RegExp(pattern, flags) Parametry: String|RegExp pattern - wzorzec (domyślnie: "(?:)") String flags - flagi: g - dopasowanie globalne i - ignorowanie wielkości liter m - dopasowanie wielu linii Wartość: RegExp - nowa instancja obiektu wyrażenia regularnego Wyjątki: TypeError - pattern jest typu RegExp i argument flags został zdefiniowany...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...Jedna lub więcej z tych części musi się pojawić na liście wartości atrybutów. Na przykład: div { border-image: url(punkt.gif) 10 } /* border-image-source: url(punkt.gif); border-image-slice: 10 */ div { border-image: url(punkt.gif) 10 / 10px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px */ div { border-image: url(punkt.gif) 10 / 10px / 5px } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px...
- Komendy CSS3 / Maskowanie CSS
...treści clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path Kształt obcinania Wartość...
- Obramowanie CSS / Obcięcie obramowania obrazkowego {border-image-slice}
...30% 12% 20%", uzyskamy następującą siatkę obcięć: Źródło: CSS Backgrounds and Borders Module Level 3 Przykład {border-image-slice} border-image-source: url(punkt.gif); border-image-slice: 5 10; border-width: 5px 10px border-image-source: url(punkt.gif); border-image-slice: 10 15 fill; border-width: 5px 10px Ramka wypełniona środkowym elementem siatki. border-image-source: url(punkt.gif); border-image-slice: 50%; border-width: 16px Podanie wartości obcięcia większej lub równej 50...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
...sąsiednimi powtórzeniami obrazka zostanie dobrana w taki sposób, aby obrazek nie był przycięty) Przykład {border-image-repeat} border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: stretch; border-width: 10px Domyślny sposób powtarzania obrazka w obramowaniu. border-image-source: url(punkt.gif); border-image-slice: 10; border-image-repeat: repeat; border-width: 10px Standardowe powielenie - część grafiki obramowania może być przycięta...
- HTML5 / Nowe elementy HTML5
Spis treści Wstęp Sekcje Nagłówki sekcji Znaczniki grupujące Semantyka tekstu Elementy osadzone Formularze Pole INPUT Elementy interaktywne Skrypty Wstęp Standard HTML5 nie jest już taki nowy, ale nadal mogą być do niego wprowadzane nowe znaczniki. Przeglądarki które ich jeszcze nie odsługują, zwykle próbują wyświetlać je w linii. Nie jest to zgodne z domyślnym sposobem prezentacji części z tych elementów określonym w specyfikacji. Aby ujednolicić sposób wyświetlania...