Текст в перспективе

    Блуждая по сети, я не раз видела самые удивительные решения, основанные на применении CSS. И с каждым разом все больше верится, что возможности CSS безграничны :)
    Сегодня я увидела вот такую картинку:

    Правда интересный эффект? Давайте попробуем раскрыть секрет его реализации.

    Для того, чтобы сделать эффект «перспективного» текста, нам потребуется всего лишь 3 элемента – блок div, p и span. Вспомним, что span это элемент строки (по умолчанию), поэтому мы можем «причесать» любое слово/строку как захотим. Но ничего фантастического делать нам не нужно :) Span мы будем использовать, чтобы разбить текст, который мы хотим преобразовать, на строки. А элемент p – будет обрамлять наш текст.

    С текстом разобрались, но как же нам указать разную величину шрифта для каждой строки? Мы немного схитрим и не будем закрывать тег span после каждой строки, а сделаем так, чтобы каждая строка была как бы вложенна в другую. А закрывающий тег от каждой строки поместим в самый конец текста. Главное здесь не обсчитаться в количестве открывающих и закрывающих тегов. И тогда код будет выглядеть так:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Pellentesque velit lacus,porta vitae, consequat in,aliquam condimentum, tortor. Mauris sed est feugiaterat lacinia rutrum. Fusce dapibus nonummy nisi.Nullam et mi nec arcu tempor pellentesque. Fuscediam dui, pharetra at, pellentesque quis, dapibusut, erat. Curabitur venenatis condimentum nisi.In posuere. Curabitur accumsan, libero egetcongue sodales, lacus mi vehicula lorem,nec rutrum velit nunc vitae magna. Proinet Perspective Text via CSS.


    Что нам это дает? Вспомним, что дочерние элементы наследуют свойства родительского элемента, причем каждый последующий вложенный элемент присваивает значение относительно его предыдущего блока, а не самого первого. Ярким примером может быть например такое: когда мы используем вложенные блоки с шириной в процентах, например 70%. Каждый вложенный блок будет иметь ширину 70% относительно предыдущего блока, тем самым самый последний вложенный блок будет самым маленьким.

    Думаю, вы уже поняли наши дальнейшие действия :) Мы будем проделывать это с величиной шрифта, указав его в процентах.
    Стили для наших элементов будут выглядеть так:
    #text {
    margin : auto;
    width : 40em;
    font-size : 50%;
    line-height : 1.6em;
    max-width : 90%;
    text-align : center;
    }

    #text p span {
    font-size : 1.1em;
    display:block;
    clear:both;
    }

    Важно уточнить, что размер текста нужно указывать именно в em и обязательно больше чем 1 em – иначе эффект будет другой. Также нужно помнить о расстоянии между строками (line-height), чтобы строки по мере увеличения шрифта не стали наезжать друг на друга.

    Вот и весь секрет :) А дальше только ваша фантазия :)
    Посмотреть пример наглядно можно здесь
    Там же вы найдете и ссылки, чтобы скачать код.

    via Mike’s Experiments
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 68

      +1
      я бы сказал что логичней начать все тэги спан в одном месте а закрывать в разных( там где нужно), тогда размеры не уменьшать, устанавливая их меньше 100%, а увеличивать, устанавливая больше 100%

      а вообще от перемены мест слагаемых сумма не меняется. ;))
        +1
        Я даже удивился, что все так просто :-). Спасибо habratchanka.
          +6
          а может кто-нибудь придумать хоть одно практическое применение сего чуда?
            +1
            это не важно :) "но какая музыка.." (с) Масяня
              +1
              Вот кстати тот же вопрос назрел! Круто... прикольно... НО ЗАЧЕМ?! :)
                0
                  0
                  названия нижних 3 альбомов вижу нормально
                  те, что выше уже не поддаются моему зрению
                    0
                    Не знаю, имеете ли вы отношение к этому ресурсу, но мне там понравилось. Заинтересовало больше, чем сам топик :)
                      0
                      к проекту отношения не имею. На хабре баннер просто крутится про него и я запомнила, что там есть похожая реализация
                        0
                        Да) Очень хорошая идея с сортировкой музыки по настроению..
                        Вот бы на last.fm такое. Да и слушать бы разрешили бесплатно %)
                        0
                        отличный пример
                        0
                        ну... :))) можно сделать "лестницу тегов" :)))
                          0
                          Стремянку блин :)
                          to habratchanka Ну в принципе если тока треклист показывать... только там не только текст в перспективе..
                          0
                          Меню. Выбираем пункт - он становится большим, а пункты до и после - лесенкой уменьшаются.
                            0
                            Ну, если надпись желтая на черном фоне и саундтрек: там, там, там, та-ра-ра-рам, там, та-ра-ра-рам. То можно сделать вступительные титры типа "Episode IV..."
                            0
                            а подгонять количество символов в строке вручную?
                              +1
                              ну почему же вручную. Все зависит от ваших навыков работы например с JS или php. Текст можно легко разбить на строки программно так как вам надо. Я же говорю - дальше только ваша фантазия :)
                                –2
                                ага. с помщью js определять размер символа и вставлять span где надо....
                                сомнительное реешние.
                                  +3
                                  кто умеет, тот сделает :)
                                  • UFO just landed and posted this here
                                      0
                                      Причем здесь это, если серьезно? :)
                                      • UFO just landed and posted this here
                                  0
                                  Я понимаю это всё для блока с фиксированной шириной. Есть идеи как сделать текст тянущимся по горизонтали без особых извращений (чуть-чуть можно) в js? ^_^
                                    0
                                    если всё будет делаться машиной, то можно и стилей нагенерить точно так же

                                    красивые css-решения позволяют избегать машинного труда, а здесь все эти достоинства нивелируются
                                    0
                                    почему же
                                    при помощи любого скриптового языка можно разбивать строки как душе угодно
                                  • UFO just landed and posted this here
                                      0
                                      Что-то похожее:
                                      http://worldfirefoxday.com/
                                        0
                                        задумка интересная у них, но о кроссбраузерности они не подумали.. в опере лучше не смотреть :))
                                          0
                                          Ну это же не worldoperaday.com
                                            0
                                            А мне картинка нравится, этак декадентски выглядит.
                                          +3
                                          Мне тоже стало интересно ) Потратил 5 минут на написание и 10 на отдирание своей библиотеки от написаного ))
                                          Такая ностальгия по ушедшим годам, когда я только узнал что такое js и делал простелькие эфекты... Порылся в архивах и такое умиление испытал рассматривая свои первые каракули...
                                          Вот рабочий пример: http://paul.dovbush.googlepages.com/test-zoom.htm. Где можно применить только не понятно. Скорее уж вот это http://www.artlebedev.ru/tools/technogrette/js/zoom/ можно где-то использовать.

                                          function dZoom(config)
                                          {
                                              for(var i in config)
                                                  this[i]=config[i];

                                              this.init();
                                          }

                                          dZoom.prototype={
                                              target:null,    // effect target UL
                                              delta:10,    // decrease size delta
                                              max:150,    // max font size
                                              min:30,        // min font size
                                              unit:'%',        // font size unit

                                              init:function()
                                              {
                                                  if(typeof(this.target)=='string') this.target=$(this.target);
                                                  if(!this.target) throw 'dZoom>> src required';

                                                  // remove useless childNodes
                                                  var chs=this.target.childNodes;
                                                  for(var i=0; i<chs.length; i++){
                                                      if(chs[i].nodeType!=1)
                                                          this.target.removeChild(chs[i--]);
                                                  }

                                                  addEvent(this.target,'mouseover',delegate(this,this.hover));

                                                  this.reflow(this.target.firstChild);
                                              },
                                              hover:function(e)
                                              {
                                                  var sender=e.target||e.srcElement;
                                                  if(sender.nodeName!='LI') return;

                                                  this.reflow(sender);
                                              },
                                              reflow:function(li)
                                              {
                                                  var max=this.max, delta=this.delta, min=this.min, unit=this.unit; // cache
                                                  var cp=li, i=0;

                                                  while(cp){
                                                      cp.style.fontSize=Math.max((max-delta*i++),min)+unit;
                                                      cp=cp.previousSibling;
                                                  }

                                                  cp=li.nextSibling, i=1;

                                                  while(cp){
                                                      cp.style.fontSize=Math.max((max-delta*i++),min)+unit;
                                                      cp=cp.nextSibling;
                                                  }
                                              }
                                          };
                                            0
                                            все-таки забавно заниматься такими глупостями... Вот, добавил еще градиент цвета туда же и поправил одну глупость.

                                            http://paul.dovbush.googlepages.com/test-zoom2.htm
                                              0
                                              Оффтопик:
                                              Как что-то запостить? Пытаюсь добавить [http://habrahabr.ru/topic/add/] - вываливается редирект на [http://www.habrahabr.ru/info/wiki/?title=%D0%9A%D0%B0%D1%80%D0%BC%D0%B0] с ошибкой логина к БД
                                              Читаю [http://habrahabr.ru/info/help/karma/] и понимаю, что чтоб запостить что-либо надо уже иметь карму.
                                              В «Я умный» написано, что можно постить без кармы, а в хэлпе - что уже нельзя.

                                              Вопрос: где взять кармы? )))
                                              плюсики у коментариев это что? имеют они какое-то отношение к карме? У меня никак не отражаются - вот и получается, что единственный способ добыть кармы - выпрашивать ее в офтопиках )

                                              ЗЫ: читаю хабр 4 месяца. решил вот присоединиться т.к. радует на удивление вменяемая комьюнити.
                                                0
                                                Зачем нужна карма - читай только тут, а не по блогам.
                                                Плюсики - нравится/не нравится пост.
                                                К карме прямого отношения не имеют. Но если твой коммент очень сильно всем понравился, то кармы они тебе за это добавят и тогда сможешь постить
                                                  0
                                                  спасибо, понятно.
                                                  т.е. тему для обсуждения сообществу я предложить не могу, а могу только участвовать в чужих дискуссиях. проблема в том, что активная дискуссия чаще всего длится меньше дня, а время для участия удается выбрать не всегда. на форумах, где активная тема всплывает вверх в этом смысле проще...
                                                    0
                                                    спасибо за карму. сегодня опубликую статью для публикации которой она мне была нужна.
                                            +1
                                            При изменении размера шрифта получается фарш... точнее перспектива рушится... на одной строке становятся слова с шрифтами разных размеров...
                                              0
                                              тогда сделать строки блочными и очистить привязку по бокам

                                              #text p span {
                                              font-size : 1.1em;
                                              display:block;
                                              clear:both;
                                              }


                                              в примере разбивка идет за счет того что ширина установлена для блока
                                            • UFO just landed and posted this here
                                                0
                                                может для кого-то это будет в новинку ;)
                                                  –6
                                                  Привет! Я на сайте первый раз, по-моему хабратчанка очень смекалистая, за последний год не встречал умных девчонок!
                                                    0
                                                    спасибо :) Но уверена (и очень надеюсь :)), что я такая не одна :)
                                                    • UFO just landed and posted this here
                                                        +2
                                                        Поменяй интернет.
                                                        • UFO just landed and posted this here
                                                    • UFO just landed and posted this here
                                                        0
                                                        наверное к дождю :D
                                                        Лично мне приятно :)
                                                        • UFO just landed and posted this here
                                                            0
                                                            Держись, Хабратчанка! Что-то молодые люди тебя заклевали!!!
                                                              0
                                                              пройденный этап ;)
                                                          +1
                                                          По-моему вам просто не повезло, но это не важно.
                                                          Я думаю, что в том, что предложила посмотреть профиль habratchanka нет ничего сверсложного или нелогичного.
                                                          Больше волну нагнали. Я не понимаю, как на хабра-тематическом сайте такое может удивить.
                                                          Однако, подход к решению задачи вполне не глупый и "чистый". Не магия, просто человек знает css :)
                                                      0
                                                      Интересно реализовано, жаль только не кросс-браузер:)
                                                      А кто помнит.. старый такой ресурс, который показывал "Star Wars" в ASCII? Вот там такая же идея реализована: убегание текста в перспективу. Ну, как в начале оригинального фильма: "Империя захватила власть во вселенной... бла-бла". Но вот реализация на CSS, безусловно, оригинальная. Кароче, в голд:)
                                                        0
                                                        Update: Бессовестно наврал в предыдущем посте. Пересмотрел начало фильма на http://www.asciimation.co.nz/. Убегания текста в перспективу там нет. Так что все очень оригинально:)
                                                        0
                                                        da ne imeet zna4eniya gde mogno bydet primenit' takoi priem.Glavnoe to,4to on otragaet syshnost' do4enih elementov
                                                          0
                                                          интересно ))
                                                          не было ни разу мысли что то подобное сделать )
                                                            0
                                                            И от меня спасибо!
                                                            Просто, элементарно, красиво.
                                                            Хабратчанка умница :)
                                                              +1
                                                              Натыкался на эту технику в каком-то посте вроде «999+ Awesome CSS Techniques», впечатлило. После просмотра исходника впечатление пропало — если бы можно было делать эту лесенку из сплошного текста, без разбивки span'ами, она бы имела смысл.
                                                              По-моему, с этим удивительным решением встречался любой верстальщик, хоть раз забывавший закрыть тег в цикле.
                                                                0
                                                                А вы уверены, что блок &lq;div id='text'&rq; действительно необходим? Ведь
                                                                &lq;p id='text'&rq; даст то же эффект, если упростить таблицу стилей до

                                                                #text span {
                                                                font-size : 1.1em;
                                                                display:block;
                                                                clear:both;
                                                                }

                                                                  0
                                                                  можно и так, если никаких больше причесываний делать не нужно. С элементами можно экспериментировать на свой вкус :)
                                                                    0
                                                                    Да, дальше уже игра воображения и то, куда это всё будет вставляться. Можно же и clear:both; убрать. Елемент span же и так блочный и должен скидываться на сл. строку, но это опять же, всё по ситуации.
                                                                      0
                                                                      Вообще да. Просто у меня есть такое мнение, что примеры должны как раз иметь минимальное количество необходимых элементов и свойств. Что бы было понятнее, откуда ноги растут.
                                                                        0
                                                                        Думаю это сделано для варианта копи/паст.
                                                                        Т.е. вставил и забыл :)
                                                                        А думать-то, конечно, оно всегда интересней.
                                                                        Может и вправду тогда делать по минимуму, чтобы народ мыслительный процесс подключал)
                                                                        0
                                                                        Елемент span же и так блочный должен скидываться на сл. строку

                                                                        Это вы откуда взяли? :) span никогда по умолчанию никогда не будет скидывать на другу строку, Он inline, а не block
                                                                          0
                                                                          да, span inline элемент, но в данном примере он переопределён с блочный элемент.
                                                                          Поэтому для большего упрощения кода можно clear:both; убрать.
                                                                          0
                                                                          span — inline
                                                                        0
                                                                        Прикольно, конечно, однако – невалидные богохульства =]
                                                                          0
                                                                          это из-за этого поста ваша карма так улетела?
                                                                            0
                                                                            Проверил данный HTML и CSS на валидаторе ( http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/) - ни одной ошибки :-)

                                                                            Only users with full accounts can post comments. Log in, please.