HTML и CSS

Как сделать круговую диаграмму на чистом CSS

В этом посте мы рассмотрим как создать круговую диаграмму на чистом CSS, без использования JavaScript и сторонних библиотек. Для начала мы создадим разметку для нашей диаграммы: index.html Дальше мы пропишем для нее стили: style.css width: 400px;height: 400px; Задаем размеры 400px …

Анимированный Skills Bar на HTML и CSS

Всем привет. В этой статье мы научимся делать анимированную панель навыков (Skills Bar), используя только HTML и CSS Посмотреть результат Содержание файлов: index.html Style.css Видео с пошаговой инструкцией Вот мы и научились делать анимированный SkillsBar. Такой интересный элемент можно использовать …

Анимация спрайта на CSS на примере персонажа

Всем привет! В этом уроке мы научимся делать анимацию спрайта на CSS. С помощью этой технологии мы сможем внедрить любую анимацию на сайте. Посмотреть результат Содержание файлов: index.html style.css Изображение Скачать изображение Видео с пошаговой инструкцией Дорогие друзья если Вам …

3D Фигура (бутылка) из текста на CSS и HTML с анимацией

Всем привет! Это практический урок по создании фигуры из текста на HTML и CSS. На примере бутылки мы разберем, как создаются фигуры из текста и добавим к ней немного анимации на CSS. Данный урок позволит понять, как создать фигуру из …

3D-эффект переворачивания карточки на HTML и CSS

Всем привет. В этом посте я расскажу как сделать крутую 3D-анимацию переворота карточки при наведении. Использоваться будет только HTML и CSS. Содержание файлов: index.html style.css Исходные изображения: Рабочий результат See the Pen WNrGxoO by AntonAniskovich (@AntonAniskovich) on CodePen. Видео с …

Машинка едет по ночному городу на CSS

Всем привет. В этой статье я расскажу, как сделать анимацию на сайт на примере едущей машинки по ночному городу. Используя только HTML и CSS. Содержание файлов: index.html style.css Исходные изображения: Видео с пошаговой инструкцией: Дорогие друзья если Вам понравилась статья …

Видео фон на сайт с эффектом затухания при скролле

Всем привет! В этой статье мы научимся делать видео на весь экран. Его можно использовать как фон для хедара сайта, так и применять для оформления любого другого блока. Думаю, каждый для себя найдет полученным знаниям применение. Плюс к этому мы …

Разноцветный текст с анимацией при наведении на CSS

В этом уроке мы создадим разноцветный текст в виде радуги на CSS. И добавим к нему анимации при наведении. Содержание файлов: index.html style.css Разноцветный текст на CSS с анимацией. Рабочий результат. See the Pen ExjGrPL by AntonAniskovich (@AntonAniskovich) on CodePen. …

Выдвигающийся текст на CSS. Анимация на CSS #1

Привет! Меня по прежнему зовут Антон. С этого поста я начинаю рубрику: «Анимация на CSS». В ней я буду делиться с тобой различными эффектами, используя только HTML и CSS. Этими приемами можно пользоваться в своих проектах и сделать их более …