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




Танцы с бубном для блондинок, или о tabbed menus и хитрой работе с графикой

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

танцы с бубном для блондинок, или о tabbed menus и хитрой работе с графикой

Собственно, перепал мне не так давно небольшой заказец. Вроде и несложный — а потанцевать с бубном немного пришлось. А всё из-за того, что заказчик оказался немного «падкой на дизайн блондинкой» (образно говоря), и требовал строгого соответствия конечного результата макету. Требовал попиксельно, и его совершенно не волновали такие вопросы, как валидность, семантичность и всё такое. «Хоть таблицами сверстай, а сделай». И сегодня речь пойдёт о том, как в таких условиях сделать весьма хитровыделанно нарисованное меню табами. Как и за свой код не устыдиться, и не пасть в грязь лицом перед заказчиком, вот в чём вопрос?

Собственно, вот фрагмент эскиза, отвечающий за то самое меню:


А вот как оно должно выглядеть, когда выбран другой пункт:

Неудобно, правда? Мало того, что не получится создать единый background для пунктов меню (из-за этого несчастного градиента и не только), а придётся назначать стили каждому пункту индивидуально (пришлось взять с заказчика честное пионерское слово, что структура меню впредь останется неизменной), так ещё и приходится думать о том, как правильно отобразить «нахлёсты» на другие пункты до и после активного. Но нет ничего невозможного, и для реализации подобной вещи никаких таблиц нам не понадобится, и «костылей» будет минимум. Вся суть — в хитрой работе с графикой.

Но перед тем, как стилизовать меню, нам нужно позаботиться о блоке под ним. Задаём ему однопиксельный border (тот самый, который мы видим под неактивными пунктами) и бэкграунд в виде «уголка» в левом верхнем углу. Мы не будем думать о том, как этот «уголок» отображать или нет в самом меню — пусть он лежит и кушать не просит в блоке под ним, а в случае необходимости мы его просто закроем.

Теперь для каждого пункта меню мы должны нарезать по две картинки — соответственно, неактивный и активный пункт меню. А для всех пунктов меню, кроме первого, мы должны ещё предусмотреть вариант «неактивный-после-активного», у которого слева отсутствует нижняя кромка. Собственно, вот первый пункт меню в неактивном виде:

 

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


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

News image

PDF Metamorphosis .Net открывает разработчикам встраиваемые технологии

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

News image

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

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

News image

Совместная работа над кодом в компании Google

Во второй главе книги «Coders at Work», Брэд Фицпатрик (Brad Fitzpatrick) — автор Live Journal, а сейчас сотрудник компании Google, помимо всяких ин...

News image

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

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

News image

Magic Trackpad — начальные впечатления

Что это такое наверное знают все. Если вдруг вы пропустили этот прелюбопытнейший продукт, тогда вам стоит почитать www.apple.com/magictrackpad/ М...

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

News image

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

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

News image

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

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