offset-path animation 3
https://codepen.io/yuanchuan/pen/ogNqKVR
https://codepen.io/yuanchuan/pen/ogNqKVR
codepen.io
offset-path animation 3
...
CSS Animation with offset-path
https://yuanchuan.dev/css-animation-with-offset-path
https://yuanchuan.dev/css-animation-with-offset-path
yuanchuan.dev
CSS Animation with offset-path
This is from last year when I tried to recreate Rach Smith's P5.js animation using CSS.
The animation seemed like it could be implemented in a breeze, but there's an illusion of simplicity.
The process of manually updating the positions and directions…
The animation seemed like it could be implemented in a breeze, but there's an illusion of simplicity.
The process of manually updating the positions and directions…
Forwarded from apexweb
Новость: Minecraft, реализованный только на HTML и CSS
Энтузиаст веб-разработки создал удивительную версию Minecraft, полностью работающую на чистом HTML и CSS, без использования JavaScript. Этот проект демонстрирует невероятные возможности современных веб-технологий, позволяя воссоздать культовую игру с помощью исключительно стилей и разметки.
Особенности проекта:
Полное отсутствие JavaScript: вся логика игры, включая взаимодействие с блоками и рендеринг мира, реализована с использованием CSS-анимаций, псевдоэлементов и других техник.
Оптимизация производительности: для наилучшего опыта разработчик рекомендует закрыть другие вкладки и программы, чтобы браузер мог сосредоточиться на рендеринге.
Доступность исходного кода: проект открыт для изучения и доступен на GitHub, CodePen и личном сайте автора — benjaminaster.com.
Эта работа подчеркивает, как далеко могут зайти возможности CSS в создании интерактивных приложений, и вдохновляет разработчиков экспериментировать с веб-технологиями. Ознакомьтесь с проектом, чтобы увидеть Minecraft с новой, минималистичной стороны!
https://benjaminaster.com/css-minecraft/
#css #minecraft #web
Энтузиаст веб-разработки создал удивительную версию Minecraft, полностью работающую на чистом HTML и CSS, без использования JavaScript. Этот проект демонстрирует невероятные возможности современных веб-технологий, позволяя воссоздать культовую игру с помощью исключительно стилей и разметки.
Особенности проекта:
Полное отсутствие JavaScript: вся логика игры, включая взаимодействие с блоками и рендеринг мира, реализована с использованием CSS-анимаций, псевдоэлементов и других техник.
Оптимизация производительности: для наилучшего опыта разработчик рекомендует закрыть другие вкладки и программы, чтобы браузер мог сосредоточиться на рендеринге.
Доступность исходного кода: проект открыт для изучения и доступен на GitHub, CodePen и личном сайте автора — benjaminaster.com.
Эта работа подчеркивает, как далеко могут зайти возможности CSS в создании интерактивных приложений, и вдохновляет разработчиков экспериментировать с веб-технологиями. Ознакомьтесь с проектом, чтобы увидеть Minecraft с новой, минималистичной стороны!
https://benjaminaster.com/css-minecraft/
#css #minecraft #web
Benjaminaster
CSS Minecraft
A Minecraft clone made with pure HTML & CSS – no JavaScript.
Google Webfonts Helper (https://gwfh.mranftl.com/fonts) — это удобный инструмент для веб-разработчиков, позволяющий легко скачивать и использовать шрифты Google Fonts для локального размещения на сайте. Он предоставляет файлы шрифтов в форматах eot, ttf, svg, woff и woff2, а также готовые CSS-сниппеты для их подключения через @font-face. Это идеальное решение для тех, кто хочет повысить скорость загрузки сайта и соответствовать требованиям GDPR, избегая отправки данных на серверы Google.
Преимущества сервиса включают простоту использования: достаточно выбрать нужный шрифт, указать стили и подмножества (например, латиница или кириллица), после чего скачать архив с файлами и CSS-кодом. Это экономит время и исключает необходимость ручного написания стилей. Локальное хранение шрифтов улучшает производительность сайта, снижает зависимость от внешних API и повышает конфиденциальность пользователей. Сервис полностью бесплатен и поддерживается сообществом, что делает его доступным для проектов любого масштаба.
Преимущества сервиса включают простоту использования: достаточно выбрать нужный шрифт, указать стили и подмножества (например, латиница или кириллица), после чего скачать архив с файлами и CSS-кодом. Это экономит время и исключает необходимость ручного написания стилей. Локальное хранение шрифтов улучшает производительность сайта, снижает зависимость от внешних API и повышает конфиденциальность пользователей. Сервис полностью бесплатен и поддерживается сообществом, что делает его доступным для проектов любого масштаба.
Mranftl
google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!