Облегание текстом буквы на CSS

Тема в разделе "Веб-дизайн", создана пользователем Zloboff, 2 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Zloboff

    Zloboff Прохожие

    Вообщем нужно сверстать блок где все элементы должны быть текстом. Пример прикреплён к теме.
     

    Вложения:

    • preview.jpg
      preview.jpg
      Размер файла:
      17,3 КБ
      Просмотров:
      16
  2. thoth777

    thoth777

    Регистр.:
    28 ноя 2008
    Сообщения:
    314
    Симпатии:
    98
    HTML:
    как вариант
    .letter {
     font-size: 220%; /* Размер шрифта буквицы */
     float: left; /* Выравнивание по левому краю */
     color: blue; /* Цвет буквицы */
     padding-right: 3px; /* Отступ между буквицей и текстом */
     line-height: 32px; /* Положение символа */ 
    }
    
    <p><span class="letter">П</span>роба буквицы</p>
    
    тока так как у вас на картинке - не получится (диагонально). будет просто ровное облегание текстом.


    а вот линк в помощь: http://www.htmlbook.ru/content/?id=111
     
  3. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    Используйте 9 блоков и у вас получится!

    Или к примеру 2 блока и 1 список из 7 пунктов для каждото li свой class или id - напрягите извилины!
     
  4. olen

    olen Постоялец

    Регистр.:
    30 окт 2007
    Сообщения:
    128
    Симпатии:
    33
    Специального тега для этого нет (по крайней мере такого, который поддерживался бы основными браузерами).
    Как сказал cocacola, надо создавать отдельные дивы, прописывая им положение.

    Но чтобы не мучаться руками, есть удобный сервис:

    http://www.csstextwrap.com/
     
    cocacola нравится это.
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    а нафига придумали псевдоэлементы? ))
    HTML:
    <p class="first">А текст текст текст<br />текст текст текст<br />текст текст текст<br />текст текст текст<br />текст текст текст<br />текст текст текст<br />текст текст текст</p>
    PHP:
    .first:first-letter {
      
    font-size:150px;
      
    float:left;
      
    margin-right:10px;
    }
     
Статус темы:
Закрыта.