8 ноября 2011-го

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

8 ноября, 15:13

Бизнес-схема туалета на заправке

Посещение таулета «Санифейр» на немецком автобане стоит 20 центов.
Sanifair

Но опустить в турникет на входе придётся 70.
Sanifair

Полученный ваучер на 50 центов можно отоварить в соседнем магазине или даже кофе-автомате. Понятное дело, купить хоть что-нибудь, не добавив ещё денег, не возможно.
Опускание чека Санифейр в кофе-автомат

8 ноября, 0:14

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

Однажды на сайте студии Лебедева изменился стиль ссылок, было 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.

***
Ах да, теперь мечта многих дизайнеров о пунктире по базовой линии — реальность.
Дни     ←  29 октября 2011-го  . . .     Ctrl     9 ноября 2011-го  →