OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




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

Веб разработка - CSS

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

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


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

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

С текстом разобрались, но как же нам указать разную величину шрифта для каждой строки? Мы немного схитрим и не будем закрывать тег span после каждой строки, а сделаем так, чтобы каждая строка была как бы вложенна в другую. А закрывающий тег от каждой строки поместим в самый конец текста. Главное здесь не обсчитаться в количестве открывающих и закрывающих тегов. И тогда код будет выглядеть так:

<div id= text >
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<span>
Pellentesque velit lacus,porta vitae, consequat in,<span>
aliquam condimentum, tortor. Mauris sed est feugiat<span>

erat lacinia rutrum. Fusce dapibus nonummy nisi.<span>
Nullam et mi nec arcu tempor pellentesque. Fusce<span>
diam dui, pharetra at, pellentesque quis, dapibus<span>
ut, erat. Curabitur venenatis condimentum nisi.<span>
In posuere. Curabitur accumsan, libero eget<span>
congue sodales, lacus mi vehicula lorem,<span>

nec rutrum velit nunc vitae magna. Proin<span>
et Perspective Text via CSS.</span></span></span></span></span></span></span></span></span></span>
</p>
</div>


Что нам это дает? Вспомним, что дочерние элементы наследуют свойства родительского элемента, причем каждый последующий вложенный элемент присваивает значение относительно его предыдущего блока, а не самого первого. Ярким примером может быть например такое: когда мы используем вложенные блоки с шириной в процентах, например 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), чтобы строки по мере увеличения шрифта не стали наезжать друг на друга.

 


Читайте:


Добавить комментарий


Защитный код
Обновить

News image

Язык C#: от Microsoft для разработчиков

В последнее время внимание сообщества специалистов IT-индустрии приковано к новой инициативе компании Microsoft -- .NET. Однако в своем восприятии э...

News image

Гонимые облаком

Конечно же, не все продукты Microsoft одинаково популярны, но чтобы так быстро выпал из общей линейки продуктов, выпускаемых компанией, набор сервер...

News image

Apple анонсировала preview Xcode 4

Apple анонсировала выход preview-версии среды разработки Xcode 4 для разработчиков с подпиской. Ниже перевод информации, размещенной на официальн...

News image

Легкий старт для разработчика. Все, что вы хотели знать о BizSpark

Любой начинающий разработчик, будь-то частное лицо или молодая компания, нуждается в поддержке. Уже около двух лет существует такая программа поддер...

News image

Oracle представила новую версию корпоративного сервера MySQL Enterpris

Oracle сегодня представила новую версию корпоративного сервера MySQL Enterprise. Данная версия популярной СУБД стала первым масштабным релизом, выпу...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

Ученые из Национального тайваньского университета разработали новую систему беспроводной передачи данных, которая позволит передавать инф...

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...