Новые возможности 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
CSS - min(), max() - функции
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем div и у него свойство width, max-width, min-width:
Как мы писали раньше:
Как это можно написать сейчас:
❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем div и у него свойство width, max-width, min-width:
Как мы писали раньше:
// Вариант 1 div {max-width: 780px; width: 80%};// Вариант 2div {width: 50%; min-width: 400px};Как это можно написать сейчас:
// Вариант 1div {max-width: min(80%, 780px)};// Вариант 2div {width: max(50%, 400px)};❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
Хабр
CSS-функции min(), max() и clamp()
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех осн...
🔥11👍2❤1