Записи в категории «разработка»

14 мая 2010

CSS+HTML знак рубля

Наверно каждый дизайнер (по крайней мере, до внесения знака рубля в таблицу Unicode) должен найти свой вариант отображения знака рубля на веб-странице. Кто-то использует картинки, кто-то внедряет шрифты, кто-то извращается с DTD, а я просто соединил 2 символа, букву Р и длинное тире.

Код CSS:

body { margin: 0 auto; padding:0}
p.rubl { letter-spacing:-1em; padding:0; margin:0 auto; width:1em; height:1em; position:relative}
p.rubl span { font-size:3em;}
p.rubl span + span { font-size:1.6em; position:absolute; left:0; top:.7em;}

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
p.rubl span + span {top:.6em; } /* opera */
}
*:first-child+html p.rubl span + span { top:.6em; } /* ie 7 */

HTML разметка всего из одной строчки.

А вот и живой пример знака рубля (точнее — его «быстрорастворимый» вариант). Мои 5 браузеров и бол-во тестов на browsershots.org данный код проходит весьма успешно, за редким исключением навроде хардкорных сочетаний Konqueror\Ubuntu. Плюс этого метода в том, что размеры задаются в масштабируемых единицах, и поэтому в IE7 например увеличение-уменьшение размера шрифта проходит «на ура». Прошу тестировать.

05 авг. 2009

HTML 5 уже здесь!

Как известно, рабочая группа W3 консорциума обещает разродиться языком разметки HTML 5 уже в 2022 (две тысячи двадцать втором) году, но в сети уже появился прекрасный пример документа, размеченного по лекалам HTML 5й версии и третьего CSS. дальше...