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

Набор интегрированных продуктов Oracle Access & Identity Managemen

Oracle IAMS представляет собой семейство интегрированных продуктов для управления безопасностью на основе бизнес-ролей и должностных обязанностей; д...

News image

Серия анонсов Google для Java-разработчиков - GWT 1.6, App Engine for

Целой серией интереснейших анонсов для Java-разработчиков порадовала накануне неутомимая Google. А именно: » cвежий релиз фрэймворка для разработ...

News image

Microsoft спонсирует разработчиков чтобы догнать Apple

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

News image

ColdFusion 9 – новые технологии для создания web-приложений

Компания Adobe Systems сообщила о выпуске трех новых технологий в рамках разработки платформы ColdFusion. ColdFusion 9 позволяет быстро создавать мо...

News image

В Microsoft перенимают опыт разработки свободного ПО

Компания Microsoft поддержала инициативу своего сотрудника Гаррета Серака (Garrett Serack) под названием CoApp (Common Open Source Application Publi...

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

News image

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

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

News image

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

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