Полезная вЁрстка
8.89K subscribers
43 photos
13 videos
16 files
34 links
Канал про вёрстку. Готовые решения повседневных задач с которыми сталкиваются верстальщики и фронтендеры.

Пригласить друга: @code_advantage

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/+nSuZ30BALUg1Zjdi/card?r=Wj7h1mbl

№ 4953335238
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Cool Text — красивая анимация текста, реализованная с помощью CSS-правила @keyframes

#css
🔥18👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Multi Range input — кастомные input типа диапазон на чистом CSS, стиль которых можно легко настроить.

#css
👍11🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Sticky-Stacked Cards — карточки, собирающиеся в стопку при прокрутке страницы. Реализованы на чистом CSS.

#css
👍14🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Horizontal scroll section — секция с горизонтальной прокруткой, реализованная с помощью GSAP.

#gsap
👍14🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Event Cards — карточки с информацией о событий, реализованные с помощью React.

#react
👍16🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Card Hover Effects — карточки с анимацией раскрытия контента при наведении, реализованная на чистом CSS.

#css
👍26🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Order confirm animation — анимация подтверждения заказа при клике, реализованная с помощью jQuery.

#jquery
🔥18👍52
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Image reveal with filter && clip-path — изображения с эффектами при наведении, реализованные с помощью CSS-фильтра clip-path.

#css
👍21🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle buttons — кнопки переключения в современном стиле на чистом CSS.

#css
👍23🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey footer — "липкий" футер; анимация капель реализована с помощью jQuery.

#css #jquery
👍14🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
2020 Toggles — кастомные переключатели в современном стиле на чистом CSS.

#css
👍9🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Button — кнопка отправки данных с анимацией и сообщением об успешной отправке при клике. Анимация реализована с помощью JavaScript.

#css #javascript
🔥8👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Split 3D Carousel — 3D-слайдер, состоящий из двух кубов. Реализован с помощью jQuery.

#jquery
👍9🔥3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Neumorphic Elements — UI-элементы в современном стиле неоморфизма, реализованные с помощью CSS и JavaScript.

#css #javascript
👍21🔥7
ТОП-2 способа научиться создавать сайты:

✖️ Купить дорогой онлайн-курс
✔️ Подписаться на Сайтодел

Это крупнейшее сообщество Web-разработчиков в Telegram! Там делятся лучшими бесплатными материалами и уроками:

📲 Макеты, сниппеты, репозитории и даже цветовые палитры. Здесь собрано всё, что необходимо новичку!

Подписывайтесь и прокачивайте свои навыки: @sitodel 👈
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Mini Music Player - VueJS — мини-плеер в современном стиле, реализованный с помощью VueJS.

#vue
👍12🔥54
This media is not supported in your browser
VIEW IN TELEGRAM
Yet another slider — слайдер с тремя способами перелистывания изображений - нажатием на стрелки, скроллом и свайпом. Анимация перелистывания реализована с помощью GSAP.

#GSAP
🔥14👍7
This media is not supported in your browser
VIEW IN TELEGRAM
3D carousel — 3D-слайдер, реализованный с помощью CSS и JavaScript. При прокрутке колеса мыши меняется радиус слайдера.

#css #javascript
👍15🔥7👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Simple CSS Waves | Mobile & Full width — анимация волн, реализованная на чистом CSS.

#css
👍19🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Marker | Framer Motion — маркер на React, анимация реализована с помощью Framer Motion.

#react
👍5🔥3