Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

Автор: admin от Сегодня, 09:10, посмотрело: 6

В очередной статье серии об SVG фильтрах Sara Soueidan покажет как сделать текст соответствующим текстуре поверхности с помощью примитива feDisplacementMap.



Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:



Эффекты фильтрации SVG




  • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

  • Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.

  • Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
  • Категория: Веб-разработка

     

    Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer

    Автор: admin от 15-02-2019, 19:45, посмотрело: 17

    Эта четвертая статья серии об SVG-фильтрах, в которой Sara Soueidan покажет вам, как использовать feComponentTransfer для создания эффекта двухтонового фильтра.



    Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer

    Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:



    Эффекты фильтрации SVG




  • Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

  • Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

  • Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

  • Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.



  • Категория: Веб-разработка

     

    Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

    Автор: admin от 12-02-2019, 14:40, посмотрело: 16

    В третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи этого мощного примитива SVG-фильтра.



    Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

    Категория: Веб-разработка

     

    Эффекты фильтров SVG: контурный текст при помощи feMorphology

    Автор: admin от 10-02-2019, 14:05, посмотрело: 19

    Во второй части серии об SVG-фильтрах Sara Soueidan знакомит нас с фильтром feMorphology и приводит несколько примеров его использования для создания интересных эффектов.



    Эффекты фильтров SVG: контурный текст при помощи feMorphology

    Категория: Веб-разработка

     

    10 советов по дизайну интерфейса

    Автор: admin от 23-07-2018, 18:45, посмотрело: 132

    Привет, Хабр! Представляю вашему вниманию перевод статьи "10 Tips to Designing Perfect Forms".



    10 советов по дизайну интерфейса


    Формы играют роль портала между пользователем и системой и часто являются основой страницы. Авторизация, регистрация, обновление статуса, ввод платежных данных или адреса доставки – управляются формами. Для онлайн-магазинов грамотно созданные формы играют значительную роль. По собственному опыту, хороший дизайн удваивает онлайн-продажи.



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

    Категория: Веб-разработка

     

    10 мелких ошибок в дизайне, которые мы допускаем до сих пор

    Автор: admin от 4-07-2018, 09:40, посмотрело: 126

    Поговорке «хороший дизайн — это дизайн, в котором все очевидно» сто лет в обед, и я уверен, что в каком-то виде она существовала и в прошлые века, применительно к хорошей еде, музыке, архитектуре, одежде, философии и вообще чему угодно.



    10 мелких ошибок в дизайне, которые мы допускаем до сих пор



    Мы забываем, что перемены в человеческом мышлении происходят крайне медленно, и те знания о поведении людей, которыми мы располагаем сейчас, не устареют еще лет пятьдесят или около того. Чтобы всем было проще, мы должны последовательно придерживаться нескольких принципов, которые будут напоминать нам, как делать продукты с хорошим дизайном. Неплохо бы напоминать себе об этих принципах хотя бы раз месяц, пока не начнем им жить и дышать.



    Возможности человеческого мозга не меняются из года в год, поэтому у результатов исследований поведения людей очень продолжительный срок годности. То, что было сложно для пользователя двадцать лет назад, остается сложным и сегодня.

    — Дж. Нильсен

    Категория: Веб-разработка

     

    Прокрутка и внимание (исследование 2018 года)

    Автор: admin от 7-06-2018, 19:15, посмотрело: 130

    Предлагаю вашему вниманию перевод статьи Therese Fessenden — Scrolling and Attention. Статья посвящена новому исследованию использования прокрутки при просмотре сайтов. Предыдущее исследование было проведено в 2010 году, перевод статьи по нему так же был выложен на Хабре.



    Прошу прощения за возможные неточности в переводе :)
    Резюме: Люди скроллят вертикально больше, чем раньше, но новые eye-tracking исследования показывают, что они всё ещё смотрят на «первый экран» больше, чем на остальные.



    Шаблоны человеческого поведения довольно стабильны, и гайдлайны юзабилити лишь изредка меняются по прошествии времени. Но один шаблон поведения, который всё же изменился с ранних времён веб-дизайна — это использование прокрутки. Изначально, люди редко скроллили вертикально; но в 1997 году, когда длинные страницы стали обычным явлением, они стали использовать прокрутку. Однако, пользователей всё ещё больше всего интересовала информация на «первом экране»; и даже в недавнем 2010 году наши eye-tracking исследования показали, что 80% времени пользователи тратят, просматривая именно «первый экран» страницы.



    Начиная с 2010 года, с приходом адаптивного дизайна и минимализма, дизайнеры всё чаще стали создавать длинные страницы с далеко расположенными друг от друга элементами, тем самым охватывая несколько экранов. Пришло время узнать, повлияли ли эти тенденции на поведение пользователей.

    Категория: Веб-разработка

     

    JSFiddle — новая версия

    Автор: admin от 5-06-2018, 19:40, посмотрело: 127

    Привет!



    Сегодня, я хочу поговорить об одном полезном инструменте — jsfiddle. Сейчас мало кто из разработчиков не знает о его существовании, поскольку jsfiddle очень прост в использовании и достаточно функционален. Но, возможно, кто-то из вас откроет для себя что-то новое, прочитав эту статью. Давайте знакомиться.

    jsFiddle — одна из самых популярных сред веб-разработки (работающая в веб-браузере), позволяющая редактировать и запускать код, написанный на HTML, javascript и CSS, который будет называться «фиддлом». Есть возможность использовать библиотеки для javascript, такие как jQuery.



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

    Категория: Веб-разработка

     

    Дизайн-система. Определение понятия

    Автор: admin от 21-03-2018, 21:50, посмотрело: 159

    Дизайн-система. Определение понятия


    В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.

    Категория: Программирование » Веб-разработка

     

    Использование CSS-сетки при проектировании пользовательских интерфейсов

    Автор: admin от 28-02-2018, 12:55, посмотрело: 229

    CSS-сетка — это отличный инструмент для создания макетов страниц контентно-ориентированных сайтов, включающих в себя большие фрагменты текста и другие материалы. Кроме того, эта технология имеет огромное значение и для великого множества традиционных пользовательских интерфейсов веб-приложений.



    Использование CSS-сетки при проектировании пользовательских интерфейсов


    В материале, перевод которого мы сегодня публикуем, Джош Мариначчи рассказывает о том, как использовать CSS-сетку для проектирования макетов страниц. Речь пойдёт о страницах, которые способны реагировать на воздействия пользователя и на изменение их содержимого, но при этом всегда ведут себя так, как от них ожидается, в частности — при прокрутке их содержимого.

    Категория: Программирование » Веб-разработка

     
    Назад Вперед