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

Тема в разделе "Верстка", создана пользователем kadurinho, 24 авг 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    618
    Симпатии:
    248
    День добрый. Подскажите, как реализовать на чистом html и css такой вариант текста Перейти по ссылке

    P.S. Вариант с изображением не предлагать :)
     
  2. _sergey_

    _sergey_ Писатель

    Регистр.:
    1 окт 2008
    Сообщения:
    1.746
    Симпатии:
    1.158
  3. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    618
    Симпатии:
    248
    что-то по этому примеру у меня выводится какой-то скролл, без текста. Перейти по ссылке

    FireFox 14

    IE, Chrome, Opera - все отлично
     
  4. majahead

    majahead

    Регистр.:
    12 май 2008
    Сообщения:
    376
    Симпатии:
    107
    Код:
    <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>
     
    kadurinho нравится это.
  5. R:man

    R:man Постоялец

    Заблокирован
    Регистр.:
    26 фев 2012
    Сообщения:
    136
    Симпатии:
    95
    вот статейка по теме Перейти по ссылке
    стабильно работает в браузерах :
    - Firefox 3.5+
    - Opera 10.5+
    - Safari 3.5+
    - Chrome 3+
    - IE6-8
     
  6. vhome

    vhome Создатель

    Регистр.:
    6 авг 2012
    Сообщения:
    37
    Симпатии:
    35
    Вот пример для експлорера и других

    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>
     
  7. _sergey_

    _sergey_ Писатель

    Регистр.:
    1 окт 2008
    Сообщения:
    1.746
    Симпатии:
    1.158
    В 14-й мозиле - это так выглядит:

    1.jpg

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

    2.jpg

    Ребята вы хоть проверяйте перед постингом, что выкладываете, не надо просто посты набивать.
     
  8. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Вряд ли есть на 100% кросбраузерный вариант.
    На html и css так не получится, только с использованием скриптов или какого-нибудь css3pie

    Проще картинкой сделать.
     
    sarhov нравится это.
  9. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    618
    Симпатии:
    248
    с картиной идут тормоза, при вызове модального окна, если подскажете в чем причина буду признателен, Перейти по ссылке справа есть кнопка заказа, при нажатии - тормоза идут, если обычной ссылкой (без изображения) все отлично
     
  10. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.450
    Симпатии:
    717
    Попробуй так, либо вместо картинки <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>
    
    картинку не забудь убрать