Блин, зима-то закончилась!

Непорядок какой-то: зима закончилась, а в блоге - все еще метель. Исправляюсь!

Красивые рейтинги при помощи CSS

Достаточно интересные по виду рейтинги для статей используют на сайте Web Appstorm. Эта система, основанная, естественно, на CSS, использует абсолютное позиционирование и картинку в качестве значения максимального рейтинга.

Как это работает? Да вот так!

HTML-код:

<span class="the_score">8</span>
<img class="ten" src="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif" alt="">

CSS-код:

.tabdiv {
position: relative;
width: 100%;
}
.tabdiv .the_score {
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
font-size: 110px;
line-height: 110px;
font-weight: bold;
position: absolute;
top: 8px;
right: 100px;
color: #262626;
text-align: center;
letter-spacing: -17px;
}
.tabdiv .ten {
position: absolute;
top: 58px;
right: 45px;
}

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

HTML-код:

<div class="ratingblock">
<span class="rating">8</span>
<span class="max">10</span>
</div>

CSS-код:

.ratingblock{
position: relative;
height: 110px;
margin-top: 30px;
margin-left: 30px;
}
.ratingblock .rating {
font-size: 3.7em;
padding: 0 5px;
}
.ratingblock .max{
display: block;
background: url(sep.gif) no-repeat;
position: absolute;
top: 0; left: 0;
font-size: 1.5em;
width: 50px;
height: 60px;
padding: 40px 0 0 30px;
}

Что еще сказать... Ах да, можете одним глазком взглянуть на демонстрацию.

Буквица при помощи CSS

Уже много говорили о том, как сделать буквицу средствами CSS и... я не стану, наверное исключением.

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

Итак, имеем следующий HTML-код:

<p><span class="dropCap">Е</span>сли бы строители строили здания так же, как программисты пишут программы, то первый залетевший дятел разрушил бы цивилизацию. Квалифицированный специалист — это человек, который удачно избегает маленьких ошибок, неуклонно двигаясь к какому-либо глобальному заблуждению.</p>

Буквица из обыкновенного текста

Обычный текст можно превратить в буквицу при помощи всего нескольких строк CSS-кода. А если использовать набирающий популярность стандарт внедрения шрифтов @font-face, то все становится еще проще.

А вот и CSS-код:

.dropCap {
float: left;
font-size: 5em;
line-height: 0.9em;
padding: 0 5px 0 0;
font-family: Georgia, "Times New Roman", Times, serif;
}

Демо.

Буквица из изображения

Тут, в принципе, тоже все просто: будет использовать изображение буквы в качестве буквицы при помощи свойств background и text-indent.

CSS-код:

.dropCap {
text-indent: -99999px;
background: url(drop_cap_e.gif) no-repeat left 5px;
height: 50px; width: 55px;
float: left;
display: block;
}

Демо.

Если вы собираетесь использовать множественные буквицы, то можно взяглянуть в сторону CSS-спрайтов.

jQuery-буквица

А еще для создания буквицы можно использовать jQuery. Для этих целей существует замечательный плагин, придуманный Карлом Свидбергом (Karl Swedberg), который называется Fancy Letter. Демо.

Дата конференции известна!

Я немного пропустил, но все же: дата и место проведения ZFConf 2010 теперь известны.

Место: Санкт-Петербург, ЛГТ-Центр (Московский пр., 143, ст. м. «Электросила»)

Время: 27 марта 2010 г. (с 9:00 до 19:00)

Длительность: 1 полный день

Формат: доклады (в один поток) и обсуждения на флипчарте (в перерывах)

Язык докладов: русский

Стоимость участия: бесплатно

Пользовательские слои на карте в Google Maps API V3

Итак, как вы уже догадались из названия, речь пойдет о пользовательских слоях на картах в API версии 3. В примере будет карта со следующими (помимо основных) дополнительными слоями: слой с Open Streetmap, метки из режима «Гибрид», метки из режима «Ландшафт», режим ландшафт без меток. Код примера слегка прокомментирован – и так, вроде, все понятно. Наверное, все.

Геокодер без кнопки поиска в Google Maps API V3

Пользовать эту фишку достаточно просто: вводим в строку поиска название местности или объекта – перед нами появляется список всех, мест, названия которых хоть немного, но совпадают с введенным. Если вы кликните левой кнопкой мыши где-нибудь в рабочей области браузера, или нажмете Tab или Enter, то выберется первый из вариантов.
Если взглянуть на процесс работы этой фишки с более технической точки зрения, то происходит следующее: запрос к геокодеру отправляется при событии keyup текстового поля. Результаты выводятся как упорядоченный список. Карта устанавливается в необходимое положение при событии click на каком-либо из элементов списка, либо при событии onchange текстового поля (как раз тот вариант, когда мы кликаем мышью вне поля, либо жмем Tab или Enter). Новый запрос не посылается, если предыдущий был послан ранее 300 миллисекунд назад.
Пример, с кое-как прокомментированным исходным кодом, лежит тут.

Показываем уровень зума на карте

Немного отойдем от темы CSS3 и вернемся к теме Google Maps API. :) В скорости появится эпизодическая подборка из небольших таких «трючков». Встречайте первый из них.
В этом трюке, на самом-то деле, нет ничего сложного. Дальше я лишь покажу прокомментированный кусок кода, который, собственно, и отвечает за данную возможность. Итак:

function ZoomDisplayControl(opt_options){
this.opts = opt_options || {};
};
/*Создаем элемент типа GControl*/
ZoomDisplayControl.prototype = new GControl();
ZoomDisplayControl.prototype.initialize = function(map) {
/*Создаем блок, в котором будет высвечиваться уровень текущего увеличения*/
var display = document.createElement("div");
/*Присоединяем его к контейнеру с картой*/
map.getContainer().appendChild(display);
display.innerHTML = map.getZoom() + "";
/*Создаем обработчик для события «zoomend»*/
GEvent.addListener(map, 'zoomend', function(o,z){
display.innerHTML = z + "";
});
/*Придаем значения атрибутам «class» и «title» контейнера*/
display.className = "zoom-level-display";
display.title = "Current zoom level";
/*Если не был передан параметр «noStyle», то стилизуем контейнер с уровнем зума*/
if(!this.opts.noStyle){
display.style.fontFamily = "Arial, sans-serif";
display.style.fontSize = "11px";
display.style.textAlign = "center";
display.style.backgroundColor = "#fff";
display.style.width = "15px";
display.style.height = "15px";
display.style.border = "1px solid #000";
display.style.MozBoxShadow = "1px 1px 1px #999";
display.style.WebkitBoxShadow = "1px 1px 1px #999";
}
this.htmlElement = display;
/*Возвращаем наш контейнер как HTML-элемент*/
return display;
}
/*Позиционируем наш контейнер на карте*/
ZoomDisplayControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,72));
}

Готовый пример наблюдаем тут.

Используем CSS3 прямо сейчас!

Как считает автор оригинальной статьи, CSS3 очень упрощает работу верстальщика и помогает ему сэкономить кучу драгоценного времени, не тратя его на то, чтобы все наконец-то заработало в этом убогом IE. CSS3 — это будущее web-дизайна.
В этой статье рассказывается о том, как сосредоточиться на дизайне, а не на том, чтобы сайт работал в IE.
Посмотрев на примеры, приведенные ниже, вы с легкостью убедитесь, что CSS3 делает кросс-браузерную совместимость гораздо более простой вещью, чем это может показаться на первый взгляд — тем более, если вы не считает, что в разных браузерах сайт должен выглядеть абсолютно идентично.

Эффект Box Shadows

Если вы хотите показать, что какой-то блок находится как бы уровнем выше, чем все остальные, то вы можете положить тень позади него. Таким образом вы придадите ему объем и привлечете взгляд посетителя.
Использование изображения в качестве тени для блока — это выход, но не элегантный и не гибкий. А вот использование CSS3 для этих целей — это да, это по-нашему.
Пусть у нас будет вот такой HTML-код:

<div id="shift">
<h4>Shift In Thinking</h4>
<blockquote>
<p>It's okay if a design looks slightly different in one browser than it does in another. Once the designer and decision makers accept this, and <strong>embrace</strong> it, it's then that the concept of progressive enrichment can be fully leveraged.</p>
</blockquote>
<p class="author"><a href="http://handcraftedcss.com"><strong>Handcrafted CSS</strong> by Dan Cederholm</a></p>
</div>

Мы хотим, чтобы позади div'а у нас была тень. Делаем вот так:

div#shift {
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

Скажите же, что легко, а?!
Но это еще не все. Чтобы у нас все было идеально, мы должны добавить еще несколько правил. Вот так:

div#shift {
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

Это свойство поддерживают только: Firefox 3.5, Safari и Google Chrome. Но... как же быть со всеми любимым IE?
А вот тут мы обратимся к очень интересной библиотечке Modernizr. Это такой маленький Js-файл, который проверяет браузер на родную поддержку web-технологий следующего поколения. Работает он так: если браузер поддерживает какую-либо фишку (пусть будет box-shadow), то добавится соответствующий класс («boxshadow») к тегу <html>; если же браузер эту фишку не поддерживает, то к тегу <html> добавится класс «no-boxshadow».
Modernizr позволяет нам создать резервный стиль для отсталых от жизни браузеров. Этот прием называется, если дословно, «изящная деградация».
Создаем еще один стиль:

div#shift {
border: 4px solid #bbb;
border-left: 0;
border-top: 0;
}

.boxshadow div#shift {
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
border: 0;
}

Сначала, мы приказываем браузеру создать справа и снизу блока светло-серую рамку. Это дает иллюзию падающей тени. Записываем это правило вначале, т. к. это — наихудший сценарий. Так что если браузер не поддерживает свойство box-shadow, то пользователь увидит лишь серенькую рамку вокруг блока. Если же браузер окажется современным, то Modernizr добавит класс «boxshadow» к тегу <html> и пользователь увидит симпатичную тень позади блока.
Теперь посмотрим на то, как это будет выглядеть.
Webkit

IE6

Выглядит по-разному? Ну что! Немного найдется дураков, которые будут сравнивать результат отображения сайта в разных браузерах. Ну, кроме вас, конечно...

Закругленные уголки

Нет ничего проще, чем клепать закругленные уголки при помощи CSS3-свойства border-radius!
Имеем вот такой HTML-код:

<div id="cool-kids">
<h4>CSS Is Cool Again!</h4>
<blockquote>
<p>CSS has never been more exciting than it is right now. I’m even prepared to say CSS is “cool” again, both for the more experienced front-end developers as for the new designers discovering CSS every day now.</p>
<p>But…</p>
<p>Remember when Javascript became popular? Remember when Flash became popular? Every time we’re been given new toys, some people aren’t ashamed to use it in a way you can barely call constructive. I’m thinking of Geocities websites, loaded with glowing blocks of text, moving images, bad color usage… In the wise words of Stan Lee: With great power there must also come great responsibility! A sprinkle of CSS animations is better than a bucket load. Apply with care.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/css-animations"><strong>CSS Animations</strong> by Tim Van Damme</a></p>
</div>

Теперь напишем CSS-код:

div#cool-kids {
background-color: #D9DBE6;
padding: 30px;
border-radius: 20px;
}

Чтобы все было «тик-так», добавляем еще парочку правил для конкретных браузеров:

div#cool-kids {
background-color: #D9DBE6;
padding: 30px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

Да, описывать специфические свойства для каждого из браузеров — это не очень хорошо, но все-таки лучше, чем использовать изображения для скругления уголков. А как же быть с IE?
К сожалению, так просто ничто не сможет скруглить острые уголки в IE... Но, об этом не стоит беспокоится. Если же вы действительно, хотите, чтобы уголки и в IE были круглыми, то используйте различные «костыли», которые были придуманы в огромных количетсвах.

RGBA

RGBA — это еще один способ задать цвет в вашем CSS. Буковка «A» указывает нам на канал прозрачности. Вы можете сделать свой цвет полупрозрачным, изменяя значение этого параметра. Как использовать это в вашем дизайне?
И опять, пусть имеем вот такой HTML-код:

<div id="ignorance">
<h4>Ignorance is Bliss</h4>
<blockquote>
<p>That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.</p>
</blockquote>
<p class="author"><a href="http://24ways.org/2009/ignorance-is-bliss"><strong>Ignorance is Bliss</strong> by Andy Clarke</a></p>
</div>

Мы хотим сделать цвет фона div'а полупрозрачным для того, чтобы пользователь видел, что же там находится на заднем фоне. Пишем такой CSS-код:

div#ignorance {
background-color: rgba(76,157,11,0.55);
}

Но IE такое не поддерживает. Для него дописываем следующее:

div#ignorance {
background: #9BC772;
background: rgba(76,157,11,0.55);
}

Если браузер поддерживает RGBA, то свойство background принимает соответствующее значение; если нет — то оно принимает значение цвета фона в шестнадцатеричном виде.
Немного расширим на CSS-код для пущей совместимости:

div#ignorance {
background-color: #9BC772;
}
.rgba div#ignorance {
background-color: rgba(76,157,11,0.55);
}
.no-rgba div#ignorance {
background: url(images/green-55.png);
}

Как этот код работает:

• Если JavaScript выключен, то блок принимает значение цвета фона в hex-виде;
• Если JS включен и тег <html> получает значение класса «rgba», то браузер использует RGBA для задания цвета фона у блока;
• Если JS включен, но браузер не понимает, что есть RGBA, то фоном div'а становится полупрозрачная png-картинка.

Подытожим?

Итак, используем CSS3, Modernizr и радуемся жизни. Действительно, зачем цепляться за этот дурной IE? Устроим забастовку!

Добавляем реализма при помощи CSS3

CSS версии 3 появились для того, чтобы сделать нашу жизнь — жизнь простых web-разработчиков — проще. Пока, конечно, этот стандарт — еще не то, что мы можем использовать для постоянной верстки, но мы можем использовать CSS3 для того, чтобы добавить в наши проекты некоторую изюминку, затратив при этом гораздо меньше времени.
Ниже будет представлено несколько пример того, что можно сделать при помощи CSS3.

Снимки а-ля Palaroid

Мгновенные снимки Palaroid до сих пор являются очень удобным способом фотографирования. В этом примере мы попытаемся сымитировать снимок Palaroid: добавим вокруг изображения белую рамку, которая будет внизу много шире, чем со всех остальных сторон. Как вы можете увидеть в демо, фото отлично смотрится с тенью позади и динамичным переходом. Итак, код:

img { border: 15px solid #fff; border-bottom: 65px solid #fff; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); }
img:hover { -webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1); -webkit-transform: rotate(1deg) scale(1.05); -moz-transform: rotate(1deg) scale(1.05); }

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

Кнопочки

Почему в web-дизайне существуют кнопки? Сеть — это достаточно интерактивная вещь, а кнопки являются одним из тех элементов, который придает ей эту самую интерактивность. Они проще для понимания и являются копией реальных кнопок, которые мы используем в повседневной жизни: компьютеры, плееры и т. п., - все эти устройства обладают кнопками.
Для того, чтобы сделать кнопку максимально реалистичной, мы будем использовать CSS3. Для того, чтобы придать кнопке форму круга, мы будем воспользуемся CSS3-свойством border-radius, значение которого установим в половину от ширины и высоты:

button.two { width: 30px; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-indent: -9999px; border: 1px solid #696969; background: #696969 url(power.png) no-repeat 6px 5px; }

Чтобы выделить активное состояние кнопки, будем использовать градиент, который будет идти от темного вверху к светлому внизу. Чтобы сильнее подчеркнуть это активное состояние, применим незначительное преобразование, которое масштабирует кнопку. Фоновое изображение при этом сохранится:

button.two:active { -webkit-transform: scale(0.97); -moz-transform: scale(0.97); background: url(power.png) no-repeat 6px 5px, -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #696969), color-stop(0.72, #2a2a2a) ); background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient( center bottom, #696969 13%, #2a2a2a 62% ); }

Класс с именем «border» мы применим для блока, содержащего кнопку:

.border { margin: 0 auto; height: 42px; width: 42px; display: block; background-color: #fcfcfc; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #fcfcfc), color-stop(0.72, #c0c0c0) ); background: -moz-linear-gradient( center bottom, #fcfcfc 13%, #c0c0c0 62% ); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); }

Примерчик.

DVD-анимация

CSS3 имеет анимационный модуль, при помощи которого можно делать достаточно интересные эффекты:

a:hover img[alt*="Disc"] { -moz-transform: translate(50px,0) rotate(330deg); -webkit-transform: translate(50px,0) rotate(330deg); transform: translate(50px,0) rotate(330deg); }

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

img[alt*="Disc"] { -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

Пример.

CSS3: псевдо-класс :target и анимация

Ни для кого не является секретом то, что лучше использовать CSS для каких-то интересных вещей, чем мучатся с запутанным кодом. В этой статье речь пойдет о псевдо-классе :target и простой CSS-анимации.

Псевдо-класс :target

Мы очень часто используем в своем коде фрагменты идентификаторов — для того, чтобы указать на специфический элемент на странице, представленный, как правило, симвлом «#» и якорем ссылки. Когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора какого-то элемента, то этот элемент становится целью (отсюда и :target).

Элемент с этим псевдо-классом может быть как-нибудь оформлен — точно так же, как мы обычно оформляем ссылки с псевдо-классами :hover или :active.

Посмотрите на пример, взятый с Википедии: если вы пройдете по ссылке, то (при условии использования современного браузера) увидите элемент списка на светло-голубом фоне. Если заглянуть в CSS-код, то можно увидеть следущее:

ol.references > li:target, sup.reference:target, span.citation:target, cite:target {
background-color:#DDEEFF;
}

Просто, не правда ли?

Наш пример

Имеем вот такой HTML-код:

<div id="content">

<ul>
<li><a href="#b1">Block 1</a></li>
<li><a href="#b2">Block 2</a></li>
<li><a href="#b3">Block 3</a></li>
<li><a href="#b4">Block 4</a></li>
</ul>

<div id="b1">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p>
</div>

<div id="b2">
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
</div>

<div id="b3">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>

<div id="b4">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

</div>

Базовый CSS-код

Сначала нам нужно написать основу. Тут мы опишем параметры шрифтов, отбивку внутри элементов и границы снаружи этих эелементов:

body {
font:62.5%/1.5 Cambria,Georgia,"Times New Roman",Times,serif;
}
div, ul, li, a, p {
padding:0; margin:0;
}

Теперь, быстренько опишем контейнер с идентификатором «content»:

#content {
width:500px;
margin:auto;
font-size:1.4em;
}

Далее, сделаем вот что:

1. Сделаем небольшую нижнюю границу между списком и всем блоками с текстом;
2. Уберем маркеры из списка;
3. Сделаем небольшую отбивку внутри блоков с текстом, добавим им светлую границу вокруг;
4. Как бы наберем каждую первую строку абзаца с текстом капсом. Ну, чтоб красивенько было.

ul, div > div {
margin-bottom:1em;
}
li {
list-style:none;
}
div > div {
padding:1em;
border:1px solid #ffffd3;
}
div > div p:first-line {
font-variant:small-caps;
font-size:1.2em;
}

Тут мы использовали селектор child для того, чтобы быть уверенными в том, что обозначенный блок является прямым потомком контейнера «content». Это нужно для того, чтобы заданные свойства применялись по назначению, а не ко всем блокам, которые могут оказаться в контейнере с текстом.

Самое интересное

Для начала сделаем у «цели» более темную границу:

div > div:target {
border:1px solid #dac89d;
}

Для того, чтоб сделать анимацию, понадобится две вещи: определить, какой эффект будем использовать; послать вызов этому эффекту от «цели».

Определяемся с эффектом

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

Приступим. Назовем нашу анимацию просто и незатейливо — «target». Выглядеть она будет вот так:

@-webkit-keyframes target {
from { background:#ffffff; } /*Отправная точка — белый цвет*/
50% { background:#ffffd3; } /*Серединный момент времени — светло-желтый цвет*/
to { background:#ffffff; } /*Конец анимации — снова белый цвет*/
}

Так-с, анимация готова, теперь мы должны каким-то образом послать ей «зов» от «цели»:

div > div:target {
border:1px solid #dac89d;
-webkit-animation-name:target;
-webkit-animation-duration:.5s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:linear;
}

Мы должны определить имя анимации («target»), её продолжительность (5 милисекунд), сколько раз она будет повторяться (1 раз) и её направление («linear»). Можно это все написать гораздо короче:

div > div:target {
border:1px solid #dac89d;
-webkit-animation:target .5s linear;
}

Напоследок

Я надеюсь, вам понравилось. Что еще можно сказать? Ах да, работающий пример смотрите тут. Все это счастье, к сожалению, будет работать только в Webkit-браузерах (Safari, Chrome).