Доброго времени суток. Представляю вашему вниманию небольшой анонс новой библиотеки CSS анимации.
Причиной для создания этой библиотеки послужило накопление некоторых полуготовых решений в области CSS анимации. Потом просто стало интересно собрать все воедино, начали появляться идеи для новых видов анимации и желание реализовать все это на чистом CSS.
Читать полностью »
Пару месяцев назад на сайте HtmlBook.ru был проведён мини-конкурс «Хэллоуин», на который необходимо было представить художественное произведение на тему праздника, исполненное только с помощью html-разметки и css-правил, не задействуя фоновые картинки. Представленные на конкурс 20 работ, прямо сказать, порадовали. Все они относятся к отдельному направлению CSS-графики: построение задуманной картинки послойно размещёнными стандартными html-контейнерами (как правило тегами <div>), соответствующим образом стилизованными и спозиционированными в нужные места на экране-холсте.
Хочу показать примеры другого направления CSS-графики — imperacms.ru/examples/css-image/index.php — воспроизведение растра исходной картинки последовательно размещёнными стандартными html-контейнерами (как правило тегами <hr> для уменьшения размера генерируемой разметки) и стилизованными в размер 1х1 px плюс окрашенными в цвета пикселей, которым соответствует каждый контейнер. В простейшем случае это последовательное размещение одноточечных контейнеров линия за линией, в другом, более сложном случае — вычисление множества разноокрашенных и разноразмерных полигонов с послойным наложением и позиционированием до приближения к оригиналу.
По указанной выше ссылке демонстрируются такие примеры:
Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.
Для начала собственно сам пример — на codepen.io или на cssdesk.сom
Предлагаю широкой общественности для тестов следующую страницу vsandy.16mb.com/hs3nplus1/
Наведя на Limitations слева, активируется css3, можно будет визуально оценить качества прорисовки наклоненных букв. По итогам моего тестирования, Опера справляется с этим тестом лучше остальных браузеров.
size of variable — стресс-тест максимальной длины переменной в Javascript
size of array — стресс-тест максимальной длины массива в Javascript
Тесты The 3n+1/direct
classics from 90-s
modern
fast
Chrome killer
покажут быстродействие и стабильность работы Javascript с массивами и хэшами. Последний тест легко доводил предыдущие версии хрома до падения.
Всё чаще среди веб-разработчиков поднимается тема возможностей CSS анимаций (transition/animation), практически на каждой конференции по клиентской разработке можно услышать о потрясающих преимуществах новой технологии.
Производительность и гибкость CSS анимаций позволяет творить удивительные вещи, но можно ли уже использовать эти новые возможности в силу их нестабильности и незрелости на реальных больших проектах?
В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать полностью »
Захотелось моей половинке анимированное облако тегов в ЖЖ. Казалось бы, в сети полным-полно вариаций на эту тему: крутящихся, интерактивных, выбирай любое. Но всё это богатство либо на javascript, либо на flash. И прикрутить это к журналу нельзя (стандартный аккаунт, про платные не в курсе).
Нужно было вращающееся облако тегов, написанное на чистом css3. Сразу оговорюсь, решить задачу удалось лишь частично. Попытки что-то лучшее найти не увенчались успехом, в свое время даже публиковал вопрос на Хабре.
Читать полностью »
.png "Немного огня на чистом CSS (Firefox)")
Зайдя на домашнюю страницу браузера Firefox about:home (автономная, в самом браузере), обнаружил там неплохую реализацию пылающего огня, сделанную на не очень тяжёлых анимированных спрайтах, под лицензией LGPL (по крайней мере, в стартовом about-home-Fx.js). Не каждый день встретишь качественный огонь на скриптах в браузере. При ближайшем рассмотрении оказалось, что это даже не скрипты, а целиком анимированный CSS. Небольшой скрипт используется только для старта и останова. Используя эту идею и формат, дизайнеры смогут создать свою реализацию огня, дыма или текущей воды.
Поиск по ключевым словам из кода в интернете результата не дал, поэтому, как и с машиной Тьюринга (Гитхаб), тут же возникло желание освободить скрипт и стили от оков случайности и таинственности. То есть, положить его в читаемом и рабочем виде в открытый стабильный источник. Иначе, закончится Олимпиада — и будут все шансы исчезнуть ему из поля зрения. И вот результат:
github.com/spmbt/flame-animate-css-mozilla
Читать полностью »
Привет, читатель!
Я даже не знаю что хуже, что код для этого секундомера занимает ~ 1100 строк, или то что он работает только в половине браузеров.
Но если же тебе интересно как это работает, прошу под кат.
Во-первых о браузерах. Работает этот код, из нынешних: в FireFox, Safari и Chrome. На подходе такие гиганты браузеры как IE10 и супер секретная новая Opera.
Во-вторых, хочу сразу отметить, что я буду описывать именно процесс анимации, а не рисования на CSS3. На будущее план как раз наоборот сделать очень красивыйЧитать полностью »
