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




Делаем красивые кнопочки

Заметки - Фишки CSS

Зачастую стандартный вид кнопочек не может сочетаться с концепцией дизайна, которую придумал дизайнер, поэтому он рисует свои кнопочки.

Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.

Например:

<a href= some_page.html ><img src= button.gif alt= Button ></a>
<input type= image src= button.gif alt= Button >

* This source code was highlighted with Source Code Highlighter.



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

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

Для этого нам потребуется:



Собственно вот HTML:

<span class= button ><a href= # >Button</a></span>
<!--или-->
<span class= button onClick= alert(1); ><b>Button</b></span>
<!--или-->
<p><span class= button ><input type= button value= Button ></span></p>
<!--или-->
<span class= button ><a href= # ><img src= i-article.gif alt= >Button</a></span>

* This source code was highlighted with Source Code Highlighter.



CSS:

<!--[if lte IE 6]>
<style type= text/css >
body {
behavior:url( csshover2.htc );
font-size:16px;
}
</style>
<![endif]-->
<style type= text/css >
.button {
display:inline-block;
line-height:22px;
padding:0 11px 0 0;
background:url(bg-button-r.gif) right 0 no-repeat;
cursor:pointer;
}
.button a, .button b, .button input {
display:inline-block;
padding:0 0 0 11px;
font-family:Arial;
font-size:13px;
font-weight:normal;
color:#000;
text-decoration:none;
outline:none;
background:url(bg-button-l.gif) 0 0 no-repeat;
border:none;
cursor:pointer;
}
.button input {
height:22px;
}
.button img {
vertical-align:middle;
border:none;
}
.button:hover {
background-position:100% - 22px;
}
.button:hover a, .button:hover b, .button:hover input {
background-position:0 -22px;
margin:0;
padding:0 0 0 11px;
}
.button:active {
background-position:100% - 44px;
}
.button:active a, .button:active b, .button:active input {
background-position:0 -44px;
}
</style>

* This source code was highlighted with Source Code Highlighter.



Посмотреть в деле можно тут.

Все это дело тестировалось под IE6/7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53
Однако под IE8 возникает баг при нажатии на

, пока что я его не победил.

P.S. Прошу сжалится надо мной и не ругать сильно, этой мой первый пост.
P.P.S. Перенес в тематический блог

 


Читайте:


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


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

News image

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

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

News image

Разработка Web-приложений с помощью Oracle JavaServer Pages

Используйте технологии OracleJSP и сервлетов для легкой разработки и внедрения гибких WEB-приложений. В связи с увеличением числа продавцов и пот...

News image

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

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

News image

Google I/O: новый Android, Google TV и машинное обучение

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

News image

3D API для Flash Player

Adobe Systems, не смотря на регулярную критику своей технологии Flash, продолжает модернизировать и развивать продукты на ее основе. Компания не ост...

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

News image

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

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

News image

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

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