12 января 2012, 14:24

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

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

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

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

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

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

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

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

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

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

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

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

6 комментариев

6 декабря 2011, 3:54

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

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

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

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

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

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

http://artpolikarpov.ru/html/fade/

Добавлено утром: В комментариях справедливо замочили меня за неправильную работу примеров. Теперь, благодаря замечанию Игоря Барабашина, ЦСС исправлен и всё должно работать, как надо.

А ещё Александр Карпинский написал крутой комментарий:

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

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

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

вёрсткаскриптыФоторама

18 комментариев

8 ноября 2011, 0:14

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

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

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

Ярославу Патрикееву не нравится новое студийное подчёркивание

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

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

Кто первый придумает как забледнить обычный 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.

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

вёрстка

9 комментариев

25 сентября 2011, 22:36

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

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

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

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

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

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

вёрсткасмешное

15 комментариев

9 августа 2011, 18:12

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

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

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

Этой фиче уже 100500+ лет, и все знают, как от неё избавиться — нужно добавить ролику атрибут wmode со значением opaque. Чтобы не править коды видео в написанных и будущих заметках руками, я написал нехитрый скриптик, который всё делает автоматом:

http://dl.dropbox.com/u/29499284/wmode-opaque.js

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

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

e2вёрсткаскриптыэтот сайт

3 комментария

5 августа 2011, 11:57

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

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

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

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

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

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

вёрсткаскриптыФоторама

10 комментариев

31 июля 2011, 0:45

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

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

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

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

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

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

ИЕ 6, Виндоус Экспи

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

Опера 9.64, ФриБСД 7.0

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

Сафари 5.1, Мак ОС Лев

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

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

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

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

вёрсткадизайнМакочевидность

2 комментария

15 июля 2011, 16:20

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

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

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

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:

<table><tr><td>И</td><td class="r"> </td><td>с</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>р</td><td class="r"> </td><td>и</td><td class="r"> </td><td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td> </td><td class="r"> </td> <td>а</td><td class="r"> </td><td>в</td><td class="r"> </td><td>т</td><td class="r"> </td><td>о</td><td class="r"> </td><td>м</td><td class="r"> </td><td>о</td><td class="r"> </td><td>б</td><td class="r"> </td><td>и</td><td class="r"> </td><td>л</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td><td class="r"> </td><td> </td><td class="r"> </td> <td>и</td><td class="r"> </td><td> </td><td class="r"> </td> <td>л</td><td class="r"> </td><td>ю</td><td class="r"> </td><td>д</td><td class="r"> </td><td>я</td><td class="r"> </td><td>х</td></tr></table>

У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

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

вёрсткаМоторскрипты

4 комментария

15 июля 2011, 13:25

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

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

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

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