Идею создания снежинок использованную в этом посте я позаимствовал из детского сада. Там складывают лист бумаги в несколько раз, вырезают ножницами дырочки и после разворачивания получают снежинку. В данном случае нам потребуется нарисовать одну шестую и потом её копии повернуть на 60 градусов 5 раз.
Такие снежинки можно использовать в новогодних поздравлениях. Для затравки я сделал вот такую открытку.
Представляем Вам проект belrr, позволяющей по новому взглянуть на прогноз погоды.
В этой статье кратко расскажем о ключевых этапах разработки.
Читать полностью »
День добрый,
На момент написания поста существуют тысяча и один способ создания тултипов. Через css3, используя js и jquery, или к примеру анимированные тултипы. А вот вообще генератор этих прямоугольников со стрелочками через всевозможные псевдо элементы. На ваше обозрение хотелось бы предложить ещё один подход к созданию тултипов, но уже в SVG. Итак с новыми извращениями мыслями приступаем к делу.
Читать полностью »
Данная статья является переводом этой статьи.
Надеюсь мой перевод окажется не слишком топорным, а материал интересным.
Сегодня векторные дисплеи — это скорее старые диковинки, нежели средство отображения информации, тем не менее их применение в аркадных автоматах и радарных системах придает им определенный шарм.
В отличии от обыкновенных растровых дисплеев, где луч каждый раз проходит слева-направо и сверху-вниз для отрисовки каждой строки, в векторных дисплеях луч двигается по линиях, определяющих изображение.
Большинство двойных осциллографов имеют режим XY, в которых сигнал, используемый для развертки изображения по времени, заменяется входным сигналом, тем самым позволяя управлять положением луча в двух плоскостях. Использование ШИМ-а с фильтром низких частот может быть эффективно для управления яркостью светодиода, но для того, что бы рисовать сложные фигуры необходим более быстрый способ. Наиболее простым способом является использование ЦАП (цифро-аналогового преобразователя) по схеме R-2R.
Если вам интересно узнать больше о создании векторного дисплея или о том как рисовать на экране осциллографа- добро пожаловать под кат.
Читать полностью »
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.
Предыдущие топики о SVG:
Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 65% пользователей уже могут увидеть transitions в действии.
Демо Код на jsfiddle
Так как я люблю CSS, решил сделать интерактивных зверюшек на чистом CSS, без каких-либо скриптов.
Благодаря псевдоклассу :checked, можно реализовать действие по клику, что обычно приписывается на js. А также используя уже привычные псевдоклассы :hover и :active, я оживил зверюшек:
.pavepy .body .hand.left,
.pavepy:hover .body .hand.right,
input:checked + .pavepy .body .hand.right,
input:checked + .pavepy:hover .body .hand.left,
input:checked + .pavepy.fox .head .ear.right {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Продолжаем изучать SVG-графику, на этот раз коснемся стилизации.
Первая часть: Знакомство с SVG-графикой.
Демонстрация примеров / Скачать исходники
Изменение внешнего вида SVG-элементов аналогично HTML, с некоторыми особенностями. Например фон назначается свойством fill, а не background-color, граница — stroke вместо border. Если вы работали с Adobe Illustrator, подобная терминология будет знакома.
Читать полностью »
Этот пост — первый из серии статей о SVG-графике (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.
Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.
Демонстрация всех примеров / Скачать исходники / Официальная документацияЧитать полностью »
Векторное изображение на рассеянных кривых
Долгое время возможности векторной графики были ограничены только линейными и круговыми градиентами, в результате чего можно было создавать лишь «плоские» изображения с определённым набором фигур. Настоящим прорывом стали смешанные градиенты (gradient mesh), которые впервые сделали векторную графику фотореалистичной. Группа французских исследователей под руководством Александрины Орзан (Alexandrina Orzan) из Технологического института в Гренобле в 2008 году сделала следующий шаг на пути развития векторной графики. Они разработали инструменты для генерации векторной графики на рассеянных кривых (diffusion curves), в том числе программу для автоматической конвертации растровых изображений в векторные.
Читать полностью »
Набор значков социальных сервисов в формате шрифта и россыпи SVG-файлов.
Сначала думал просто добавить в Графический фреймворк. Набор иконок социальных сервисов значок англоязычного VK.com и упаковать в шрифт для следующего проекта, но тут понеслось.
