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

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

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

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

№ 4953335238
Download Telegram
Полезная Вёрстка Httpst.Mecode Advantage (3).m4v
867.4 KB
Shattering Images

Галерея изображений, которые разбиваются на множество осколков при клике. Реализована с помощью Delaunay.js и TweenMax.js

#javascript
🔥3
Полезная Вёрстка Httpst.Mecode Advantage (4).m4v
637.4 KB
Image Hover Effects

Несколько вариантов эффектов при наведении на блоки с изображением и текстом.

#css
Полезная Вёрстка Httpst.Mecode Advantage(2).m4v
953.5 KB
Quick details with zoom view

Адаптивные карточки товаров с подробным просмотром товара в модальном окне.

#css #jquery
This media is not supported in your browser
VIEW IN TELEGRAM
Visual Studio Code

Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!

#редактор_кода
👍17🔥53
This media is not supported in your browser
VIEW IN TELEGRAM
Адаптивная навигация для сайта

Под капотом имеем красивую анимацию реализованную на GSAP. С легкостью внедряется в проект и кастомизируется.

#css
👍8👎41🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Табы с анимацией

Табы с красивой анимацией в виде слайдера. Используем CSS и jQuery.

#css #jquery
👍7🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Навигация

«Липкая» навигация для вашего проекта при помощи jQuery и CSS.

#jquery #css
👍12🔥2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Аккордеон

Красивый аккордеон на jQuery с плавной анимацией. Легкая кастомизация и неплохое украшение вашего проекта.

#jquery #css
👍14🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Hover эффект

Overlay эффект при наведении на изображение. Используем только CSS и немного магии.

#css
👍15🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Навигация

Адаптивная навигация, которая имеет простое исполнение, приятный дизайн и выпадающие пункты меню.

#jquery #css
👍15🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер

Красивый и интересный слайдер на чистом JS. Если в вашем проекте уже используется GSAP, то данный слайдер будет прекрасным дополнением.

#gsap #css
🔥12👍82
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация

Необычная canvas анимация, которая может стать изюминкой вашего проекта.

#canvas #animation
👍13🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопка

Оригинальная кнопка загрузки с красивой анимацией. Под капотом GSAP и немного магии.

#gsap #css
🔥10👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Тимлид по секрету показал мне свои закладки

Там столько полезного, что я не удержался и выкладываю все это добро на своем канале.

Подпишись на канал и посмотри 👇
👍2🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация текста

Красивая анимация текста при наведении, которая станет фишкой вашего портфолио или сайта вашего клиента.

#gsap #css
🔥9👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Random Password Generator - генератор случайных паролей. Реализован с помощью HTML, CSS и JS.

#js #css
👍6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Sense of depth - реализация объёма с помощью css-свойства clip-path.

#css #анимация
🔥9👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Image slider with multiple controls - адаптивный слайдер с автопрокруткой и несколькими элементами управления. Реализован с помощью HTML, CSS и JavaScript.

#css #javascript
👍8🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Profile Card Hover Effect - эффект увеличения изображения карточки при наведении. Реализован на чистом CSS.

#css
🔥18👍12
This media is not supported in your browser
VIEW IN TELEGRAM
Hideaway - эффект перелистывания бумаги. Реализовано с помощью CSS-свойства clip-path
и серединного перпендикуляра.

#css #javascript
🔥8👍5