Шпаргалка по работе с медиа в браузере
В данной шпаргалке представлены все основные интерфейсы и методы по работе с медиа в браузере, описываемые в следующих спецификациях:
👉 Media Capture and Streams
👉 Screen Capture
👉 Media Capture from DOM Elements
👉 MediaStream Image Capture
👉 MediaStream Recording
👉 Web Speech API
Читать...
В данной шпаргалке представлены все основные интерфейсы и методы по работе с медиа в браузере, описываемые в следующих спецификациях:
👉 Media Capture and Streams
👉 Screen Capture
👉 Media Capture from DOM Elements
👉 MediaStream Image Capture
👉 MediaStream Recording
👉 Web Speech API
Читать...
Новые возможности CSS - animation-timeline
Алоха товарищи!
Наверное многим тут приходилось хоть раз за свою карьеру разрабатывать анимацию которая зависит от состояния скролла. И думаю что большинство из нас делало это за счет js евента -
Так вот, есть другой способ. Эту штуку можно релизнуть за счет
И так немного кода:
Как видим наша функция принимает 2 параметра
Параметр 1 - относительно чего считаем наш скролл:
Параметр 2 - ось (
Соответственно если мы выбираем x то считаем таймлайн относительно горизонтального скролла, если y то вертикального
В целом теперь вы ознакомлены с возможностью этой новой фичи. Если захотите почитать подробнее про свойство animation-timeline то вот вам ссылка на документацию, но она на английском.
Удачи в экспериментах
Алоха товарищи!
Наверное многим тут приходилось хоть раз за свою карьеру разрабатывать анимацию которая зависит от состояния скролла. И думаю что большинство из нас делало это за счет js евента -
scroll. Метод хоть и рабочий но не сказать что самый лучший, его огромный минус в том что при скроллинге данный евент срабатывает очень часто, что как вы понимаете не очень хорошо влияет на производительность.Так вот, есть другой способ. Эту штуку можно релизнуть за счет
CSS свойства animation-timeline. Само свойство уже не новое, но вот привязать таймлайн к скроллу появилась возможность недавно.И так немного кода:
.element { animation-timeline: scroll(nearest x)}Как видим наша функция принимает 2 параметра
Параметр 1 - относительно чего считаем наш скролл:
nearest - ближайший контейнер (дефолтное значение)root - считает скролл относительно элемента documentself - назначает сам элемент скролл контейнеромПараметр 2 - ось (
x или y)Соответственно если мы выбираем x то считаем таймлайн относительно горизонтального скролла, если y то вертикального
В целом теперь вы ознакомлены с возможностью этой новой фичи. Если захотите почитать подробнее про свойство animation-timeline то вот вам ссылка на документацию, но она на английском.
Удачи в экспериментах
👍7
CSS. Использование переменных
Всем привет!
В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.
Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.
Пример:
Собственно как то так, удачи вам в экспериментах!
Всем привет!
В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.
Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.
Пример:
:root { --base: #ffc600; --spacing: 10px; --blur: 10px;}img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); filter: blur(var(--blur));}.hl { color: var(--base);}Собственно как то так, удачи вам в экспериментах!
👍7❤2🔥2👎1
Фичи CSS - Запоминайте меньше и достигайте большего с помощью логических свойств
Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.
👉 Ссылка на codepen
Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.
button { padding-inline: 2ch; padding-block: 1ch;}article > p { text-align: start; margin-block: 2ch;}.something::before { inset-inline: auto 0;}👉 Ссылка на codepen
❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Error 404 на CSS
<code class="language-css"><code class="language-css">.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}
.page_404 img{ width:100%;}
.four_zero_four_bg{
background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
height: 400px;
background-position: center;
}
.four_zero_four_bg h1{
font-size:80px;
}
.four_zero_four_bg h3{
font-size:80px;
}
.link_404{
color: #fff!important;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
display: inline-block;}
.contant_box_404{ margin-top:-50px;}🔥23👎12👍4❤1