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

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

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

News image

Продукты, связанные со средой Flex

Вместе с платформой Adobe® Flash® развивается обширная экосистема продуктов, которые способствуют успешной разработке приложений. Поддержку среды Fl...

News image

Запуск Visual Studio 2010 в России

Прошел официальный запуск Visual Studio 2010 и платформы .NET 4.0 в России. Московское мероприятие было одним из первых мероприятий в рамках глобаль...

News image

Командная строка на службе сервисов Google

Не всем нравятся распрекрасные интерфейсы с большими кнопками и специальными элементами управления для ввода текста или загрузки файлов. Иногда прощ...

News image

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

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

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

News image

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

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

News image

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

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