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

Circular Progress Bar

В этом видео создаётся анимированный индикатор на HTML, CSS и JS.

👉 @seniorFront


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

👩‍💻 Firefly Button

Сцена с измененным курсором и анимированной кнопкой. Сделана на CSS и JavaScript.

#codepen


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

Face Grid Track

Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript.

https://codepen.io/ryankbrown/pen/QWQxQeB


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

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

Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 4 message(s)
Senior Frontend - javascript, html, css: 4 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

Тот самый гаджет, который помогает протянуть до пятницы

👉 @seniorFront


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

Point and click penguin

Весь экран разделен на клетки, при нажатии на которые задействуются множество анимаций. Создано без использования библиотек, на чистом JS.

https://codepen.io/Ma5a/pen/MWrZPOP


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

Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно

Все найденные курсы собирают тут — @portalToIT

По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов.


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

Elastic Div

Логика изменения ширины контейнера реализована в JS, анимировано библиотекой gsap.

👉 @seniorFront


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

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

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

What's behind ?

Реализовано на canvas и THREE.js

👉 @seniorFront


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

💾 Generative Blobs – маски неправильной формы для изображений. Тут можно менять количество углов и степень заостренности, а также генерировать рандомные варианты.

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


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