вертикальный текст

HeadHunter

HeadHunter

Shop Script
Регистрация
21 Июн 2011
Сообщения
629
Реакции
276
День добрый. Подскажите, как реализовать на чистом html и css такой вариант текста Для просмотра ссылки Войди или Зарегистрируйся

P.S. Вариант с изображением не предлагать :)
 
Код: 
<style>
#text
{
  -moz-transform:    rotate(270deg);
    -o-transform:      rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform:        rotate(270deg);
 
 
/* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
 
  /* IE6 and 7 */
  filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=6.123031769111886e-17,
            M12=1,
            M21=-1,
            M22=6.123031769111886e-17,
            SizingMethod='auto expand');
 
}
</style>
 
<div id="text">Текст</div>
 
  • Заблокирован
  • #5
вот статейка по теме Для просмотра ссылки Войди или Зарегистрируйся
стабильно работает в браузерах :
- Firefox 3.5+
- Opera 10.5+
- Safari 3.5+
- Chrome 3+
- IE6-8
 
Вот пример для експлорера и других

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.verticaltextie{
font: bold 13px Arial;
width: 15px;
writing-mode: tb-rl;
margin: 50px;
}
.verticaltext {
  -moz-transform: rotate(-90deg) translate(0, 100%);
  -moz-transform-origin: 0% 100%;
  -o-transform: rotate(-90deg) translate(0, 100%);
  -o-transform-origin: 0% 100%;
  -webkit-transform: rotate(-90deg) translate(0, 100%);
  -webkit-transform-origin: 0% 100%;
  transform: rotate(-90deg) translate(0, 100%);
  transform-origin: 0% 100%;
}
</style>
</head>
 
<body>
<div class="verticaltextie">This is vertical text</div>
 
<div class="verticaltext">This is vertical text</div>
</body>
</html>
 
vhome написал(а):
Вот пример для експлорера и других
Нажмите для раскрытия...
В 14-й мозиле - это так выглядит:

1.jpg

В 8-м IE - так выглядит:

2.jpg

Ребята вы хоть проверяйте перед постингом, что выкладываете, не надо просто посты набивать.
 
Вряд ли есть на 100% кросбраузерный вариант.
На html и css так не получится, только с использованием скриптов или какого-нибудь css3pie

Проще картинкой сделать.
 
bork75 написал(а):
Вряд ли есть на 100% кросбраузерный вариант.
На html и css так не получится, только с использованием скриптов или какого-нибудь css3pie

Проще картинкой сделать.
Нажмите для раскрытия...

с картиной идут тормоза, при вызове модального окна, если подскажете в чем причина буду признателен, Для просмотра ссылки Войди или Зарегистрируйся справа есть кнопка заказа, при нажатии - тормоза идут, если обычной ссылкой (без изображения) все отлично
 
kadurinho написал(а):
с картиной идут тормоза, при вызове модального окна, если подскажете в чем причина буду признателен, Для просмотра ссылки Войди или Зарегистрируйся справа есть кнопка заказа, при нажатии - тормоза идут, если обычной ссылкой (без изображения) все отлично
Нажмите для раскрытия...

Попробуй так, либо вместо картинки <div></div> с этим же стилем

Код: 
<a style="background: url(/img/test_online.png) 0 0 no-repeat; width:20px; height:225px; color:#FF8400; display:block" id="various1" href="#inline1">.</a>
картинку не забудь убрать
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху