Pull to refresh
0
0
Алексей @Nudnyj

Предприниматель

Send message

Лучшие практики модальных окон. Компоненты дизайн системы

Reading time10 min
Views21K

Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн.
В этой статье я описываю работу модального окна для десктоп-версии сайтов.

Читать далее
Total votes 9: ↑8 and ↓1+7
Comments12

Звёздный рейтинг: решение с использованием SVG

Reading time9 min
Views16K

Для некоторых веб-сайтов и платформ в интернете важно предоставлять пользователям звёздный рейтинг для возможности выставить оценку материалу. Недавно мне довелось реализовать для одного проекта компонент звёздного рейтинга. Я решил использовать SVG и не пожалел об этом. В данной статье будет рассмотрен данный способ реализации и как он работает в разных сценариях

Читать далее
Total votes 15: ↑15 and ↓0+15
Comments5

Snoop Project невероятный инструмент интернет разведки, которого пользователи рунета ждали так долго — доступен

Reading time5 min
Views78K
image

На Github-e выложен OSINT-инструмент, заточенный (в том числе) для поиска %username по СНГ локации


【Статья обновлена】в связи с развитием функционала Snoop Project.
Если вам до боли знаком такой софт, как namechk или spiderfoot, то «Snoop Project» вас явно порадует, он даёт «им» фору вместе взятым и это не желтый заголовок «Статья вечерняя» — это реальная «forensic-работа» по цифровым следам в киберпространстве…
Читать дальше →
Total votes 42: ↑28 and ↓14+23
Comments67

Скрипт статического коллтрекинга

Reading time6 min
Views12K


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

Читать дальше →
Total votes 6: ↑5 and ↓1+4
Comments6

Простейший способ ухода от рутины

Reading time3 min
Views21K
В этой статье я поделюсь очень простым, «на троечку», способом ухода от рутины для владельца или руководителя любой компании, отработанным на практике. Чтобы, наконец, можно было пойти в тренажерный зал, слетать с любимым человеком в ОАЭ или поиграть в любимую компьютерную игру. Или чем вы там давно хотели заняться без страха потери бизнеса?


Читать дальше →
Total votes 30: ↑19 and ↓11+8
Comments15

Спойлер: Вставка SVG иконок одним единственным способом

Reading time3 min
Views17K
imageВ статье будет обсуждаться проблема вставки SVG иконок в веб — страницу.

Что мы имеем, и как мы используем это. Глобально есть три способа:

  • Вставка исходного кода SVG иконки прямо в DOM страницы.
  • С помощью HTML тега IMG
  • С помощью CSS background-image

Мы не будем говорить о варианте вставки иконок в виде шрифтов, ибо у этого подхода есть масса недостатков (некоторые из них чисто субъективны), о которых можно узнать с помощью поиска в Гугл, и вариант с IFRAME и OBJECT тегами тоже опустим по той же причине.
Просветляться
Total votes 9: ↑8 and ↓1+7
Comments20

Бесплатный скрипт для Photoshop: экспорт векторных слоев из PSD в SVG

Reading time2 min
Views37K
Использование готового и бесплатного скрипта, о котором пойдет речь, значительно упрощает и ускоряет процесс переноса исходников из Photoshop в Sketch. Но я думаю, скрипт может пригодится и для тех, кто с указанной программой не работает. Он экспортирует слои в формат .svg, избавляя от необходимости по одному генерировать SVG файлы.



Требования:

— Windows или Mac OSX;
— Photoshop CS5, CS6;
— Adobe Illustrator.

Загрузить скрипт PSD в SVG

Читать дальше →
Total votes 15: ↑13 and ↓2+11
Comments26

Коллекция практических советов и заметок по вёрстке

Reading time32 min
Views177K

CSS Refresher


Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика


Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание


  1. Позиционирование (position)
  2. Отображение элемента в документе (display)
  3. Плавающие элементы (float)
  4. CSS селекторы
  5. Эффективные селекторы
  6. Переотрисовка и перерасчет
  7. CSS3 свойства
  8. CSS3 медиа-запросы
  9. Адаптивный web-дизайн
  10. CSS3 переходы
  11. CSS3 анимации
  12. Масштабируемая векторная графика (SVG)
  13. CSS спрайты
  14. Вертикальное выравнивание
  15. Известные проблемы

Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments33

60 — это магическое число

Reading time2 min
Views8.1K
Превьюшки бывают четырёх типов:
  1. фиксированные по длине и % по высоте от оригинала
  2. фиксированные по высоте и % по длине от того же оригинала
  3. фиксированные по длине и высоте (с обрезанием части после масштабирования, которая не вписана, например 300х150)
  4. процентный масштаб (25% от оригинала, к примеру)

И каждый, кто создает галерею задается вопросом: «сколько вешат граммов?» «сколько превью разместить по дефолту в галерее?»
Читать дальше →
Total votes 21: ↑13 and ↓8+5
Comments17

7 правил создания красивых интерфейсов

Reading time8 min
Views180K


Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление


Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:
  • разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
  • UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

Читать дальше →
Total votes 86: ↑81 and ↓5+76
Comments34

Делаем веб-формы удобнее для заполнения

Reading time5 min
Views27K
Привет, Хабр! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.

автозаполнение форм на смартфоне

Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

<input type="text" name="customerEmail" autocomplete="email"/>

Больше кода под катом!
Total votes 27: ↑24 and ↓3+21
Comments11

Information

Rating
Does not participate
Registered
Activity