Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Улыбнитесь: CSS-битмапы и CSS3-видео

Следить
Главная
17:59
02 дек
#
Разработчик написал:

Пару месяцев назад на сайте HtmlBook.ru был проведён мини-конкурс "Хэллоуин", на который необходимо было представить художественное произведение на тему праздника, исполненное только с помощью html-разметки и css-правил, не задействуя фоновые картинки. Представленные на конкурс 20 работ, прямо сказать, порадовали. Все они относятся к отдельному направлению CSS-графики: построение задуманной картинки послойно размещёнными стандартными html-контейнерами (как правило тегами <div>), соответствующим образом стилизованными и спозиционированными в нужные места на экране-холсте.

Хочу показать примеры другого направления CSS-графики - imperacms.com/examples/css-image/index.php - воспроизведение растра исходной картинки последовательно размещёнными стандартными html-контейнерами (как правило тегами <hr> для уменьшения размера генерируемой разметки) и стилизованными в размер 1х1 px плюс окрашенными в цвета пикселей, которым соответствует каждый контейнер. В простейшем случае это последовательное размещение одноточечных контейнеров линия за линией, в другом, более сложном случае - вычисление множества разноокрашенных и разноразмерных полигонов с послойным наложением и позиционированием до приближения к оригиналу.

По указанной выше ссылке демонстрируются такие примеры:

  • капча, отрисованная не картинкой, а HTML-CSS-разметкой;
  • картинка, загруженная из файла и преобразованная в HTML-CSS-разметку;
  • "видео" - это битмап на HTML-CSS-разметке и CSS3-анимации пикселей.

Написание ответа

Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид сообщения.


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.