Обновил спрайт с пиктограммами государственных флагов до версии 0.2.

Изменился синтаксис вставки флажка в ХТМЛ, было:

<i class="b-fg b-fg_RU"><img src="fg.png"></i>

Стало в два раза короче:

<i class="flag-RU"></i>

Пустой флаг-заглушка:

<i class="flag-NOWHERE"></i>

Никита Иванов, автор пиктограмм, перерисовал флаг Ливии (LY) и добавил Южный Судан (SS), а я внёс эти изменения в спрайт и массив названий.

В зипе теперь лежит тестовая страница, снимающая все вопросы подключения.

Пользуйтесь на здоровье:

http://artpolikarpov.ru/projects/flags/

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

Я часто расставляю неразрывные пробелы руками.

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

Удобно.

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

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

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

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

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

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

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

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

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

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

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

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


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


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


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

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

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

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

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

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

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

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



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


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


Короче, задача показалась мне интересной, и я написал твит:


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

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.

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

Вот как надо верстать бюджетные сайты из нескольких страниц.

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


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


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


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

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

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


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

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

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

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

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

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

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

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

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

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


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


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

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


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


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


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



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

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

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

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


Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „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 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.