Pull to refresh
11
0
Дмитрий @tegArt

Пользователь

Send message

12 малоизвестных фактов о CSS (продолжение)

Reading time12 min
Views58K
Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?


Автор иллюстрации SitePoint/Natalia Balska.

Итак, давайте посмотрим на подборку уже этого года дюжины малоизвестных фактов о CSS. Я уверен, что многим из вас известны, по крайней мере, некоторые из них, но вы можете дать мне знать в комментариях сколько из фактов оказались для вас новыми.

Примечание переводчика
0. Да, я видел опубликованный пару часов назад перевод этой же статьи. Но мне совесть не позволит удалить многодневный труд из-за опоздания на пару часов :) в общем, на ваш суд.

1. Оригинальная статья изобилует рабочими демонстрациями с CodePen. Хабр, к сожалению, не поддерживает вставки с подобных ресурсов, а заменять рабочие динамические примеры статичными картинками, думаю, не имеет смысла. Поэтому статья получилась немного «лысой» простыней, но, я надеюсь, заинтересованные читатели будут открывать недостающие примеры по ссылкам в новом окне.

2. Хотя я имею непосредственное отношение к верстке, перевод получился большим и не таким простым, как показался поначалу. Замечания по ошибкам, опечаткам, терминологии и т.п. просьба присылать личным сообщением в хабрапочту.
Читать дальше →
Total votes 56: ↑51 and ↓5+46
Comments13

Каламбуры на css

Reading time1 min
Views44K
Хабровчане, всех с пятницей! Сейчас у подавляющего большинства читателей хабра рабочий день уже закончился, поэтому можно расслабиться и немного отвлечься от серьезных тем. Вы знали, что на css можно каламбурить? На кдпв один из примеров, а под катом небольшая простыня специфических css шуток.
Читать дальше →
Total votes 109: ↑90 and ↓19+71
Comments44

Укрощение интерфейса антивируса

Reading time3 min
Views8.3K


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

Итак, перед нами стояла задача сделать интерфейс антивируса для сайтов. Он должен быть удобным, простым и быстрым. О скорости и подходе проектирования на слоях мы уже писали в предыдущих постах. Сервис Вирусдай включает в себя пять инструментов. Здесь я расскажу о компоновке и функциональности элементов первого из них — антивируса.
Читать дальше →
Total votes 10: ↑9 and ↓1+8
Comments4

Скруглы — border-radius inset для картинок

Reading time2 min
Views20K


Некоторое время назад появилась задача для дизайнера сделать стилизованный под дикий запад сайт. Мне, как верстальщику, пришла задача от дизайнера сделать картинки и некоторые бэкграунды, стилизованные под дикозападские вывески. На каждой странице в неизвестном количестве и неизвестных размеров. Задача усугублялась сложным фоном и необходимостью прозрачных дырок в изображениях. Т.е. нужно было использовать border-radius:inset, которого, как оказалось, не существует… Нарезать кучу картинок под каждую страницу и случай, само-собой, нереально и бессмысленно. Заказчик не был одним из «адептов explorer 6», поэтому я решил упростить себе жизнь связкой jQuery и HTML5.
Читать дальше →
Total votes 27: ↑20 and ↓7+13
Comments20

Прелести интерфейса на частично перекрывающихся слоях

Reading time5 min
Views23K
Сегодня я расскажу как и зачем мы построили интерфейс нового сервиса Вирусдай на перекрывающихся слоях, как это сказалось на UX и как мы сформулировали принцип «Looks like an app. Works like an app».



За время, прошедшее с 2012 года мы несколько раз модернизировали как сам сервис, так и его интерфейс. Однако, всему однажды приходится сказать «прощай» и идти дальше. Настал момент, когда ни архитектура, ни интерфейс сервиса уже не отвечали нашим запросам. Нам предстояло превратить простой антивирус для сайтов в нечто большее – в целый набор связанных и удобных инструментов для лечения и защиты сайтов. Назревало только одно решение – делать новый сервис «с нуля». Архитектура, технологии, сценарии, интерфейсы – все должно было быть абсолютно новым. Нашей главной целью было достижение максимального уровня комфорта для пользователя при работе с новым сервисом.

Основной задачей нашего отдела стало создание максимально удобного и понятного UI. Итак, весной 2014 года мы приступили к работе над абсолютно новым интерфейсом сервиса и я расскажу вам как все происходило.
Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments21

Интерфейс на веревочке

Reading time3 min
Views20K


Как катушка ниток помогает проектировать и собирать сложные интерфейсы


Случается, что архитектуру интерфейса придумывает один человек. Он знает в ней все до последний мелочи, до самого незначительного сценария. Ему хорошо знаком каждый элемент, каждое действие — ведь он их автор. И этот человек пока единственный, кто держит в своей голове всю паутину хитросплетений интерфейса, скажем, нового сервиса.

Но тут пойдет речь не об архитектуре как таковой, а о проблеме передачи знаний о новом интерфейсе команде проекта (команде разработчиков). Обычно именно этот шаг занимает много времени и является корнем большинства проблем при разработке. Чтобы собрать сконструированный интерфейс в готовый сервис, нужно чтобы все участники проекта (разработчики, веб-технологи, дизайнеры, да и сам архитектор) обладали единым и полным представлением о будущем сервисе. Команде необходимо понимать каждую деталь интерфейса, каждый сценарий, каждый элемент. Все участники команды обязаны видеть всю картину целиком. Я покажу, какой способ мы выбрали и какую выгоду от этого получили.
Читать дальше →
Total votes 23: ↑21 and ↓2+19
Comments18

Information

Rating
Does not participate
Location
Нижний Новгород, Нижегородская обл., Россия
Date of birth
Registered
Activity