habratchanka Mar 1 2008 at 19:25

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

2 min

+27

Comments 68

arestov Mar 1 2008 at 20:00

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

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

fr0mus Mar 1 2008 at 20:25

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

MaoDzeDun Mar 1 2008 at 20:30

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

SkazochNik Mar 1 2008 at 20:33

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

Feachezavr Mar 1 2008 at 20:34

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

habratchanka Mar 1 2008 at 20:37

http://www.weborama.ru/

MaoDzeDun Mar 1 2008 at 20:45

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

Aloner Mar 1 2008 at 21:10

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

habratchanka Mar 1 2008 at 21:17

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

itinyakov Mar 1 2008 at 22:37

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

scherbet Mar 2 2008 at 11:05

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

fr0mus Mar 1 2008 at 20:37

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

Feachezavr Mar 1 2008 at 20:41

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

Usmekhaiouschiysia Mar 1 2008 at 21:10

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

ostriebrevna Mar 1 2008 at 21:50

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

Tishka17 Mar 1 2008 at 20:32

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

habratchanka Mar 1 2008 at 20:35

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

Tishka17 Mar 1 2008 at 20:40

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

habratchanka Mar 1 2008 at 20:42

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

UFO just landed and posted this here

wii Mar 1 2008 at 23:49

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

UFO just landed and posted this here

bazzzman Mar 2 2008 at 03:49

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

zencd Mar 2 2008 at 22:05

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

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

MaoDzeDun Mar 1 2008 at 21:01

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

UFO just landed and posted this here

korynd Mar 1 2008 at 21:47

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

habratchanka Mar 1 2008 at 21:59

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

besisland Mar 1 2008 at 22:52

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

katremer Mar 2 2008 at 19:49

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

dpp Mar 2 2008 at 10:44

Мне тоже стало интересно ) Потратил 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 Mar 2 2008 at 17:31

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

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

dpp Mar 2 2008 at 19:18

Оффтопик:
Как что-то запостить? Пытаюсь добавить [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 Mar 2 2008 at 20:39

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

dpp Mar 2 2008 at 21:08

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

dpp Mar 3 2008 at 17:10

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

elfiki Mar 1 2008 at 21:05

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

habratchanka Mar 1 2008 at 21:13

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



#text p span {

font-size : 1.1em;

display:block;

clear:both;

}

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

UFO just landed and posted this here

habratchanka Mar 1 2008 at 21:42

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

voenkov Mar 1 2008 at 22:01

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

habratchanka Mar 1 2008 at 22:05

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

UFO just landed and posted this here

Archie Mar 2 2008 at 03:39

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

UFO just landed and posted this here

habratchanka Mar 1 2008 at 22:18

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

UFO just landed and posted this here

voenkov Mar 2 2008 at 21:13

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

habratchanka Mar 2 2008 at 21:14

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

wii Mar 1 2008 at 23:59

По-моему вам просто не повезло, но это не важно.
Я думаю, что в том, что предложила

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

ofigenn Mar 1 2008 at 22:48

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

ofigenn Mar 1 2008 at 23:01

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

proper Mar 1 2008 at 23:35

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

shel_ol Mar 2 2008 at 01:25

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

polumish Mar 2 2008 at 02:31

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

takkmoil Mar 2 2008 at 02:44

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

404 Mar 2 2008 at 13:31

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

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

habratchanka Mar 2 2008 at 13:36

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

gdX Mar 2 2008 at 13:43

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

404 Mar 2 2008 at 14:04

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

gdX Mar 2 2008 at 15:14

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