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



11 примеров использования CSS3

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

11 примеров использования css3

Здесь показаны 11 примеров того, как можно использовать CSS3. Они представлены в виде сравнения. В первом случае используется CSS2 (или Javascript), а во втором — CSS3.

1. Закругление углов
Классический путь


<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript src= js/jquery.corners.js ></script>
<script type= text/javascript >
$(function(){
$('.box').corners('10px');
});
</script>

<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>
<div class= box >
<!--CONTENT-->
</div>

Всё, что нужно сделать — это описать 3 свойства!

2. Тень от блока
Классический путь


<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript src= js/jquery.dropShadow.js ></script>
<script type= text/javascript >
$(function(){
$('.box').dropShadow({
left: 5,
top: 5,
opacity: 1.0,
color: 'black'
});
});
</script>

<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

3. Тень от текста

Классический путь


<style type= text/css >
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>

<div class= fonts >
<span class= font >НЛО прилетело и опубликовало эту надпись здесь.</span>
<span class= font second >НЛО прилетело и опубликовало эту надпись здесь.</span>
</div>

CSS3


<style type= text/css >
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span class= font >НЛО прилетело и опубликовало эту надпись здесь.</span>

4. Необычный шрифт

Классический путь


<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript src= js/cufon.js ></script>
<script type= text/javascript src= js/loyal.js ></script>
<script type= text/javascript >
$(function(){
Cufon.replace('.classic .font');
});
</script>
<style type= text/css >
.font {
font-size: 20px;
}
</style>

<span class= font >НЛО прилетело и опубликовало эту надпись здесь.</span>

CSS3


<style type= text/css >
@font-face {
font-family: 'Loyal';
src: url('loyal.ttf');
}
.font {
font-family: Loyal;
font-size: 20px;
}
</style>

<span class= font >НЛО прилетело и опубликовало эту надпись здесь.</span>

Здесь мы просто указали какой файл со шрифтом использовать.

5. Прозрачность

Классический путь


<style type= text/css >
.box {
opacity: .6; // all modern browsers (this is CSS3)
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) ; // IE 8
filter: alpha(opacity=60); // IE 5-7
}
</style>

<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
opacity: .6;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

6. RGBA


Все знают о системе цветопередачи RGB (red, green, blue), но для чего здесь «A»? Это «alpha» — информация о прозрачности.

Иногда хочется осветлить\затемнить фон для навигационных ссылок, когда пользователь наводит на них указатель. Это намного легче, чем создавать новую картинку для каждого цвета; если ещё и PHP добавить, то становится проще некуда.

Классический путь


Вообще, эта статья не о PHP, поэтому я не собираюсь рассказывать здесь о нём. Просто сохраните этот файл как rgba.php, а потом, когда вам понадобится определённый RGBA-цвет, задайте свойству background значение url(rgba.php?r=R&g=G&b=B&a=A).

<?php
$image = imagecreatetruecolor(1, 1);
$r = (int)$_GET['r'];
$g = (int)$_GET['g'];
$b = (int)$_GET['b'];
$a = (float)$_GET['a'];
$white = imagecolorallocate($image, 255, 255, 255);
$color = imagecolorallocatealpha($image, $r, $g, $b, 127*(1-$a));
imagefill($image, 0, 0, $white);
imagefilledrectangle($image, 0, 0, 1, 1, $color);
header('Content-type: image/png');
imagepng($image);
?>

Теперь просто применяем к div’у…

<style type= text/css >
.box {
background: url(rgba.php?r=239&g=182&b=29&a=.25);
}
</style>
<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
background: rgba(239, 182, 29, .25);
}
</style>

<div class= box >
<!--CONTENT-->
</div>

7. Размер фона

Классический путь


<style type= text/css >
.box {
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
z-index: 100;
}
.box .content {
position: absolute;
z-index: 200;
}
</style>
<div class= box >
<div class= content >
<!--CONTENT-->
</div>
<img src= http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg alt= />
</div>

CSS3


<style type= text/css >
.box {
background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat;
-webkit-background-size: 50%; /* Safari */
-o-background-size: 50%; /* Opera */
-khtml-background-size: 50%; /* Konqueror */
}
</style>

<div class= box >
<!--CONTENT-->
</div>

8. Несколько фонов



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

Классический путь


<style type= text/css >
.box {
width: 200px;
height: 150px;
background: url(images/bg.png) repeat-x;
}
.box2 {
width: 100%;
height: 100%;
background: url(images/text.png) center center no-repeat;
}
</style>

<div class= box >
<div class= box2 >
<!--CONTENT-->
</div>
</div>

CSS3


<style type= text/css >
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class= box >
<!--CONTENT-->
</div>

Всё, что вам нужно сделать - добавить запятую между фонами.

9. Столбцы


Классический путь
<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript src= js/jquery.columnize.js ></script>
<script type= text/javascript >
$(function(){
$('.columns').columnize({
columns: 2
});
});
</script>
<style type= text/css >
.column {
padding-right: 10px;
}
.column.last {
padding: 0;
}
</style>
<div class= columns >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

Я добавил небольшой отступ для того, чтобы текст в колонках не состыковывался.

CSS3


<style type= text/css >
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class= columns >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</p>
</div>

10. Текстура в виде границы

Классический путь
<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript src= js/jquery.borderImage.js ></script>
<script type= text/javascript >
$(function(){
$('.classic .box').borderImage('url(images/border.png) 27 27 27 27 round round');
});
</script>
<style type= text/css >
.box {
border-width: 20px;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

11. Анимация

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

Классический путь


<script type= text/javascript src= http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js ></script>
<script type= text/javascript >
$(function(){
$('.box').hover(function(){
$(this).stop().animate({
top: '20px'
}, 300);
}, function(){
$(this).stop().animate({
top: '0'
}, 300);
});
});
</script>
<style type= text/css >
.box {
position: relative;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

CSS3


<style type= text/css >
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>

<div class= box >
<!--CONTENT-->
</div>

Оба этих кода заставляют div скользить вниз на 20 пикселей за 300 миллисекунд.

Примеры работы - http://nettuts.s3.amazonaws.com/430_cssTips/demo/index.html

Жаль, что CSS3 ещё не работает во всех браузерах.

 


Читайте:


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


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

News image

Новый язык программирования от Apple?

Майк Цай из Daringfireball поделился своим мнением насчет нового языка программирования, который по слухам создает Apple. После просмотра официально...

News image

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

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

News image

2 млн. разработчиков на iPhone

Ни для кого не секрет, что Apple не любит Flash. Они всячески противится внедрению Flash-приложений на iPhone или IPod Touch, несмотря на все уговор...

News image

Наиболее полное руководство по Internet Explorer 9 для разработчиков (

4 августа строго по графику (период 6-8 недель) вышла четвертая тестовая сборка Internet Explorer 9. На Хабре уже успели написать про этот релиз и р...

News image

Технология, опробованная Google, вызывает все больший интерес у разраб

Кто говорит, что между традиционными производителями СУБД, построенными на фундаменте SQL, и сторонниками так называемой технологии NoSQL идет война...

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

News image

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

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

News image

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

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