О компьютерах и мобильных устройствах > Программирование и создание сайтов
CSS - вертикальное написание текста
(1/1)
wut:
Долго искал - как написать текст вертикально) Перерыл все, каких только извращений не заметил, единственное адекватное решение, как всегда, нашел на хабрахабре)
--- Код: ---css
.vertical { overflow:hidden;
line-height:30px;
position:relative;
white-space:nowrap;
width:30px;
height:200px;
border:1px solid #999;
}
.vertical object { width:30px;
height:200px;
display:block;
}
скрипт - $text это ваша переменная
<div class='vertical'>
<object type='image/svg+xml' data=\"data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='18' font-family='Arial' font-size='26' font-weight='bold' fill='#FF5C28' transform='rotate(-90)' text-rendering='optimizeSpeed'>$text</text></svg>\"></object>
</div>
--- Конец кода ---
И текст реально переварачивается, а главное - работает везде) Это только пример, извратить и сделать шедевр - дело каждого^^
Ivan:
Тоже читаешь хабр? =)
Вот только не знаю, куда нужен перевернутый текст ?
p.s. на хабре пост был про то как весь текст перевернуть на сайте ( или весь сайт, точно не помню ) - прикольнись над знакомым называется =)
wut:
Он нужен много везде, не хочу раздувать формочку из-за 1 слова) Увеличил, Перевернул и стало понятно) Там всего-то 3 варианта переменной)
Да, а вот сайт перевернуть целиком - прикольно наверное) Можно JS какой-нибудь сделать, который текст под мышкой переворачивает) Или как модуль для браузера, который устанавливаешь))) вообще будет) Думаю 1 делом снесут винду)))
DonElectron:
--- Цитата: Ivan от 15-10-2009 12:49:51 ---Тоже читаешь хабр? =)
Вот только не знаю, куда нужен перевернутый текст ?
p.s. на хабре пост был про то как весь текст перевернуть на сайте ( или весь сайт, точно не помню ) - прикольнись над знакомым называется =)
--- Конец цитаты ---
У нас на работе 1 апреля внутренний сайт периодически перескакивал с нормального вида на перевернутый. Весело, всем понравилось. :)
Навигация
Перейти к полной версии