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

Password Input Light

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

⤷ Забрать код

@HtmlGram1 | #css #javascript

Custom Cursor

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

⤷ Забрать код

@HtmlGram1 | #css #javascript

Responsive Grid

Адаптивная сетка без медиа-запросов на чистом CSS.

⤷ Забрать код

@HtmlGram1 | #css

Mask Text / CSS Clip

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

⤷ Забрать код

@HtmlGram1 | #gsap

Horrible UX: Bad Buttons

Неотлипающаяся кнопка "Subscribe" и кнопка "Unsubscribe", которую невозможно нажать, реализованные с помощью React.

⤷ Забрать код

@HtmlGram1 | #react

Scrolly Path

Причудливая анимация пути при прокрутке страницы, реализованная с помощью SVG, GSAP и ScrollTrigger.js.

⤷ Забрать код

@HtmlGram1 | #ScrollTrigger #svg #gsap

Cinematic Animation

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

⤷ Забрать код

@HtmlGram1 | #css

Bouncing Text Animation

Анимация отскока текста, реализованное с помощью CSS и Splitting.js.

⤷ Забрать код

@HtmlGram1 | #css #splittingjs

Vue Slider UI Interaction

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

⤷ Забрать код

@HtmlGram1 | #vibrantjs #vue