Сообщения

Сообщения за февраль, 2013

Background images in print css

При создании стилей для печатной версии сайта нужно помнить о том, что не всегда у пользователя будет стоять галочка "Print Background Images". Но что если нам нужно распечатать фоновое изображение, которое несет некий важный смысл, не привязываясь к настройкам пользователя? Неплохим решением было бы сделать его картинкой и вывести в псевдоэлементе :before .arrow { background: none; &:before { content: url('arrow.png'); } } Но данный метод плохо работает в firefox и ie, потому как при первой загрузке (печати) данная картинка не успевает загрузится и на ее месте мы ничего не увидим. При повторной попытке печати, все будет ок, но будет ли пользователь второй раз печатать? Решение - заменить фоновую картинку дефолтной картинкой списка: .arrow { background: none; display: list-item; list-style: url("arrow.png"); margin-left: 20px; width: 0; } При этом важно, чтобы данная картинка была уже загружена в d

CSS3 tooltips

Изображение
Toolips (подсказки) можно организовать несколькими способами: 1. используя атрибут title <a href="#" title="usual tooltip">Link</a> Самый простой способ, но тултипы получаются стандартными и поэтому оооочень скуууучни. К тому же их вид зависит от браузера (( Т.е. почти все браузеры отображают их небольшими желтыми лейбочками внизу, но они совершенно не поддаются стилизации. 2. при помощи js (jQuery Tooltip Plugin) <div id="tooltip"> ... </div> Как правило, эта конструкция добавляется в низ страницы и абсолютно позиционируется применительно к нужному элементу. Тултипы красиви, сочни, вкусни. Но для тех, кто не боится нагружать клиента ещё одним ломтиком яваскрипта. 3. css <a href="#"> Link <span>Tooltip<span> </a> Хорошая альтернатива яваскриптовому решению. Присутствуют все нужные плюшки, разве что не очень семантично, отчего ссылка перегружается излишней информац