Html Gram @htmlgram1 Channel on Telegram

Html Gram

@htmlgram1

Улучши свой сайт, используя крутые codepen решения.

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

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

РКН: https://bit.ly/4jakQtq

Html Gram (Russian)

Html Gram - это канал, который поможет вам улучшить свой сайт, используя крутые решения на codepen. Здесь вы найдете полезные советы, инструкции и примеры того, как сделать ваш сайт еще более привлекательным и функциональным.

Подписывайтесь на Html Gram и получайте актуальную информацию о новых тенденциях и лучших практиках в веб-разработке.

Для сотрудничества обращайтесь к администратору канала @dad_admin.

Присоединяйтесь к Html Gram прямо сейчас, чтобы стать экспертом в области веб-разработки!

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

Html Gram

14 Feb, 15:08

Trading Card

Плавный разворот карточки при наведении курсора. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
602
Html Gram

14 Feb, 07:01

Border Button Animation

Граница кнопки отправляется в бега при наведении на нее. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
846
Html Gram

13 Feb, 15:05

Submit Button Animation

Анимация, отражающая прогресс выполнения операции. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #Javascript
1,055
Html Gram

13 Feb, 07:02

Scroll button animation - Transparent

Анимированная подсказка для пользователя о контенте ниже. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,121
Html Gram

12 Feb, 15:04

Social Buttons

Hover-эффекты для списка социальных сетей. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,143
Html Gram

12 Feb, 07:03

Space 404

Прикольная анимация страницы #404. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,207
Html Gram

11 Feb, 15:03

CSS Only 3D Tagcloud V2

3D вращение текста наподобие планеты. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,318
Html Gram

11 Feb, 07:01

Makeup Palettes

Эффект наведения на карточки, напоминающий открывающиеся палетки. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,365
Html Gram

10 Feb, 12:17

Cards with hover effects

10 примеров того, как можно анимировать интерактивные элементы в карточках. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,489
Html Gram

10 Feb, 10:15

Батл по вёрстке, полезный нетворкинг и десятки докладов от экспертов

15 февраля Яндекс вновь проведет «Я💛Фронтенд» — конференцию для всех, кто живет фронтендом.

Вас ждут:
💛 Выступления топовых спикеров, дискуссии и новости веба
💛 Знакомство с Yandex Code Assistant: решите задачи по программированию и оцените качество подсказок в реальном времени
💛 CodeRun с Никитой Дубко и Сашей Шинкевич из Контеста Яндекса: котик Кодерун ловит спецсимволы в свой рюкзак, и на их основе вы пишите код
💛 Много полезного нетворкинга

Регистрируемся на конфу здесь до 12 февраля — там же будут выкатывать онлайн-активности.
1,474
Html Gram

10 Feb, 07:04

nav rebuilt

Эффект переворачивания блоков при наведении на элементы меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,479
Html Gram

09 Feb, 15:03

404 error page

Крутой способ преобразить стандартную страницу 404. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,692
Html Gram

09 Feb, 07:06

Cards & Popup video modal

Плавно выезжающий блок с подробностями при наведении на карточку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,608
Html Gram

08 Feb, 15:04

Header Menu

Необычное превращение бургер-кнопки в меню. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,777
Html Gram

08 Feb, 07:06

Button Hover Styles

Подборка эффектов для кнопок при наведении курсора. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,820
Html Gram

07 Feb, 15:05

Code Motel Logo

Окрашивание логотипа в яркие цвета при наведении на него курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,716
Html Gram

07 Feb, 07:03

Icon Social Menu Animation

Иконки соцсетей, которые сменяют свой фон при наведении на них курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,749
Html Gram

06 Feb, 12:17

Scroll Driven Portal Layout

Макет портала с необычной реализацией анимации прокрутки. Реализовано с помощью CSS и JavaScript.

⤷ Забрать код

@HtmlGram1 | #css #js
1,853
Html Gram

06 Feb, 07:05

Social Icon Hover Effect

Эффект наведения на карточку с появлением иконок соцсетей. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,716
Html Gram

05 Feb, 16:39

Card hover 1

При наведении на карточку вы увидите яркий солнечный цвет. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,994
Html Gram

10 Jan, 15:07

Marble Checkbox - CSS

Неоновый переключатель для вашей страницы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
593
Html Gram

10 Jan, 07:01

Checkbox (CSS ONLY) + Animation

Флажок, который указывает на то, что опция выбрана. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
859
Html Gram

09 Jan, 15:05

Spotlight - Background animation

Фоновая анимация, напоминающая блики прожектора. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,068
Html Gram

09 Jan, 07:02

Google Pre-Loader

Волнообразный прелоадер для вашей страницы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,153
Html Gram

08 Jan, 10:56

Profile Card Hover Effect

Наведение на карточку с возможностью перехода на соцсети. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,296
Html Gram

08 Jan, 08:55

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ

Вот отсортированная база с тонной материала(постепенно пополняется):

БАЗА (4687 видео/книг):

(363 видео, 87 книги) — Python
(415 видео, 68 книги) — Frontend
(143 видео, 33 книги) — ИБ/Хакинг
(352 видео, 89 книги) — С/С++
(343 видео, 87 книги) — Java
(176 видео, 32 книги) — Git
(293 видео, 63 книги) — C#
(174 видео, 91 книги) — DevOps
(167 видео, 53 книги) — PHP
(227 видео, 83 книги) — SQL/БД
(163 видео, 29 книги) — Linux
(107 видео, 43 книги) — СисАналз
(181 видео, 32 книги) — Go
(167 видео, 43 книги) — Kotlin/Swift
(112 видео, 24 книги) — Flutter
(137 видео, 93 книги) — DS/ML
(113 видео, 82 книги) — GameDev
(183 видео, 37 книги) — UI/UX
(129 видео, 73 книги) — QA
(213 видео, 63 книги) — Rust
(121 видео, 24 книги) — Ruby

Скачивать ничего не нужно — все выложили в Telegram
1,257
Html Gram

08 Jan, 07:01

Login Form Input animation

Форма для ввода имени и пароля на фоне градиентного перехода. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,181
Html Gram

07 Jan, 10:15

Checkbox CSS Toggle - Day / Night Mode

Переключатель с анимацией смены дневного времени на ночное. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,351
Html Gram

07 Jan, 08:15

🚨 Готова ли ваша конфигурация фаервола Windows к аудиту?

Фаервол Windows — это ключевой слой безопасности, защищающий ваши системы от несанкционированного доступа и вредоносного трафика. Но когда вы в последний раз проводили аудит его настроек?

В нашем новом посте мы разбираем основные шаги по проведению аудита конфигурации фаервола Windows — от выявления устаревших правил и проверки исключений до обеспечения непрерывного соответствия требованиям безопасности.

Если безопасность и соответствие стандартам важны для вашей организации, обязательно ознакомьтесь с этим руководством!

👉 Читайте больше и улучшайте аудит настроек фаервола!

https://t.me/IT_Audit/400

#ИТАудит #Кибербезопасность #ФаерволWindows
1,289
Html Gram

07 Jan, 07:02

Scroll-Driven Glow Cards

Карточки, управляемые прокруткой. Реализовано с помощью CSS и JavaScript.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,216
Html Gram

06 Jan, 12:17

Animated Social Links

Карточки принимают 3D-форму при наведении на соцсети. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,369
Html Gram

06 Jan, 09:15

Привет! Это Лёша Истомин, фронтенд разработчик из бигтеха. Я занес денег, чтобы пригласить вас подписаться на мой канал о фронтенде и личном опыте → @webistomin_channel

В постах я раскрываю всю свою экспертность:

→ Как я пишу резюме, которые собирают нормальные просмотры и приводят к собеседованию

→ Куда развиваться опытному программисту, который уже упёрся в зарплатный потолок

→ Что обязательно должен прочитать каждый уважающий себя фронтендер

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

Подписывайтесь, если интересуетесь фронтендом, личным развитием или повышением своего дохода. Буду рад вас видеть → @webistomin_channel

Реклама. Истомин А.С. ИНН 331108187709.
1,356
Html Gram

06 Jan, 07:01

Preloader Kitchen Knife

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

⤷ Забрать код

@HtmlGram1 | #css
1,415
Html Gram

05 Jan, 07:03

Input Animation

Простейшая анимация ввода имени пользователя. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,667
Html Gram

04 Jan, 15:05

Preloader

Залипательная анимация загрузки страницы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,625
Html Gram

04 Jan, 07:04

Card Animation

Карточки, которые можно выбрать, предварительно прочитав информацию. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,653
Html Gram

03 Jan, 15:04

Navbar Hover Effect

Полосатый эффект наведения на ссылку меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,710
Html Gram

03 Jan, 07:04

Анимированный прелоадер

Простой вариант анимированного прелоадера. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,741
Html Gram

02 Jan, 15:05

Link underline transition

Переход подчеркивания ссылки при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,806
Html Gram

02 Jan, 07:02

Navbar Hover Effect

Полосатый эффект наведения на ссылку меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,730
Html Gram

01 Jan, 18:16

Domino preloader

Эффект домино в качестве ожидания загрузки. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,291
Html Gram

01 Jan, 10:47

CSS Loader animation

Ожидание загрузки в виде мерцающего кольца. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,249
Html Gram

31 Dec, 21:00

❄️❄️❄️❄️❄️ 🍷
1,449
Html Gram

31 Dec, 15:01

Amazing card animation (circle effect)

Цвет фона карточки меняется с цветом текста при наведении на неё. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,415
Html Gram

31 Dec, 07:00

Link hover effects

Большое количество эффектов наведения на ссылку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,370
Html Gram

30 Dec, 15:02

Link hover effect

При наведении мышью область ссылки выделяется маркером. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,497
Html Gram

30 Dec, 07:00

A Simple Preloader

Прелоадер в виде большой растекающейся капли. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,488
Html Gram

29 Dec, 15:01

Social icon hover animation

2 варианта анимации при наведении на соц. сети. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,441
Html Gram

29 Dec, 06:59

Proud of CSS

Множество эффектов наведения на ссылку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,599
Html Gram

28 Dec, 15:02

Profile Card Animation

Изображение преобразуется в информационную карточку при нажатии на значок. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,631
Html Gram

28 Dec, 07:13

Zero Element: DeLight

Движущийся фон с эффектом размытия. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,610
Html Gram

27 Dec, 15:01

Gradient underline hover

Пример анимированного подчеркивания с градиентной заливкой. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,793
Html Gram

27 Dec, 07:00

Button Animation

Контур обхватывает всю кнопку и закрашивает её в свой цвет при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,756
Html Gram

26 Dec, 15:01

'Making pancake' loader

Прелоадер в виде приготовления блинов. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,725
Html Gram

26 Dec, 07:01

Article Card - CSS Transition

Эффект наведения на карточку с плавным отскоком области с описанием. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,821
Html Gram

25 Dec, 15:01

Custom Checkbox by grvmmy

Анимация для переключателя с плавной смена цветов при нажатии. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,765
Html Gram

07 Dec, 15:00

Side Menu Animation

Открытие бокового меню с поочередным появлением пунктов навигации. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
582
Html Gram

07 Dec, 07:02

Background Animation

Снегопад на фоне градиента. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
803
Html Gram

06 Dec, 15:00

Menu Animation

Анимация в виде гибких линий для кнопки открытия меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
947
Html Gram

06 Dec, 07:01

Gooey Menu - CSS Only

Плавное разворачивание набора действий. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,124
Html Gram

05 Dec, 15:01

A simple and cool full menu animation

Анимация для открытия полноэкранного меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,118
Html Gram

05 Dec, 07:01

Flipping Card

Карточка с информацией о человеке на обратной стороне. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,205
Html Gram

04 Dec, 10:01

Hamburger menu animation with velocity.js

Ещё один вариант анимации для кнопки, открывающей меню сайта. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,304
Html Gram

04 Dec, 08:00

Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.

Опыт в программировании не нужен.

Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения.

За 7 дней обучения ты:

1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.

👉 Проскочить на интенсив бесплатно

🔥 С нас обучение, практика и помощь с выходом на фриланс.
1,321
Html Gram

04 Dec, 06:10

background animation

Фон с движущимися простыми фигурами. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,215
Html Gram

03 Dec, 15:01

Flippable CSS3 Business Card

Анимация карточки с контактами специалиста на обратной стороне. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,352
Html Gram

03 Dec, 07:00

Gradient Background Animation

Анимированный фон с плавной сменой оттенков градиента. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,477
Html Gram

02 Dec, 15:02

Mobile Menu Animation

Плавное появление и исчезание полноэкранного меню по нажатию на кнопку внизу экрана. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,573
Html Gram

02 Dec, 07:02

Minimal Search Form

Строка поиска, которая раскрывается при нажатии на кнопку. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,633
Html Gram

01 Dec, 15:01

Pulse button

Пульсирующая кнопка. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,632
Html Gram

01 Dec, 07:01

Navicon Transformicons

6 вариантов анимации бургер-кнопок. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,765
Html Gram

30 Nov, 15:02

Parallax Flipping Cards

Вращение карточки при наведении курсора с эффектом 3D объема и parallax эффектом для надписи. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,897
Html Gram

30 Nov, 07:00

CSS 3 Loading

Простая и ненавязчивая анимация для ожидания загрузки. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,780
Html Gram

29 Nov, 15:02

Image Hover

Ещё один вариант анимации для карточки с изображением и описанием, которое появляется при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,864
Html Gram

29 Nov, 07:01

Atom Button

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

⤷ Забрать код

@HtmlGram1 | #css
1,730
Html Gram

28 Nov, 15:01

Gradient Button Hover

Множество эффектов наведения курсора для кнопок с разным градиентом. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,858
Html Gram

28 Nov, 07:01

Checkboxes and radios (dark/light)

Плавное перекрашивание кнопок-переключателей, выполненных в одном стиле с использованием градиента. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,294
Html Gram

27 Nov, 15:01

Social Share

Эффект для кнопок соц. сетей при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,391
Html Gram

27 Nov, 07:00

Card Hover Interactions

Описание и кнопка с действием на каждой карточке при наведении. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,491
Html Gram

26 Nov, 15:02

Buttons css hover effect

5 вариантов hover-эффекта для кнопок или ссылок. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,549
Html Gram

26 Nov, 08:11

Image Hover

Эффект наведения на карточки с появлением кнопки "Подробнее". Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,501
Html Gram

25 Nov, 15:01

Text input love

8 эффектов для надписи перед текстовым полем. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,552
Html Gram

25 Nov, 07:01

Link hover

Более 10 hover-эффектов для ссылок или кнопок. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,647
Html Gram

24 Nov, 16:23

FunAnimatedCard

Появление дополнительной информации при наведении курсора мыши на карточку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,778
Html Gram

24 Nov, 07:25

Gradient BG Animation

Пока пользователь изучает информацию на сайте, фон сменяется на все цвета радуги. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,798
Html Gram

23 Nov, 15:01

Flying Dots

Фон с движущимися светящимися частицами. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,788
Html Gram

23 Nov, 07:01

UI Profile Card

Эффект для карточки с контактами человека при наведении курсора мыши. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,880
Html Gram

22 Nov, 11:41

Background animation

Плавная смена градиента. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,994
Html Gram

22 Nov, 07:01

Hamberger Menu Animation

Нестандартная анимация для бургер-кнопки, которая открывает меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,873
Html Gram

21 Nov, 15:02

Hamburger Menu Animation

6 вариантов анимации для кнопки, которая открывает меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,986
Html Gram

21 Nov, 09:01

Search Icon Input Animation

Поле поиска, которое плавно разворачивается при нажатии на кнопку с иконкой. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,956
Html Gram

21 Nov, 07:00

Найти работу фронтендера трудно? Ты просто не там ищешь!

@job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно

Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻
367
Html Gram

20 Nov, 14:35

CSS Menu Transition

Полноэкранное мобильное меню с поочередным появлением пунктов. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,969
Html Gram

20 Nov, 11:00

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!

🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний.

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

💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.

Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉
958
Html Gram

20 Nov, 07:00

custom checkboxes switch in pure CSS

Несколько вариантов для плавного переключения радио-кнопок и флажков. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,795
Html Gram

19 Nov, 13:31

Skating bunny

Залипательная игра. Реализовано с помощью SCSS и JS.

⤷ Забрать код

@HtmlGram1 | #scss #JavaScript
1,284
Html Gram

19 Nov, 10:30

⚡️Всероссийский Хакатон ФИЦ 2024

🚀Попробуйте себя в одном из предложенных кейсов:
- Разработка алгоритма трекинга людей в видеопотоке с нескольких камер
- Цифровая карта подземных коммуникаций с использованием Cesium
- Симуляция записи в расписание
- Цифровой сервис для ведения реестра зеленых насаждений города Москвы
- Предсказание необходимого количества средств досмотра
- Система контроля и управления доступом
- Семантический делитель текстов
- Разработка сервиса печати этикеток для производителей одежды
И др. кейсы смотрите на сайте: https://фиц2024.рф/hackathon 

Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.

🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 26 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря

Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon

#реклама
О рекламодателе
1,172
Html Gram

19 Nov, 08:25

Hamburger menu transition

Немного измененная анимация для кнопки, открывающей меню. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,250
Html Gram

18 Nov, 12:16

Login Form with floating placeholder and light button

Форма с эффектами для полей и анимацией для кнопки "Отправить". Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,337
Html Gram

18 Nov, 10:15

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.
1,318
Html Gram

18 Nov, 07:01

Soft hover card

Легкая тень, которая появляется при наведении на карточку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,399
Html Gram

17 Nov, 15:00

Magic Card

Светящаяся карточка с эффектом при наведении. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,499
Html Gram

17 Nov, 07:00

CSS glowing icons

Светящиеся иконки соц. сетей. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,462
Html Gram

16 Nov, 15:00

Burger menu animation

Анимированные карточки с hover-эффектом при просмотре. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,492
Html Gram

16 Nov, 07:00

Product Card UI Design

Анимация карточки товара при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,510
Html Gram

15 Nov, 13:57

Signature animation

Генерация подписи на основании введенного текста. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,654
Html Gram

15 Nov, 11:55

В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻

Что такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?

Обо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
1,566
Html Gram

15 Nov, 10:01

Card Hover effect

Описание в карточке, которое появляется при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,460
Html Gram

15 Nov, 08:00

😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно!

Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css.

Кстати, мы детально анализируем материалы по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым!

Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS
1,486
Html Gram

15 Nov, 07:01

Links / Buttons hover animations

Подборка эффектов для ссылок при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,456
Html Gram

14 Nov, 12:01

Untitled

4 варианта hover эффектов для ссылок или кнопок. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,551
Html Gram

11 Nov, 15:01

The Team - 001

Эффект объемных карточек при наведении на них курсора. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
559
Html Gram

11 Nov, 07:01

CSS Animations: Obvious CTA Buttons

Анимация, которая позволит привлечь внимание пользователя к кнопке с действием. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
850
Html Gram

10 Nov, 15:02

Social Button Share Animation

Эффект появления списка соц. сетей для кнопки "Поделиться". Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,003
Html Gram

10 Nov, 07:01

Button Animation

Плавное заполнение цветом для кнопки при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,155
Html Gram

09 Nov, 15:01

Social Card + 3D Hover Effect

3D-эффект при наведении на карточку с информацией о человеке и соц. сетями. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,176
Html Gram

09 Nov, 07:01

Background Animation Galaxy

Фон для сайта с эффектом движения сквозь звездное пространство. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,276
Html Gram

08 Nov, 12:16

Link Hover Interaction | SplittingJS

Эффектная анимация при наведении на ссылки с текстом. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,220
Html Gram

08 Nov, 07:01

Off-canvas Menu Animation

Эффект открытия бокового меню с поочередным появлением пунктов. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,329
Html Gram

07 Nov, 15:01

Preloader SVG animation

Тематический вариант анимации ожидания для какого-то действия на сайте. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,486
Html Gram

07 Nov, 07:02

Morphing On/Off Button

Постепенное преобразование кнопки при ее включении и выключении. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,423
Html Gram

06 Nov, 15:01

World Places (CSS 3d hover)

3D-эффект наведения курсора на карточки с изображением и кратким описанием. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,599
Html Gram

06 Nov, 07:02

Hamburger Menu Interaction

Очередной способ анимировать кнопку для открытия мобильного меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,574
Html Gram

05 Nov, 15:32

Menu

Плавное появление бокового меню при нажатии на бургер-кнопку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,622
Html Gram

05 Nov, 07:01

Аnimated Form

Эффект для переключения между формами входа и регистрации. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,729
Html Gram

04 Nov, 13:30

Wall of text

Плавно движущиеся строки с текстом в качестве фона для вашего сайта. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,852
Html Gram

04 Nov, 07:02

cool hover card

Эффект наведения на карточку с плавным размытием изображения. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,617
Html Gram

03 Nov, 15:00

Menu Hover Html/SCSS

Эффект наведения на пункты меню с постепенным закрашиванием текста по горизонтали. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,736
Html Gram

03 Nov, 07:01

Rotating Circles Preloader - SCSS

Анимация с вращением частиц для ожидания загрузки страницы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,785
Html Gram

02 Nov, 15:01

Hamburger Icon Animation

6 вариантов анимации для кнопки, которая открывает и закрывает мобильное меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,801
Html Gram

02 Nov, 07:01

Smooth Pulse Button

Пульсирующая кнопка для воспроизведения видео. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,827
Html Gram

28 Oct, 15:01

button hover animation

Заливка в виде волны для кнопки при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
552
Html Gram

28 Oct, 07:00

pure css menu animation

Перемещение точки над каждой вкладкой меню при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
853
Html Gram

27 Oct, 15:01

Pill styled radio buttons | Fully scaleable

Эффект нажатия на переключатели в виде расширения границы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,040
Html Gram

27 Oct, 07:59

Dot Clock Preloader

Стрелка часов, которая мусорит точками и убирает за собой. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,175
Html Gram

26 Oct, 15:02

Snacks? I don't know

Последовательная смена одной фразы в тексте. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,136
Html Gram

26 Oct, 07:01

CSS Loader animation

Ожидание загрузки в виде мерцающего кольца. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,218
Html Gram

25 Oct, 15:16

404 Swing with

Необычная реализация страницы 404. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,218
Html Gram

25 Oct, 13:15

Ты IT-специалист, задумываешься о релокации, но боишься не найти работу?

На канале «Цифровые кочевники» 🧳 рассказываем, как путешествовать и работать, делимся полезными ссылками и опытом тех, кто уже релоцировался.

А ещё мониторим вакансии в разных странах, рассказываем о визах и помогаем с бытовыми вопросами.

Подписывайся! 👉@digitalnomadsdv 👈
1,374
Html Gram

25 Oct, 12:25

Desktop Menu Animation

Появление боковых вкладок меню при нажатии на бургер-кнопку Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,334
Html Gram

25 Oct, 10:25

Ищем автора эталонного кода! 💎

Если вы уверены, что вашему коду подходит звание «Эталонный», а вам — звание «Автор самого красивого кода», то приглашаем принять участие в Конкурсе красоты кода 2.0 и выиграть классные призы от Сбера: iPhone 16 и умную колонку SberBoom.

Опытные эксперты определят победителей в пяти категориях: Backend, Frontend, DevOps, AI и Mobile, — а награждение пройдёт на ключевом IT-событии HighLoad в Москве, 2 и 3 декабря.

Больше 40 участников прошлого конкурса стали частью команды Сбера. Возможно, следующим станете именно вы — переходите по ссылке и изучайте подробности!
663
Html Gram

25 Oct, 07:01

Moving clouds background animation

Легкое движение облаков в качестве фона для вашего сайта. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,322
Html Gram

24 Oct, 13:01

Linear-gradient button animation

Градиентный контур у кнопки, который переливается при наведении курсора мыши. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,433
Html Gram

24 Oct, 11:00

Готовы получить уникальные знания, которые не найдёте даже на Stackoverflow?

Приглашаем вас на бесплатную IT-конференцию TerraTech MeetUp 31 октября! 

Что вас ждёт:

— Презентации от ведущих специалистов на актуальные темы;
— Последние тренды из мира IT;
— Полезные знакомства;
— Ответы на все интересующие вопросы!

Посетить мероприятие может каждый — от начинающего разработчика до опытного специалиста, и абсолютно бесплатно!

Ждём вас 31 октября 2024 года! Сбор гостей начнется в 19:00 по адресу: Варшавское шоссе, 33с12, Megapolis Hall

Регистрация по ссылке

erid: LjN8Kc25j
1,336
Html Gram

24 Oct, 07:01

Search Input Animation

Выезжающая строка поиска при нажатии на лупу. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,473
Html Gram

23 Oct, 13:21

Gooey Preloader

Ожидание загрузки в виде маленьких капель, вытекающих из центральной влево и вправо. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,588
Html Gram

23 Oct, 10:20

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!

🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний.

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

💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.

Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉
1,516
Html Gram

23 Oct, 07:01

Menu animation

4 варианта анимации при наведении на пункт меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,546
Html Gram

22 Oct, 17:06

Converting a checkbox when running tasks

Преобразование флажка при выполнении задач по аналогии с заметками. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,624
Html Gram

22 Oct, 15:05

👨‍💻 Изучай фронтенд по мини-гайдам!

Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript

➡️ Подписывайся на WebTaverna 😮
1,600
Html Gram

22 Oct, 07:01

Card: On hover blur effect

Эффект наведения на карточки с затемнением остальных. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,335
Html Gram

21 Oct, 14:01

Particles Background Animation Effects

Хаотичное движение цветных частиц в качестве фона сайта или приложения. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,490
Html Gram

21 Oct, 06:59

Futuristic 3D Hover Effect

3D эффект наведения с подсвечиванием каждой вкладки. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,570
Html Gram

20 Oct, 16:00

Cube Effect Slider

Слайдер с кубическим эффектом. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,521
Html Gram

20 Oct, 13:45

Ребят, тут есть те, кто работает с Фигмой?

Нашли для вас топовую подборку:

Макеты для верстки — актуальный источник нетипичных макетов в Figma. Фундамент любого портфолио.

Figma — канал, где ребята делятся добром, за которое на курсах обычно дерут три шкуры.
674
Html Gram

20 Oct, 06:53

Hamburger Menu Animation

Анимация открытия меню на весь экран. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
847
Html Gram

19 Oct, 15:01

css preloader

Ожидание загрузки в виде прыгающих частиц, которые меняют свой цвет при столкновении. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,057
Html Gram

19 Oct, 07:00

hover test

Эффект наведения на карточки с появлением текстового заголовка. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,166
Html Gram

18 Oct, 17:01

Simple form input animation upwards

Разворачивание поля для ввода текста, когда пользователь на него нажимает. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,263
Html Gram

18 Oct, 07:02

Menu animation

9 различных эффектов при наведении на бургер-кнопку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,260
Html Gram

17 Oct, 15:01

Light Ball Preloader

Прелоадер, напоминающий солнечное затмение. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,316
Html Gram

17 Oct, 07:01

Hover Effects [Links]

8 различных эффектов изменения контура при наведении на ссылку. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,405
Html Gram

16 Oct, 17:06

Menu Animation

Изменение цвета текста при наведении на заголовки меню. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,539
Html Gram

16 Oct, 07:02

Radio Button Dot-Slider (Pure CSS)

Форма переключателя с возможностью выбора одного из предложенных вариантов. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,497
Html Gram

15 Oct, 17:11

Animated Radio button & checkboxes

Анимация для флажков в форме с выбором нескольких вариантов ответа. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,662
Html Gram

15 Oct, 09:01

SVG background animation

Медленный круговорот звёздного неба в качестве фона для вашего сайта. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,756
Html Gram

14 Oct, 15:01

Glowy menu animation

Светящаяся анимация меню при наведении на кнопку. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,798
Html Gram

14 Oct, 07:00

Circular Floating Menu Animation

Появление опций для связи с человеком при нажатии на кнопку. Реализовано с помощью CSS и JS.

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
1,842
Html Gram

13 Oct, 18:11

hover card

Карточка с анимацией сразу нескольких ее частей при наведении. Реализовано с помощью SCSS.

⤷ Забрать код

@HtmlGram1 | #scss
1,857
Html Gram

13 Oct, 07:00

Hamburger toggle menu

Интересный вариант меню для вашей страницы. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,993
Html Gram

12 Oct, 15:00

Search Input Animation

Появление и сворачивание поля для ввода текста при нажатии на лупу. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
2,020
Html Gram

12 Oct, 07:02

Multiple Shadows

Наведение на кнопку с эффектом 3D-появления. Реализовано с помощью CSS.

⤷ Забрать код

@HtmlGram1 | #css
1,962
Html Gram

11 Oct, 12:50

show password input animation

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

⤷ Забрать код

@HtmlGram1 | #css #JavaScript
2,076

2025 All Right Reserved

Disclaimer: The content displayed on this website is solely provided by the respective Telegram channels. We hold no ownership or responsibility for the content shared by these channels.