26 заметок с тегом

вёрстка

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

Ctrl + ↑ Позднее

Константино-польский

Повторим урок про Константинопольского и невлезающий текст.

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


1. Переносите его на следующую строчку:


Но не забывайте про декоративные элементы:

Ничего не должно ломаться, если текст вдруг стал длиннее:

2. Когда структура страницы почему-то не допускает переносов, прячьте второстепенные слова, размеченные заранее:

3. Или делайте фейдаут:

Продублировав текст во всплывающей подсказке, элементарном title:

Кстати, кроме фейдаута ещё есть тень, не такой затёртый приём:

4. Нельзя переносить, резать и прятать — уменьшайте кегль, как на сайте «Я расту»:

2012   вёрстка   дизайн

Наплыв, а не кросфейд

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

Я несколько раз перепроверил код, кроссфейды работали чётко и, по идее, должны были давать неизменяющуюся насыщенность цвета в одинаковых фрагментах двух картинок, или 20% + 80% не равно 100%?
Симметричный кросфейд

Как выясняется на практике, не равно. Артём Горбунов посоветовал так кросфейдить картинки, чтобы сумма их прозрачностей всегда была больше 100%, сказав, что это изобрёл Илья Бирман. Я попробовал удлинить вдвое время исчезновения одной из картинок и это дало хороший результат.
Несимметричный кросфейд

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

Вообщем, это уже и не кросфейд получился, а наплыв, или как там его правильно называть. Смотрите пример, демонстрирующий разницу между этими способами переключения картинок:
http://artpolikarpov.ru/html/fade/
Добавлено утром: В комментариях справедливо замочили меня за неправильную работу примеров. Теперь, благодаря замечанию Игоря Барабашина, ЦСС исправлен и всё должно работать, как надо.

А ещё Александр Карпинский написал крутой комментарий:
С одной стороны, мне хочется поворчать, что здравый смысл изобрел Илья Бирман. Это не так, здравый смысл всегда говорил — два непрозрачных объекта один позади другого будут вцелом непрозрачными. Чтобы сделать перетекание, нужно стобы прозрачность менялась у ближнего, а дальний так и оставался непрозрачным.

С другой стороны, хочется поворчать по поводу фразы «или 20% + 80% не равно 100%?». Ну правда, откуда этот плюс? На самом деле там, если 0,8 — непрозрачность ближнего, то общая непрозрачность = 0,8 + 0,2 * (1 — 0,8) = 0, 84.

Ну и еще оговорка: Если картинки сами будут полупрозрачными, то их интенсивность при таком способе будет больше чем нужно.
2011   вёрстка   скрипты   Фоторама

Альтернативный способ подчёркивания текста

Однажды на сайте студии Лебедева изменился стиль ссылок, было text-decoration: underline, а стало border-bottom: 1px solid c более бледным цветом:
Новые ссылки на сайте студии

Возможно это лишь промежуточный шаг на пути к неподчёркнутым ссылкам, которых пока не бывает, но выглядит забледнение прикольно. Напрягает только позиция линии — bottom вместо baseline. Дизайнеры негодуют:
Ярославу Патрикееву не нравится новое студийное подчёркивание

Ощущения прыгающей строки не было бы, если голубая линия стояла выше, там же где и нативное подчёркивание. Но как этого добиться? Надёжно управлять позицией border-bottom не возможно; перекрасить text-decoration можно с помощью вложенного элемента, но такое подчёркивание будет перекрывать нижние выносные элементы букв.
Перекраска underline с помощью вложенного элемента

Короче, задача показалась мне интересной, и я написал твит:
Кто первый придумает как забледнить обычный text-decoration: underline, тот молодец, border-bottom сосёт.

Кроме ответов про вложенный элемент, было два, которые и вдохновили на эту заметку.

1) Вадим Макеев написал про светлое будущее:
@pepelsbey: По хорошему, это делается при помощи text-decotation-color из CSS3 Text — http://dev.w3.org/csswg/css3-text/#text-decoration-color
2) Сергей Чикуёнок предложил решение для сурового настоящего через хитрые градиенты, причём он не ограничился сплошной линией, и показал ещё пунктир и точки:
@chikuyonok: Сделал пример с различными стилями подчёркивания ссылок с помощью CSS-градиентов — http://jsfiddle.net/yyHNp/5/
Это решение позволяет удобно управлять цветом, позиционированием и стилем линии, но не работает в старых браузерах. Для совместимости с динозаврами вместо градиентов можно использовать не столь гибкие картинки, как в моём примере border-bottom vs. background.

Ах да, теперь мечта многих дизайнеров о пунктире по базовой линии — реальность.
2011   вёрстка

Скоростная вёрстка

Вот как надо верстать.

Берём макет, открываем и сразу сохраняем его через Save for web (само название этого окошка как бы намекает):
Скоростная вёрстка

Вставляем картинку в код:
Скоростная вёрстка

Сайт уже почти готов, осталось добавить немного навигации, для это как раз есть чудо-теги map и area:
Скоростная вёрстка

Тадам! Cайт готов, можно даже по страничкам походить и от копипаста защитились, это же важно.
Скоростная вёрстка
2011   вёрстка   смешное

Нормализация флеша

Я тут ещё немного подтюнил Эгею, чтобы блог был в одной шкуре с остальным сайтом. Вёрстка теперь одноколоночная, сайдбар переехал в хедер и спрятался за «дыдыдышки» — теги, избранное, обсуждаемое. Слайдер важности тегов есть на каждой странице.

Во время тестирования новых поповеров обнаружилось, что флеш перекрывает их:
Нормализация флеша

Этой фиче уже 100500+ лет, и все знают, как от неё избавиться — нужно добавить ролику атрибут wmode со значением opaque. Чтобы не править коды видео в написанных и будущих заметках руками, я написал нехитрый скриптик, который всё делает автоматом:
http://dl.dropbox.com/u/29499284/wmode-opaque.js
Скрипт переваривает и старые коды подключения, и новый ютобовский код, работающий через iframe. Забирайте скрипт к себе, проверяйте, как он ведёт себя с другими плеерами, пячьте код, шлите отзывы, пожалуйста.

Кстати, теперь решилась проблема не только с моими поповерами, но и с формой логина в блог. Эвона как было:
Нормализация флеша
2011   e2   вёрстка   скрипты   этот сайт

Новая Фоторама

Обновил Фотораму.

С управлением жестами и анимацией ещё можно поспорить: например бюрошному Тигру нужен именно фейд, а у Антона Шеина запястье отваливалось, пока он тестировал новое перелистывание галереи.

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

В следующей, 0.5-й версии, ожидается возвращение фейда и перемотки по клику (будет доступно как опция). Берите и пользуйтесь на здоровье.

Чуть не забыл! Фоторама научилась быть диворамой, можно (на свой страх и риск!) положить в неё любые дивы вместо картинок. Буду благодарен, если вы поделитесь идеями о развитии плагина, пришлёте багрепорт, поможете справится, с чем у меня не получается.
2011   вёрстка   скрипты   Фоторама

Аква-кнопки и ещё

Спец. инпут
Удивительно, что до сих пор некоторые верстальщики при виде маковских баттонов, инпутов и селектов в макетах, пытаются сверстать их пиксель-в-пиксель для всех браузеров и систем. Ни у кого не получается, кстати, но я не об этом хочу написать.
Самодельная аква-кнопка

Чуваки, которые так делают, вы почему это делаете? Потому что не знаете, как выглядят элементы интерфейса на Маке и думаете, что это дизайнер такую спец. кнопочку изобрёл? Или вам кажется, что этой красотой надо поделиться и с пользователями Виндоус Экспи? Или вас кто-то заставляет?

Зря скруглённые поля
Зря скруглённые поля

Короче, на самом деле не важно почему вы так жили раньше, пора завязывать. Элементы интерфейса должны быть родными для браузера и системы, так вы сэкономите кучу времени и избежите всяких непредвиденных багов. Вот, например, формочка:

Аква-кнопки и ещё
ИЕ 6, Виндоус Экспи

Аква-кнопки и ещё
Опера 9.64, ФриБСД 7.0

Аква-кнопки и ещё
Сафари 5.1, Мак ОС Лев

Спасибо, Капитан Очевидность

Исключения, мещаюшие мне стать законченным обобщенцем, конечно есть. Вот здесь без маковских радио-кнопочек не обойтись:
Спец. инпут
Такие извращения с элементами формы надо воспроизводить картинками; один крутой перец взялся повторить шутку дизайнера для кнопок в каждой платформе отдельно, но бросил затею на пол пути, т. к. не предскажешь ведь, как выглядит и ведёт себя радио-кнопка в браузере какой-нибудь Нокии.

На всякий пожарный оговорочка: в этой заметке не было и речи об уникальных «дизайнерских» кнопках и полях, которые несомненно надо верстать с нуля. Я говорил о том, что не надо шкуру одного зверя перекраивать на другого: или всем новые одинаковые платья, или пусть остаются в чём мать родила.
2011   вёрстка   дизайн   Мак   очевидность

Слоган Мотор.ру

Первая версия слогана для Мотора была такой:
Мотор — истории об автомобилях и людях

Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (letter-spacing) не дал никакого результата — в разных браузерах всё выглядело по разному, при масштабировании шрифтов дико разъезжалось, а убери пару букв — значение нужно опять подбирать экспериментально.

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:
<table><tr><td>И</td><td class="r">&nbsp;</td><td>с</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>р</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>а</td><td class="r">&nbsp;</td><td>в</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>м</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>л</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>л</td><td class="r">&nbsp;</td><td>ю</td><td class="r">&nbsp;</td><td>д</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td></tr></table>
У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.
2011   вёрстка   Мотор   скрипты

Спрайты через <img>

Хорошая статья про то, почему нужно делать спрайты через <img>, а не через background:
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

В двух словах: если вы хотите, чтобы при печати, сохранении на жёсткий диск и в контрастном режиме Виндоус ваши спрайты не потерялись, нужно подключать их через <img>.

Кодовые отличия двух подходов я показал на картинке:
Спрайты через &lt;img&gt;, а не через background

На тестовой странице обыкновенные спрайты действительно отваливаются при выше указанных условиях:
Спрайты через background работают не везде
2011   вёрстка   спрайты
2011   вёрстка   флаги
Ctrl + ↓ Ранее