CSS-битмапы и CSS3-видео
Пару месяцев назад на сайте HtmlBook.ru был проведён мини-конкурс «Хэллоуин», на который необходимо было представить художественное произведение на тему праздника, исполненное только с помощью html-разметки и css-правил, не задействуя фоновые картинки. Представленные на конкурс 20 работ, прямо сказать, порадовали. Все они относятся к отдельному направлению CSS-графики: построение задуманной картинки послойно размещёнными стандартными html-контейнерами (как правило тегами), соответствующим образом стилизованными и спозиционированными в нужные места на экране-холсте.
Хочу показать примеры другого направления CSS-графики — imperacms.ru/examples/css-image/index.php — воспроизведение растра исходной картинки последовательно размещёнными стандартными html-контейнерами (как правило тегами для уменьшения размера генерируемой разметки) и стилизованными в размер 1×1 px плюс окрашенными в цвета пикселей, которым соответствует каждый контейнер. В простейшем случае это последовательное размещение одноточечных контейнеров линия за линией, в другом, более сложном случае — вычисление множества разноокрашенных и разноразмерных полигонов с послойным наложением и позиционированием до приближения к оригиналу.По указанной выше ссылке демонстрируются такие примеры: капча, отрисованная не картинкой, а HTML-CSS-разметкой;
картинка, загруженная из файла и преобразованная в HTML-CSS-разметку;
«видео» — это битмап на HTML-CSS-разметке и CSS3-анимации пикселей.
Читать дальше →
