Flickering Light Text Effect

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

⤷ Забрать код

@HtmlGram1 | #css

Modal Mitosis

Растягиваемое расширяющееся поле со скрытым контентом, реализованное на чистом CSS с помощью фильтра goo для SVG и checkbox toggle.

⤷ Забрать код

@HtmlGram1 | #css

Data Dots

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

⤷ Забрать код

@HtmlGram1 | #css #javascript

Spotlight

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

⤷ Забрать код

@HtmlGram1 | #css

Circle Packed Particles

Анимация построения частиц-блёсток в буквы, реализованная с помощью GSAP3 и Pixi.js.

⤷ Забрать код

@HtmlGram1 | #gsap #pixijs

50 Shades of Hue - CPC Monochromatic

Генератор монохромной цветовой палитры, который генерирует до 50 оттенков. Реализован с помощью React и Prism.js.

⤷ Забрать код

@HtmlGram1 | #react #prismjs

Circle Swap Photo Gallery

Фотогалерея с красивой анимацией замены фотографий, реализованная с помощью React и GSAP.

⤷ Забрать код

@HtmlGram1 | #gsap #react

Doggie Screensaver

Плавающая анимация фотогалереи, реализованная на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Color swappy

Анимация замены цвета, реализованная с помощью GSAP.

⤷ Забрать код

@HtmlGram1 | #gsap

Contrast

Один из вариантов реализации замены цвета текста в зависимости от цвета фона на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Tic-Tac-Toe

Игра "Крестики-нолики". Вы играете против компьютера. Игра реализована на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Folded Paper Login Form

Форма входа в систему в виде сложенной бумаги, реализованная на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Sliding Icon Menu

Меню с анимацией скольжения между пунктами-иконками. Реализован с помощью CSS и JavaScript.

⤷ Забрать код

@HtmlGram1 | #css #javascript

Player/User Cards

Карточки игроков / пользователей с просмотром дополнительной информации при наведении курсора мыши. Реализованы на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Directionally Aware Controls

Эффект при наведении на кнопку с направленными элементами управления, реализованный на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Calculator

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

⤷ Забрать код

@HtmlGram1 | #vue

Profile Card UI

Карточка профиля.

⤷ Забрать код

@HtmlGram1 | #UI

Content reveal cards

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

⤷ Забрать код

@HtmlGram1 | #css #html

Hover Effect for Headers

8 примеров эффекта наведения для заголовков, реализованные на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Bold Hover Animations

10 стилей анимации при наведении на текст, реализованные с помощью Splitting.js.

⤷ Забрать код

@HtmlGram1 | #splittingjs

Timeline Carousel

Карусель с постерами и трейлерами фильмов, представленные в хронологическом порядке. Карусель реализована с помощью Vue.js и Embla Carousel.

⤷ Забрать код

@HtmlGram1 | #vue #EmblaCarousel