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

[arestov]

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

а вообще от перемены мест слагаемых сумма не меняется. ;))

[fr0mus]

Я даже удивился, что все так просто :-). Спасибо habratchanka.

[MaoDzeDun]

а может кто-нибудь придумать хоть одно практическое применение сего чуда?

[SkazochNik]

это не важно :) "но какая музыка.." (с) Масяня

[Feachezavr]

Вот кстати тот же вопрос назрел! Круто... прикольно... НО ЗАЧЕМ?! :)

[habratchanka]

http://www.weborama.ru/

[MaoDzeDun]

названия нижних 3 альбомов вижу нормально
те, что выше уже не поддаются моему зрению

[Aloner]

Не знаю, имеете ли вы отношение к этому ресурсу, но мне там понравилось. Заинтересовало больше, чем сам топик :)

[habratchanka]

к проекту отношения не имею. На хабре баннер просто крутится про него и я запомнила, что там есть похожая реализация

[itinyakov]

Да) Очень хорошая идея с сортировкой музыки по настроению..
Вот бы на last.fm такое. Да и слушать бы разрешили бесплатно %)

[scherbet]

отличный пример

[fr0mus]

ну... :))) можно сделать "лестницу тегов" :)))

[Feachezavr]

Стремянку блин :)
to habratchanka Ну в принципе если тока треклист показывать... только там не только текст в перспективе..

[Usmekhaiouschiysia]

Меню. Выбираем пункт - он становится большим, а пункты до и после - лесенкой уменьшаются.

[ostriebrevna]

Ну, если надпись желтая на черном фоне и саундтрек: там, там, там, та-ра-ра-рам, там, та-ра-ра-рам. То можно сделать вступительные титры типа "Episode IV..."

[Tishka17]

а подгонять количество символов в строке вручную?

[habratchanka]

ну почему же вручную. Все зависит от ваших навыков работы например с JS или php. Текст можно легко разбить на строки программно так как вам надо. Я же говорю - дальше только ваша фантазия :)

[Tishka17]

ага. с помщью js определять размер символа и вставлять span где надо....
сомнительное реешние.

[habratchanka]

кто умеет, тот сделает :)

[wii]

Причем здесь это, если серьезно? :)

[bazzzman]

Я понимаю это всё для блока с фиксированной шириной. Есть идеи как сделать текст тянущимся по горизонтали без особых извращений (чуть-чуть можно) в js? ^_^

[zencd]

если всё будет делаться машиной, то можно и стилей нагенерить точно так же

красивые css-решения позволяют избегать машинного труда, а здесь все эти достоинства нивелируются

[MaoDzeDun]

почему же
при помощи любого скриптового языка можно разбивать строки как душе угодно

[korynd]

Что-то похожее:
http://worldfirefoxday.com/

[habratchanka]

задумка интересная у них, но о кроссбраузерности они не подумали.. в опере лучше не смотреть :))

[besisland]

Ну это же не worldoperaday.com

[katremer]

А мне картинка нравится, этак декадентски выглядит.

[dpp]

Мне тоже стало интересно ) Потратил 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;
        }
    }
};

[dpp]

все-таки забавно заниматься такими глупостями... Вот, добавил еще градиент цвета туда же и поправил одну глупость.

http://paul.dovbush.googlepages.com/test-zoom2.htm

[dpp]

Оффтопик:
Как что-то запостить? Пытаюсь добавить [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 месяца. решил вот присоединиться т.к. радует на удивление вменяемая комьюнити.

[habratchanka]

Зачем нужна карма - читай только тут, а не по блогам.
Плюсики - нравится/не нравится пост.
К карме прямого отношения не имеют. Но если твой коммент очень сильно всем понравился, то кармы они тебе за это добавят и тогда сможешь постить

[dpp]

спасибо, понятно.
т.е. тему для обсуждения сообществу я предложить не могу, а могу только участвовать в чужих дискуссиях. проблема в том, что активная дискуссия чаще всего длится меньше дня, а время для участия удается выбрать не всегда. на форумах, где активная тема всплывает вверх в этом смысле проще...

[dpp]

спасибо за карму. сегодня опубликую статью для публикации которой она мне была нужна.

[elfiki]

При изменении размера шрифта получается фарш... точнее перспектива рушится... на одной строке становятся слова с шрифтами разных размеров...

[habratchanka]

тогда сделать строки блочными и очистить привязку по бокам

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


в примере разбивка идет за счет того что ширина установлена для блока

[habratchanka]

может для кого-то это будет в новинку ;)

[voenkov]

Привет! Я на сайте первый раз, по-моему хабратчанка очень смекалистая, за последний год не встречал умных девчонок!

[habratchanka]

спасибо :) Но уверена (и очень надеюсь :)), что я такая не одна :)

[Archie]

Поменяй интернет.

[habratchanka]

наверное к дождю :D
Лично мне приятно :)

[voenkov]

Держись, Хабратчанка! Что-то молодые люди тебя заклевали!!!

[habratchanka]

пройденный этап ;)

[wii]

По-моему вам просто не повезло, но это не важно.
Я думаю, что в том, что предложила  habratchanka нет ничего сверсложного или нелогичного.
Больше волну нагнали. Я не понимаю, как на хабра-тематическом сайте такое может удивить.
Однако, подход к решению задачи вполне не глупый и "чистый". Не магия, просто человек знает css :)

[ofigenn]

Интересно реализовано, жаль только не кросс-браузер:)
А кто помнит.. старый такой ресурс, который показывал "Star Wars" в ASCII? Вот там такая же идея реализована: убегание текста в перспективу. Ну, как в начале оригинального фильма: "Империя захватила власть во вселенной... бла-бла". Но вот реализация на CSS, безусловно, оригинальная. Кароче, в голд:)

[ofigenn]

Update: Бессовестно наврал в предыдущем посте. Пересмотрел начало фильма на http://www.asciimation.co.nz/. Убегания текста в перспективу там нет. Так что все очень оригинально:)

[proper]

da ne imeet zna4eniya gde mogno bydet primenit' takoi priem.Glavnoe to,4to on otragaet syshnost' do4enih elementov

[shel_ol]

интересно ))
не было ни разу мысли что то подобное сделать )

[polumish]

И от меня спасибо!
Просто, элементарно, красиво.
Хабратчанка умница :)

[takkmoil]

Натыкался на эту технику в каком-то посте вроде «999+ Awesome CSS Techniques», впечатлило. После просмотра исходника впечатление пропало — если бы можно было делать эту лесенку из сплошного текста, без разбивки span'ами, она бы имела смысл.
По-моему, с этим удивительным решением встречался любой верстальщик, хоть раз забывавший закрыть тег в цикле.

[404]

А вы уверены, что блок &lq;div id='text'&rq; действительно необходим? Ведь
&lq;p id='text'&rq; даст то же эффект, если упростить таблицу стилей до

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

[habratchanka]

можно и так, если никаких больше причесываний делать не нужно. С элементами можно экспериментировать на свой вкус :)

[gdX]

Да, дальше уже игра воображения и то, куда это всё будет вставляться. Можно же и clear:both; убрать. Елемент span же и так блочный и должен скидываться на сл. строку, но это опять же, всё по ситуации.

[404]

Вообще да. Просто у меня есть такое мнение, что примеры должны как раз иметь минимальное количество необходимых элементов и свойств. Что бы было понятнее, откуда ноги растут.

[gdX]

Думаю это сделано для варианта копи/паст.
Т.е. вставил и забыл :)
А думать-то, конечно, оно всегда интересней.
Может и вправду тогда делать по минимуму, чтобы народ мыслительный процесс подключал)

[habratchanka]

Елемент span же и так блочный должен скидываться на сл. строку

Это вы откуда взяли? :) span никогда по умолчанию никогда не будет скидывать на другу строку, Он inline, а не block

[gdX]

да, span inline элемент, но в данном примере он переопределён с блочный элемент.
Поэтому для большего упрощения кода можно clear:both; убрать.

[zlodie]

span — inline

[ATimofeev]

Прикольно, конечно, однако – невалидные богохульства =]

[zencd]

это из-за этого поста ваша карма так улетела?

[serverok]

Проверил данный HTML и CSS на валидаторе ( http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/) - ни одной ошибки :-)