Html Gram
9.91K subscribers
13 photos
451 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
Sale label

4 примера реализации движущейся этикетки для рекламы распродажи на чистом CSS.

Забрать код

@HtmlGram1 | #css
14
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS Cyberpunk 2077 Buttons

Кнопки Cyberpunk 2077 на чистом css. Glitch-эффекты реализованы с помощью css-свойства clip-path.

Забрать код

@HtmlGram1 | #css
16
This media is not supported in your browser
VIEW IN TELEGRAM
Music player widget

Виджет музыкального плеера. Реализован с помощью HTML, CSS и JavaScript.

Забрать код

@HtmlGram1 | #HTML #CSS #JavaScript
11
This media is not supported in your browser
VIEW IN TELEGRAM
Confetti Button

Красивая реализация кнопки загрузки, при нажатии на которую вылетает конфетти. 

Забрать код

@HtmlGram1 | #css #javascript
14
This media is not supported in your browser
VIEW IN TELEGRAM
Tooltip Magic

Красивые всплывающие подсказки на чистом CSS.

Забрать код

@HtmlGram1 | #css
11
This media is not supported in your browser
VIEW IN TELEGRAM
Digital Alarm / Clock / StopWatch

Цифровые часы в современном стиле с будильником и секундомером. Часы реализованы с помощью jQuery.

Забрать код

@HtmlGram1 | #jquery
11
This media is not supported in your browser
VIEW IN TELEGRAM
Variable font animation

Анимация переменных шрифтов, реализованная с помощью CSS и JavaScript.

Забрать код

@HtmlGram1 | #javascript #css
14🦄1
This media is not supported in your browser
VIEW IN TELEGRAM
SVG Animation

SVG-анимация с распознаванием выбранного цвета, реализованная с помощью just-animate.js и TweenMax.js.

Забрать код

@HtmlGram1 | #tweenmaxjs #svg
12
This media is not supported in your browser
VIEW IN TELEGRAM
Dynamic CSS

Динамическое изменение цвета анимированных элементов при перемещении курсора мыши, реализованное на чистом CSS.

Забрать код

@HtmlGram1 | #css
9
This media is not supported in your browser
VIEW IN TELEGRAM
CSS radio buttons

Радиокнопки, реализованные на чистом CSS.

Забрать код

@HtmlGram1 | #css
11
This media is not supported in your browser
VIEW IN TELEGRAM
Extreme Hover

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

Забрать код

@HtmlGram1 | #css #javascript
17👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
The Impossible Lightbulb

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

Забрать код

@HtmlGram1 | #gsap
21
This media is not supported in your browser
VIEW IN TELEGRAM
Rolling Text

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

Забрать код

@HtmlGram1 | #css #javascript
13
This media is not supported in your browser
VIEW IN TELEGRAM
Glitch Effect on Hover

Воспроизведение глитч-эффекта при наведении на изображение, реализованное на чистом CSS.

Забрать код

@HtmlGram1 | #css
14
This media is not supported in your browser
VIEW IN TELEGRAM
Magnetic UI effect

Магнитный эффект ссылок при наведении, реализованный с помощью TweenMax.js.

Забрать код

@HtmlGram1 | #TweenMaxjs
18
This media is not supported in your browser
VIEW IN TELEGRAM
Star Wars Imperial Army's Product Slider

Адаптивный слайдер карточки продукта, реализованный с помощью Swiper.js.

Забрать код

@HtmlGram1 | #jquery
19
This media is not supported in your browser
VIEW IN TELEGRAM
Smoke Cloud

Анимация движения дымового облака, реализованная с помощью Three.js.

Забрать код

@HtmlGram1 | #threejs
10
This media is not supported in your browser
VIEW IN TELEGRAM
Loading Screen

Aнимированный прелоадер, реализованный на чистом CSS.

Забрать код

@HtmlGram1 | #css
7
This media is not supported in your browser
VIEW IN TELEGRAM
Responsive Blog Card Slider

Aдаптивная карточка со слайдером Swiper. Слайды можно прокручивать с помощью колеса мышки или нажатием на пагинацию.

Забрать код

@HtmlGram1 | #jquery
9
This media is not supported in your browser
VIEW IN TELEGRAM
Info Cards Concept

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

Забрать код

@HtmlGram1 | #css
12
This media is not supported in your browser
VIEW IN TELEGRAM
3D Rotator

Анимация вращения текста в 3D-пространстве, реализованная с помощью Three.js.

Забрать код

@HtmlGram1 | #threejs #3D
9