👩‍💻 Animated Login Form

Форма для входа с интересной анимацией вокруг. Сделана на чистом CSS.

#codepen


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

Proximity Glow Cards

Настройки стилей карточек реализованы при помощи библиотеки dat.gui. Стилизовано и анимировано в CSS.

👉 @seniorFront


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Веб-страница: 1 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

Travel carousel

Функционал слайдера реализован библиотекой swiper. Стилизовано в SCSS.

👉 @seniorFront


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

🖥 AI and Machine Learning Landing Page – сайт для приложения, использующего нейросеть. Выполнен в холодных пастельных тонах, которые хорошо сочетаются с темным фоном.

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


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

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

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 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

Soap & Bubbles

В этом видео создается анимация, частицы которой генерируются в JS, а затем анимируются в CSS.

👉 @seniorFront


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

​​Стилизация участков текста с помощью CSS Custom Highlight API

В этой статье рассказали, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере: https://tproger.ru/articles/css-custom-highlight-api

#css


Original post link: t.me/tproger_web/4562
Forwarded and filtered by @smartfeed_bot

Слайдер для выражения эмоций, написанный на 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