Изображения SVG (Scalable Vector Graphics, масштабируемая векторная графика) состоят из окружностей, прямоугольников и контуров, записанных в формате XML. В SVG вы можете использовать сплошные заливки, градиенты и огромное число фильтров — хотя не все браузеры поддерживают все типы фильтров. Вы можете включать текст, а также изображения, кроме того, вы можете копировать и клонировать ваш SVG столько раз, сколько вам нужно. Чаще всего мы используем SVG в графических редакторах для построения графиков, создания иллюстраций или анимации. Однако мы можем использовать SVG и в дизайне сайтов — это удивительно универсальный формат и приятная возможность для создания уникального веб-дизайна. В этой вводной статье я расскажу о некоторых важных моментах при работе с SVG, в том числе о поддержке браузерами и доступности. Читайте II часть, если хотите узнать, как отыскать файлы SVG в Интернете и использовать их в своих целях, а также как создать собственные изображения SVG и добавить их на страницы своего сайта. Читать далее »
Рубрики с меткой ‘SVG’
SVG или Canvas? Сложности выбора
Новые веб-технологии все шире используются браузерами, появляются решения, доступные для многих браузеров, например, Raphaёl для поддержки SVG, и ExCanvas для Canvas. Даже Internet Explorer начал понимать SVG — а какую поддержку мы можем увидеть в будущем! Наличие нескольких похожих технологий создают проблемы выбора подходящего решения.
HTML5 Canvas и SVG — веб-технологии, которые позволяют использовать высококачественную графику в браузерах, но фундаментально они в корне отличаются друг от друга. В этой статье мы рассмотрим эти отличия и вопросы эффективного использования SVG и Canvas.
Scalable Vector Graphics (SVG) Читать далее »
Урок по CSS маскам – создаем вращающуюся галерею
Я попробовал много вещей, которые вы можете сделать с
Я связывал маски со свойствами transform и transition и добился крутого эффекта для галереи изображений. Я сделал
Маскирование текста по стандарту
Я очень люблю -webkit-mask-image
, причем сообщается, что это экспериментальное свойство CSS. И даже предлагается использовать префиксы -moz-, -o- и -ms- для свойства, которое отсутствует в какой-либо спецификации и соответственно вряд ли вообще когда-нибудь будет поддерживаться каким-либо не WebKit браузером. Тем самым они вводят своих читателей в заблуждение. Не так давно
Знакомство с Canvas 2D API
Если элемент <video> – это образцовый представитель HTML5, то <canvas> – это уж точно бунтарь. Элемент <canvas> является (до сих пор)
Элемент <canvas> обладает массой возможностей, такими как: Читать далее »