Как известно многим пользователям программ Adobe Photoshop и Image Ready, в этих программах есть «пасхальные яйца» (easter eggs), так называют спрятанные создателями программы секреты-шутки. На сайте Завгороднего попались три интересные статьи на эту тему:

«Альтернативные заставки Adobe Photoshop, они же — „пасхальные яйца“ (easter eggs)» «Альтернативные заставки Adobe ImageReady, они же — „пасхальные яйца“ (easter eggs)» «Истинное лицо утки из Adobe Photoshop»

Такого исчерпывающего исследования я ещё не видел. Хотя бы просмотрите — очень забавно.

В этом году «домику», который Лебедев более десяти лет назад придумал в иконку исполнится 14 лет — 13 октября 1994 года вышла версия Mosaic Netscape 0.9 с «домиком» в качестве символа домашней страницы.

Возникла у меня на днях задача — обрезать текст средствами браузера с красивым многоточием, если текст не умещался. Обычно такую проблему решают через JavaScript, но мне пришло в голову сделать это средствами CSS, я даже сразу придумал откуда можно начать.

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

В качестве concept proof я накидал небольшой пример, который сразу заработал в «Опере» и «Сафари», FF2 и IE7 возможностями победнее, они не потянули, видимо, в них придётся убрать селектор «:after» и заменить всё тегами с многоточиями внутри.

Сам код:

<style type="text/css">
    body { background: white; color: black; font-family: Arial; font-size: 16px }

    div.crop { width: 100%; height: 20px; overflow: hidden; z-index: 1 }

    div.crop div { float: left; width: auto }

    div.crop:after     { content: '\2026'; position: relative; z-index: 2; background: white; margin-left: -16px }
    div.crop div:after { content: '\2026'; position: relative; z-index: 3; background: white; color: white }
</style>

<body>
<div class="crop"><div>Текст не умещается в контейнер, до того он длинный</div></div>
<div class="crop"><div>Текст не умещается в контейнер</div></div>
</body>