Слайдер для выражения эмоций, написанный на SCSS и JS.

https://codepen.io/thebabydino/pen/vwJeJN


Original post link: t.me/senior_front/1998
Forwarded and filtered by @smartfeed_bot

React Smooth Section Navigator

Создано на React и анимировано библиотекой gsap.

👉 @seniorFront


Original post link: t.me/seniorFront/4065
Forwarded and filtered by @smartfeed_bot

👩‍💻 Запросы стиля

Спецификация запросов контейнера также позволяет запрашивать значения стилей родительского элемента.

В следующем примере используются характеристики погоды, хранящиеся в значениях переменных, такие как дождь, солнечно и облачно, для стилизации фона карточки и иконки индикатора.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url();
   background: gold;
 }
}


Original post link: t.me

/frontendnoteschannel/3564
Forwarded and filtered by @smartfeed_bot

Modal Mitosis

Растягиваемое расширяющееся поле со скрытым контентом, написанное на чистом CSS с помощью фильтра goo для SVG и checkbox toggle.

https://codepen.io/ste-vg/pen/dENPjO


Original post link: t.me/senior_front/1999
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 8 messages
Today you received: 6 messages
Our filtering prevented you from: 2 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 2 message(s)
Frontender's notes [ru]: 2 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Переключение тем

Темы оформления с возможностью переключения, реализованные с помощью PostCSS и JavaScript.

https://codepen.io/argyleink/pen/vYxrrpd


Original post link: t.me/senior_front/2001
Forwarded and filtered by @smartfeed_bot

🖥 Дайджест самых интересных публикаций за неделю:

• Как написать функцию для поиска анаграмм в списке слов.

• Что такое Promise, и какими бывают его состояния.

• 18 советов по созданию чистого и эффективного кода JavaScript.

• Обзор на распределённые условные типы в TypeScript.


Original post link: t.me/frontendnoteschannel/3567
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 2 messages
Our filtering prevented you from: 7 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​.scrollTo()

Метод scrollTo() позволяет программно прокрутить элемент до некоторой точки координат на странице.
window.scrollTo(x, y)
Где x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент. Прокрутим первый на странице <div> на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появилась полоса прокрутки):
const div = document.querySelector('div')
div.scrollTo(0, 100)

Вместо координат в scrollTo() можно передать объект с тремя параметрами:
- top задаёт количество пикселей для прокрутки по оси y;
- left то же самое, но по оси x;
- behavior определяет поведение прокрутки. По умолчанию резкое auto, но можно указать плавный smooth.
window.scrollTo({
top: 100,
left: 0,
behavior: 'smooth'
})

scrollTo() необходим в случае, когда прокрутку нужно совершить до определённых координат на экране. В случае прокрутки относительно текущего положения лучше воспользоваться scrollBy(), а в случае прокрутки до конкретного элемента — методом scrollIntoView().

👉 @seniorFront

👩‍💻 Smooth Liquid Background Effect

Сцена с анимированным фоном. Сделана на SVG, CSS и JavaScript.

#codepen


Original post link: t.me/frontendnoteschannel/3568
Forwarded and filtered by @smartfeed_bot

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO


Original post link: t.me/senior_front/2002
Forwarded and filtered by @smartfeed_bot

Button Hover Effects

Подборка кнопок, стилизованных и анимированных в SCSS.

👉 @seniorFront


Original post link: t.me/seniorFront/4072
Forwarded and filtered by @smartfeed_bot

JavaScript. Что будет выведено в консоль?

Ответ


Original post link: t.me/senior_front/2004
Forwarded and filtered by @smartfeed_bot

👩‍💻 Полноценная поддержка вложенности без препроцессоров

Вложенность в CSS — это когда мы помещаем внутри родительского элемента стили дочерних элементов. Вложенность позволяет писать компактный код, и до сих пор она была доступна только в препроцессорах — в Sass и Less.Препроцессор Sass — с чего начать новичку

Теперь это можно реализовать в обычном CSS. Например, у родительского элемента .card есть дочерние элементы .title и .content. Мы можем поместить стили дочерних элементов прямо внутрь стилей .card:

.card {
    /* основные стили карточки */
    &:hover,
    &:focus {
        /* стили ховера и состояния фокуса */
    }
    .title {
        /* стили для заголовка внутри карточки */
    }
    .content {
        /* стили для контента внутри карточки */
    }
}

В таком коде легче искать нужный селектор — всё сгруппировано в одном месте.


Original post link: t.me/frontendnoteschannel/3570
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 6 messages
Our filtering prevented you from: 6 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Signup Form 3D FLIP Animation

3D-анимация формы регистрации, реализованная с помощью CSS и JavaScript.

https://codepen.io/team/keyframers/pen/LYRXGxO


Original post link: t.me/senior_front/2005
Forwarded and filtered by @smartfeed_bot

This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 1 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

lapisCordis

Вёрстка создана на Pug и CSS. В JS реализована логика раскрытия карточки.

👉 @seniorFront


Original post link: t.me/seniorFront/4077
Forwarded and filtered by @smartfeed_bot

🖥 Ice Cream Landing Page – дизайн лендинга для магазина мороженого. Здесь использованы сочные, "ягодные" оттенки красного и фиолетового.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1766
Forwarded and filtered by @smartfeed_bot

Acrobatic Preloader

Оригинальный лоадер, созданный из svg-картинки и анимированный на CSS.

https://codepen.io/jkantner/pen/VwrYggy


Original post link: t.me/senior_front/2006
Forwarded and filtered by @smartfeed_bot

💾 SVG Filter Text Marquees – многослойное изображение с анимированным текстом. Анимацию можно остановить, нажав на кнопку.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1768
Forwarded and filtered by @smartfeed_bot