Html Gram
9.93K subscribers
13 photos
450 videos
2.18K links
Улучши свой сайт, используя крутые codepen решения.

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

Ссылка на канал: @HtmlGram1
Канал на бирже: https://telega.in/c/HtmlGram1

РКН: https://bit.ly/3XoPSV0
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Confirm confetti button

Красивая кнопка подтверждения с эффектами конфетти.

Забрать код

@HtmlGram1 | #scss #js
14
This media is not supported in your browser
VIEW IN TELEGRAM
3D Scrolling Gallery/Timeline

Анимированная галерея для отображен таймлайна или же просто просмотра картинок.

Забрать код

@HtmlGram1 | #css #js
15
This media is not supported in your browser
VIEW IN TELEGRAM
Click to send

Удобная и красивая кнопка для отправки писем. Сделано на CSS и JS.

Забрать код

@HtmlGram1 | #css #js
17👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Vertical menu with gooey effect on hover

Вертикальное меню с эффектом желе при наведении.

Забрать код

@HtmlGram1
| #scss #js
17
This media is not supported in your browser
VIEW IN TELEGRAM
Light / Dark / Black Theme

Удобная менюшка для управления темой.

Забрать код

@HtmlGram1 | #scss #js
9
This media is not supported in your browser
VIEW IN TELEGRAM
Let there be light

Креативно и лаконично сделанный переключатель темы

Забрать код

@HtmlGram1 | #css #js
12
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Button

Красивая анимированная кнопка загрузки с конфетти.

Забрать код

@HtmlGram1 | #css #js
9
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Border Gradient

Красивая рамка с градиентным эффектом, поддерживает радиус границы: для этого потребуется отдельный элемент.

Забрать код

@HtmlGram1 | #css
8
This media is not supported in your browser
VIEW IN TELEGRAM
Add to cart

Аккуратненькая кнопка для добавления товара в корзину.

Забрать код

@HtmlGram1 | #css #js
16👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Magnetic Hover Interaction

Магнетическая анимация для взаимодействия с объектами меню.

Забрать код

@HtmlGram1 | #scss #js
9
This media is not supported in your browser
VIEW IN TELEGRAM
Navigation bar concept

Интересный вариант оформления навигационной менюшки.

Забрать код

@HtmlGram1 | #css #js
11
This media is not supported in your browser
VIEW IN TELEGRAM
Title transparent & border

Дизайн границ и прозрачного заголовка написанный с помощью CSS.

Забрать код

@HtmlGram1 | #css #js
12🦄2
This media is not supported in your browser
VIEW IN TELEGRAM
Outfit at Dusk

Раскладывающееся меню, сделано на чистом CSS.

Забрать код

@HtmlGram1 | #css #js
8
This media is not supported in your browser
VIEW IN TELEGRAM
Pricing Tables

Адаптивные карточки цен, реализованные на SCSS.

Забрать код

@HtmlGram1 | #scss
12
This media is not supported in your browser
VIEW IN TELEGRAM
Interface control

Элемент управления интерфейсом, сделан с помощью CSS.

Забрать код

@HtmlGram1 | #css
15
This media is not supported in your browser
VIEW IN TELEGRAM
LEDs On/Off

Переключатели вкл/выкл в стиле светодиодов, написанные на CSS и JavaScript.

Забрать код

@HtmlGram1 | #css #js
13
This media is not supported in your browser
VIEW IN TELEGRAM
Hopdot Loader

Загрузочная анимация в виде перекатывающихся точек. Написано на GSAP.

Забрать код

@HtmlGram1 | #gsap
11
This media is not supported in your browser
VIEW IN TELEGRAM
FadeIn Text with bars

Тест с эффектом исчезнования и полосами. Написан с помощью SCSS.

Забрать код

@HtmlGram1 | #scss
8
This media is not supported in your browser
VIEW IN TELEGRAM
T-Shirt Cannon Button

Кнопка-анимация для подтверждения успешного заказа одежды, сделанная на Splitting.js и GSAP.

Забрать код

@HtmlGram1 | #gsap
13👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Google Maps Example

Пример c гугл картами: Nightly. Сделано с помощью JavaScript и CSS.

Забрать код

@HtmlGram1 | #css #js
11
This media is not supported in your browser
VIEW IN TELEGRAM
Views - CSS Doodle

Картинка при нажатии на которую происходит анимация, реализована с помощью CSS и JS.

Забрать код

@HtmlGram1 | #css #js
10