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. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




Текст под произвольным углом без флеш и js

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

текст под произвольным углом без флеш и js

Ранее здесь была представлена статья о том как сделать вертикальный текст картинками, генерируемыми php.

Теперь я хочу вам рассказать о том как сделать поставленную задачу без картинок, флеш и js, только средствами html и css. К тому же стало возможно сделать текст под произвольным углом. В конце статьи есть готовый пример.



Кроссбраузерность:


Ограничения:
Возможно сделать текст только в одну строку, и в блоке с жестко заданными размерами в пикселях.

Начнем:


Итак, нам понадобится обрамляющий блок с заданной шириной и высотой, а также высотой линии равной ширине этого блока(для выравнивания текста по центру):

css:
.vertical { overflow:hidden; line-height:30px; position:relative; white-space:nowrap; width:30px; height:200px; border:1px solid #999; }

html:
<div class= vertical ></div>

Для современных браузеров будем использовать svg:


css:
.vertical object { width:30px; height:200px; display:block; } - задаем ширину равную высоте и высоту равную ширине обрамляющего блока.

html:
<object type= image/svg+xml data= data:image/svg+xml; charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' transform='rotate(-90)' text-rendering='optimizeSpeed'>вертикальный текст</text></svg> >
</object>
— x='-200' - координата начала строки текста от верхней стороны object, y='18' - координата базовой линии строки текста от левой стороны object,
font-family='Arial' font-size='12' - размер, гарнитура шрифта,
fill='#000000' - цвет текста,
transform='rotate(-90)' - поворачиваем текст на - 90 градусов. мы можем повернуть текст на любой угол

Для IE всех версий:


Так как IE даже 8-й версии не поддерживает svg(разработчики сказали что у них и так было много работы), будем использовать специфические свойства:
writing-mode:tb-rl; — текст размещаем вертикально сверху вниз и справа налево
filter:flipv() fliph(); — отражаем по горизонтали и вертикали.

css:
.vertical object { display:none; } - скрываем svg.
.vertical span { filter:flipv() fliph(); writing-mode:tb-rl; display:block; position:absolute; left:0; bottom:0; height:200px; width:30px; }

html:
<span>вертикальный текст</span>

для текста под углом css выглядит так:
.vertical3 span { top:-8px; left:-31px; width:200px; writing-mode:lr-tb; filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod=«auto expand»); }

top, left — эмпирические значения. находятся экспериментально.
M11 = cos(угла в градусах)
M12 = - sin(угла в градусах)
M21 = sin(угла в градусах)
M22 = cos(угла в градусах)
Отрицательные значения не берем! если нам надо повернуть на - 45 градусов то значения тригонометрических функций берем от угла 315 градусов.

Итог:


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

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

 


Читайте:


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


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

News image

Adobe и Nokia объявили о создании фонда Open Screen Project на 10 млн.

Новый фонд должен укорить создание мультимедийного мобильного контента, приложений и сервисов На Всемирном конгрессе мобильной связи GSMA компани...

News image

Лабиринт технологий виртуализации Microsoft

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

News image

Google Web Elements: четыре новых элемента

Обновилась коллекция Google Web Elements. Напомню, что с помощью Google Web Elements можно легко внедрять сервисы Google, такие как Google Maps или ...

News image

Введение в продукты и технологии SharePoint для профессионального разр

Обзор: рассмотрение расширяемой платформы продуктов и технологий SharePoint и возможностей ее использования при разработке .NET-приложений (32 печат...

News image

Что такое AJAX API для Google Переводчика?

Благодаря AJAX API для Google Переводчика можно переводить и определять язык блоков текста на веб-странице, используя только JavaScript. Кроме того,...

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

News image

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

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

News image

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

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