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




Создание превью изображения на основне свойства Overflow

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

создание превью изображения на основне свойства overflow

По просьбам пользователей после прочтения статьи Визуализация данных на CSS

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

Введение
На самом деле, управлять мы будем не размерами изображения, а размерами области видимости при наведении курсором на изображение. Естественно, реализовать это поможет нам свойство overflow.
Данное свойство определяет, как будет отображаться содержание элемента, когда тот перекроет область содержащего его блока. Если, по той или иной причине, размеры этого блока ограничены, то мы используем свойство overflow, чтобы определить поведение его содержимого. Возможные значения overflow это:
visible (видимый), hidden (невидимый), scroll, auto.
Первых двух комбинаций вполне достаточно, чтобы реализовать нашу идею.

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

Реализация
Основная идея в том, чтобы поместить изображение в определенный блок. Т.к. мы говорим о превью, то этим блоком будет служить элемент <a>. Мы установим размеры (ширину и высоту) элемента как нам нужно, и установим свойство позиционирования relative. Также, мы будем использовать отрицательные значения свойств left и top, чтобы «обрезать» изображение. Элементу <a> назначим свойство overflow как hidden, поэтому будет видна только часть изображения, которое мы поместили в блок с фактическими размерами. Остальная его часть будет невидима. Для a:hover мы установим чтобы содержимое блока стало видимым: overflow: visible; и картинка раскроется полностью.

 


Читайте:


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


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

News image

Что такое Google Analytics?

При помощи Google Analytics можно собирать, просматривать и анализировать данные о посещаемости своего веб-сайта. Встроив на страницы наш основной ф...

News image

Oracle RAC. Общее описание

Высоконагруженные сайты, доступность «5 nines». На заднем фоне (backend) куча обрабатываемой информации в базе данных. А что, если железо забарахлит...

News image

Microsoft анонсировала новые технологии для веб-разработчиков

Компания Microsoft объявила о том, что на ежегодной технологической конференции для веб-разработчиков и дизайнеров MIX 09 в Лас-Вегасе анонсировала ...

News image

WidgetPad – открытая среда для коллективной разработки мобильных прило

Сатоси Накадзима (Satoshi Nakajima) – создатель первой системы автоматизированного проектирования для ПК, один из ведущих разработчиков Windows 95 и...

News image

Журналы будут такими, какими решит Adobe

После триумфального выпуска Wired для iPad, в подготовке которого Adobe приняла самое непосредственное участие, компания наконец объявила о том, что...

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

News image

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

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

News image

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

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