На заметку, шрифт в сообщениях используется PT Sans Narrow. Взять его можно с Google Fonts, если вам лень искать, тогда вот полный путь CSS для подключения шрифта на свой сайт:

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,cyrillic" rel="stylesheet" type="text/css" />

Плагин прекрасно работает под последним билдом jQuery, а именно под версией 1.7.1. В целом внешний вид сообщений получился гораздо изящней предыдущей версии. Забираем и пользуемся, и если хотите отблагодорить, то можете купить плагин на стоке CodeCanyon.

Шаг первый. Вертска

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

<div id="jm-fader"></div>
<div id="jm-container">
	<a href="#" class="jm-close"></a>
	<div class="jm-header">Some title</div>
	<div class="jm-content">Lorem ipsum!</div>
</div>

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

Шаг второй. Стили

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

#jm-fader {
	background: #888;
	display: none;
	position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
}

#jm-container {
	background-color: #000;
	padding: 10px;
	width: 400px;
	font-family: Ubuntu, Tahoma, Arial; 

	display: none; overflow: hidden;
	position: absolute; top: 0; left: -1000px; z-index: 150;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 0px 15px #333;
	-moz-box-shadow: 0px 0px 15px #333;
	-o-box-shadow: 0px 0px 15px #333;
	box-shadow: 0px 0px 15px #333;
}

div.jm-header {
	font-size: 15px;
	color: #fff;
	margin: 0px 5px 10px;
}

div.jm-content {
	background-color: #fff;
	font-size: 13px;
	color: #454545;
	padding: 10px;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
}

a.jm-close {
	background: url('../images/jm-close.png') center no-repeat;
	width: 15px; height: 15px;
	display: block; float: right;
	margin: 2px 3px 0;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;

	-webkit-opacity: .2;
	-moz-opacity: .2;
	-o-opacity: .2;
	opacity: .2;
}

#jm-container:hover a.jm-close {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

Вот такой вот CSS получился в итоге, конечно же из-за CSS3 красивостей код потолстел в два раза, что не может не огорчать, увы! Но не будем об этом, нам ведь главное чтобы все было красиво :)

Шаг третий. jQuery плагин

Что нам необходимо от небольшого плагина для показа модальных окон? Раз он не большой то нам достаточно лишь показывать его и дать возможность закрывать, для полезности добавим еще колбек-функции на открытие и закрытие. И для удобности сделаем возможность закрывать окно по клавише Escape, а не только по клику на крестик. Я думаю можно добавить еще эффект появления окна из-за границы экрана при откртыии и наоборот. Ну приступим:

(function($) {
	$.jModal = function(header, content, options) {
		// устанавливаем настройки и смерживаем их с дефолтными
		options = $.extend({
			width: '400px'
		}, options);

		// находим все необходимые элементы
		var fader = $('#jm-fader');
		var container = $('#jm-container').css('width', options.width);

		var headerContainer = $('#jm-container > .jm-header');
		var contentContainer = $('#jm-container > .jm-content');
		var closeButton = $('#jm-container > .jm-close');

		// проверяем оверлей и показываем его
		if (fader.length) {
			fader.css({
				opacity: .35,
				height: $(document).height()
			}).show();
		} else {
			if (console && console.error) {
				console.error('[jModal] #jm-fader контейнер не найден.');
			}
			return false;
		}

		// проверяем все ли части модального окна есть
		if (!container.length && !headerContainer.length && !contentContainer.length && !closeButton.length) {
			if (console && console.log) {
				console.error('[jModal] Нехватает некоторых контейнеров модального окна.');
			}
			return false;
		}

		// настраиваем модальное окно
		headerContainer.text(header);
		contentContainer.html(content);

		// центрируем и показываем модальное окно
		container.show().css({
			top: (parseInt($(window).height()) / 2) - (parseInt(container.height()) / 2)
		}).animate({left: (parseInt($(document).width()) / 2) - (parseInt(options.width) / 2)}, 350, function () {
			// если есть коллбек на открытие, выполняем его
			if (typeof options.open != 'undefined') {
				options.open.call(container);
			}
		});

		// вешаем закрытие окна на кнопку закрыть
		closeButton.one('click', function() {
			container.animate({left: '-1000px'}, 350, function() {
				this.style.display = 'none';
				fader.hide();

				// если есть колбек на закрытие, то выполняем
				if (typeof options.close != 'undefined') {
					options.close.call(container);
				}
			});
		});

		// и клавишу Escape
		$(document).one('keydown', function(e) {
			if (e.keyCode == 27) {
				container.animate({left: '-1000px'}, 350, function() {
					this.style.display = 'none';
					fader.hide();

					// если есть колбек на закрытие, то выполняем
					if (typeof options.close != 'undefined') {
						options.close.call(container);
					}
				});
			}
		});

		// если пользователь скроллит, тогда перемещаем окно
		$(window).scroll(function() {
			container.stop(true, false).animate({top: window.scrollY + (parseInt($(window).height()) / 2) - (parseInt(container.height()) / 2)}, 500);
		});

		return true;
	}
})(jQuery);

Ухтышка! У нас получилось! Надеюсь комментариев в коде предостаточно для понимания алгоритма и сти работы скрипта. Если нет, тогда жду вопросы в комментариях :)

Шаг четвертый. Запускаем

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jModal</title>

	<link href="css/base.css" rel="stylesheet" />
	<link href="css/jmodal.css" rel="stylesheet" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="js/jmodal.js"></script>
	<script type="text/javascript">
	$(window).ready(function() {
		$('#show-jm-first').click(function() {
			$.jModal('Обычное сообщение', 'Это просто красивое модальное окошко, ничего больше. Используется для уведомления пользователя о каких либо действиях.');
		});
		$('#show-jm-second').click(function() {
			$.jModal('Сообщение с коллбеками', 'На окна можно вешать коллбек, на открытие и на закрытие.', {
				open: function(container) {
					$('#show-jm-log').text('Модальное окно открылось!');
				},
				close: function(container) {
					$('#show-jm-log').text('Модальное окно закрылось :)');
				}
			});
		});
	});
	</script>
</head>
<body>
	<div id="wrap">
		<a href="#" id="show-jm-first" class="jm-show">Показать обычное модальное окно</a>
		<a href="#" id="show-jm-second" class="jm-show">С коллбеками на клик и закрытие</a>
		<br />
		<div id="show-jm-log" style="text-align: center; color: #666;"></div>
	</div>

	<div id="jm-fader"></div>
	<div id="jm-container">
		<a href="#" class="jm-close"></a>
		<div class="jm-header">Some title</div>
		<div class="jm-content">Lorem ipsum!</div>
	</div>
</body>
</html>

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

$.jModal('Обычное модальное окно', 'Содержимое модального окна.');

Вариант второй, указываем ширину и колбеки:

$('#show-jm-second').click(function() {
	$.jModal('Сообщение с коллбеками', 'На окна можно вешать коллбек, на открытие и на закрытие.', {
		width: 600,
		open: function(container) {
			alert('Модальное окно открылось!');
		},
		close: function(container) {
			alert('Модальное окно закрылось :)');
		}
	});
});

В саму колбек функцию приходит один параметр, это ссылка на основной контейнер модального окна.

Ну вот и все, на этом можно поставить точку и надеяться, что разъяснил как можно проще и доступней, ведь в первую очередь этот пост нацелен на аудиторию новичков в jQuery :)

Есть возможность отключить вставку какого-либо префикса, либо всех, но отключить -webkit отдельно нельзя. Работает сервис очень просто, вы вставляет ваш код в необходимое поле, указываете необходимые функции, и после получаете результат. Из недостатков могу сказать только, что нет группировки свойств, я например свойства font-* пишу в одну строку, и после пользования сервисов бывает неудобно их вручную опять группировать.

Также у сервиса есть API. Вы можете встроить его в такой софт как: Sublime Text 2, TextMate, Espresso, Vim и другие. Либо можете обращатся к сервису напрямую по линке http://prefixr.com/api/index.php и в качестве аргумента передавать ваш CSS код (?css=…).

Ну вот и всё, советую пользоваться данным сервисом для удобства и ускорения разработки.

Шаг первый. Верстка

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

<div id="j-simple-slide">
	<div class="j-simple-slide-header">jSimpleSlide</div>
	<div class="j-simple-slide-image"></div>
	<a class="j-simple-slide-link" href="#"></a>
</div>

Ну вот, с версткой мы определились. Надеюсь из названий классов, всем понятно какой элемент за что отвечает! Главному контейнеру мы дали идентификатор j-simple-slide, на него мы будем вешать на плагин.

Шаг второй. Стили

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

#j-simple-slide {
	width: 450px; height: 300px;
	margin: 0 auto;
	position: relative;
}

#j-simple-slide .j-simple-slide-image {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 10px #111;
	-moz-box-shadow: 0px 1px 10px #111;
	box-shadow: 0px 1px 10px #111;

	width: 450px; height: 300px;
}

#j-simple-slide .j-simple-slide-image img {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	display: block;
	width: 450px;
	height: 300px;
}

#j-simple-slide .j-simple-slide-header {
	position: absolute; top: 15px; left: 15px; z-index: 10;
	background: rgba(0, 0, 0, .6);
	padding: 5px 10px;
	font-size: 15px; font-family: Ubuntu, Tahoma, Arial; color: #fff;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

#j-simple-slide a.j-simple-slide-link {
	position: absolute; bottom: 15px; right: 15px; z-index: 10;
	background: #000;
	padding: 3px 5px;
	display: none;
	font-size: 13px; font-family: Ubuntu, Tahoma, Arial; color: #fff; text-decoration: none;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

#j-simple-slide a.j-simple-slide-link:hover {
	background: #fff;
	color: #000;
}

И так, главный контейнер мы сделали относительной позиции, чтобы внутри него можно было аккуратно слоями расставить элементы как нам необходимо. Все внутренние элементы естественно имеют абсолютное позиционирование. Для симпатичного вида добавили немного прозрачности для заголовка, закругленные углы для всех элементов, и немного тени, используя свойства из CSS3 (border-radius, box-shadow, rgba).

Шаг третий. Яваскрипт (сам плагин)

Ну вот и дошли наши руки до самого плагина. Дабы не писать код кусками, я постараюсь объяснить коротко алгоритм (в коде я постараюсь описать более подробнее). И так, в первую очередь мы мержим(объединяем) настройки плагина с нативными, затем объявляем переменные ссылающиеся на jQuery объекты наших контейнеров слайдера, а также задаём им сразу содержимое. Затем инициализируем интервал на листание картинок, использую при этом анимацию затемнения.

(function($) {
	$.jSimpleSlide = function(container, images, options) {
		// мержим настройки с стандартными
		options = $.extend({
			animateSpeed: 1000, // время анимации
			delay: 4000 // задержка между картинками
		}, options);

		// сохраням тек. позицию и кол. картинок
		var currentPosition = 0;
		var totalImages = images.length;

		// объявляем перемнные ссылающиеся на контейнеры
		var $container = $(container);
		var $headerContainer = $container.find('div.j-simple-slide-header').text(images[0].title);
		var $imageContainer = $container.find('div.j-simple-slide-image');
		var $link = $container.find('a.j-simple-slide-link');

		var $currentImage = $('<img>', {
			src: images[0].src,
			alt: images[0].title
		}).appendTo($imageContainer);

		// устанавливаем первую картинку
		$imageContainer.css('background-image', 'url(' + images[0].src + ')');
		if (typeof images[0].link != 'undefined') {
			$link.attr('href', images[0].link.href).text(typeof images[0].link.text == 'undefined' ? 'Перейти' : images[0].link.text).show();
		}

		// запускаем интервал, на указанное в настройках время
		setInterval(function() {
			// меняем тек. картинку(позицию)
			currentPosition++;
			currentPosition = (totalImages == currentPosition) ? 0 : currentPosition;

			// скрываем заголовок и ссылку
			$headerContainer.hide();
			$link.hide();

			// подменяем у контейнера фон на новую картинку
			$imageContainer.css('background-image', 'url(' + images[currentPosition].src + ')');

			// а текущую постепенно делаем прозрачной
			$currentImage.animate({opacity: 0}, options.animateSpeed, function() {
				// меняем текст заголовка и показываем
				$headerContainer.text(images[currentPosition].title).show();

				// если указанна ссылка, тогда устанавливаем её и показываем
				if (typeof images[currentPosition].link != 'undefined') {
					$link.attr('href', images[currentPosition].link.href).text(
						typeof images[currentPosition].link.text == 'undefined' ? 'Перейти' : images[currentPosition].link.text
					).show();
				}

				// меняем картинку и убираем прозрачность
				$currentImage.attr({
					src: images[currentPosition].src,
					alt: images[currentPosition].title
				}).animate({opacity: 1}, options.animateSpeed);
			});
		}, options.delay);
	}
})(jQuery);

Вот собственно и всё, наш небольшой плагин готов :) И теперь можно запускать его в бой и тестить, все ли правильно работает. Давайте подготовим заглушку для проверки.

Шаг четвертый. Запускаем

Давайте подготовим заглушку для проверки плагина, код у нас будет таким вот:

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jSimpleSlide</title>

	<link type="text/css" rel="stylesheet" href="css/base.css" />
	<link type="text/css" rel="stylesheet" href="css/jsimpleslide.css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jsimpleslide.js"></script>
	<script type="text/javascript">
	$(window).ready(function() {
		$.jSimpleSlide('#j-simple-slide', [
			{src: 'images/slide-1.jpg', title: 'Может по пельмешке?', link: {
				href: 'http://www.kungfupanda.com/',
				text: 'Перейти на официальный сайт'
			}},
			{src: 'images/slide-2.jpg', title: 'Планета 51', link: {
				href: 'http://www.youtube.com/watch?v=_4LSg8s5XF4',
				text: 'Смотреть трейлер'
			}},
			{src: 'images/slide-3.jpg', title: 'И имя ему, - Ранго!', link: {
				href: 'http://www.rangomovie.com/intl/ru/',
				text: 'Читать больше про Ранго'
			}}
		]);
	});
	</script>
</head>
<body>
	<div id="wrap">
		<div id="j-simple-slide">
			<div class="j-simple-slide-header">jSimpleSlide</div>
			<div class="j-simple-slide-image"></div>
			<a class="j-simple-slide-link" href="#"></a>
		</div>
	</div>
</body>
</html>

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

$.jSimpleSlide('#j-simple-slide', [
	{src: 'images/slide-1.jpg', title: 'Может по пельмешке?', link: {
		href: 'http://www.kungfupanda.com/',
		text: 'Перейти на официальный сайт'
	}},
	{src: 'images/slide-2.jpg', title: 'Планета 51', link: {
		href: 'http://www.youtube.com/watch?v=_4LSg8s5XF4',
		text: 'Смотреть трейлер'
	}},
	{src: 'images/slide-3.jpg', title: 'И имя ему, - Ранго!', link: {
		href: 'http://www.rangomovie.com/intl/ru/',
		text: 'Читать больше про Ранго'
	}}
]);

Мы привязали плагин к нашему контейнеру, и указали три картинки для крутилки. Аргумент link не обязателен, т.е. его можно не указывать.

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

ScriptSrc

Хороший сервис для быстрого копирования и вставки подключаемых JavaScript библиотек, таких как jQuery, jQuery UI, Mootools, Prototype и другие. Сервис не просто вставляет в ваш буфер ссылку на библиотеку, а сразу с тегом <script>. Все ссылки ведут на CDN ajax.googleapis.com.

0to255

Я называю этот сервис пипеткой. Данный сервис помогает подобрать любой цвет для чего либо. Вы выбираете цвет или вводите свой (в HEX), затем можете по шагам выбирать оттенок. Этот сервис я использовал делая все свои Freebies, так как фотошоп не был рядом.

WriteCodeOnline

Иногда нужно срочно выполнить какой-либо отдельный сценарий. Например у вас есть сериализованный массив, и вам необходимо его разсериализовать и получить некие данные в нормальном виде. Этот сервис поможет вам сделать это даже с мобильного :)

JsPerf

Данный сервис создан для шаринга тестов по JavaScript. Если вы любите оптимизировать свой js-код то данный сервис для вас, на нем вы сможете создать свой тест и посмотреть другие. Тесты сохраняют результаты в разных браузерах и показывают их статистику.

JsFiddle

Лучшая облачная мини-IDE для фронтенд разработки, удобно когда нужно быстро протестировать какой-нить небольшой кусок кода. Вам не надо никакие файлы, у вас есть 3 окна для HTML, Javascript и CSS, а также 4 окно, в котором показывается результат. Также можно привязать к результату какую-либо библиотеку, например jQuery либо Prototype. Код можно сохранять и даже расшаривать.

Spritebox

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

СolorSchemeDesigner

У этого сервиса примерна похожая цель, что и у 0to255.com, но только этот немного удобней для дизайнеров, например для правильного подбора цветовых схем, всего сервис предоставляет 6 цветовых схем.

Kuler Adobe

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

ColorZilla Gradient Editor

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

COLOURlovers Themeleon Twitter

Твиттер для любого блоггера уже неотъемлемая часть, и как все своё неотъемлемое нужно приводить в порядок. Данный сервис поможет вас настроить ваш твиттер, а именно внешний вид, гораздо удобнее чем стандартный и причем в лайв-режиме. Вы также можете выбрать уже готовую палитру и скин.

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

Теперь расскажу как их использовать в своих проектах. Для группировки кнопок нам необходимо обрамить их в один контейнер у которого класс должен быть «gp-buttons-group», у самих кнопок должен быть класс «gp-button» (для активной «gp-button-active»), вот так:

<div class="gp-buttons-group">
	<a href="#" class="gp-button">Главная</a>
	<a href="#" class="gp-button">Новости</a>
	<a href="#" class="gp-button">Подписки</a>
	<a href="#" class="gp-button">Поиск</a>
</div>

Для кнопок которые не должны входит в группы, просто даете класс «gp-button-single» и не обрамляете в контейнер (класс для активной кнопки «gp-button-single-active»):

<a href="#" class="gp-button-single">Кнопка</a>

Ну и конечно же кнопки только с иконками, их можно только также группировать и не группировать. Для того чтобы задать кнопке тип «image-button» нужно присвоить класс «gp-button-icon» и собственно класс с иконкой, например для кнопки с иконкой твиттера код будет таким:

<a href="#" class="gp-button gp-button-icon gp-icon-twitter">&nbsp;</a>

И не забывайте в кнопках с иконками вставлять неразрывный пробел. Кнопки с иконками группируются также как и обычные, через контейнер с классом «gp-buttons-group». Кнопки с иконками и без можно совмещать в группировках. Ну вот вроде и все, надеюсь вам понравилось.

И так, в первую очередь нам надо будет подготовить вертску и стили, в стилях мы будем использовать свойства из CSS3, а именно такие как градиент, border-radius, box-shadow, text-shadow, и opacity.

Шаг первый. Верстка

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

<div id="notifier-box"></div>

Верстка контейнера уведомления будет следующая:

<div class="message-wrap">
	<div class="message-box">
		<a class="message-close" href="#" title="Закрыть уведомление"></a>
		<div class="message-header">Тайтл уведомления</div>
		<div class="message-body">
			<div class="thumb"><img src="image.png"></div>
			<span>Тут будет текст уведомления</span>
		</div>
	</div>
</div>

Так, с версткой мы определились, теперь пора застайлить бы все это, как можно красивее конечно же, ведь мы же любим когда все красиво :)

Шаг второй. Стилизация

И так контейнер каждого уведомления у нас будет с темным фоном, и даже градиентом, будет отбрасывать небольшую тень, также будут закругленные углы, а текст будет иметь строгую тень, откидывающаяся на один пиксель вниз по вертикали. Заголовок уведомления будет зеленного цвета, текст уведомления серего цвета. Собственно набрасываем все это в CSS и получаем вот такой код:

#notifier-box {
	position: fixed;
	bottom: 0;
	right: 10px;
}

div.message-wrap {
	background: #111;

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#111111');
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(1, #111));
	background: -moz-linear-gradient(top, #222, #111);
	background: -o-linear-gradient(#222, #111);

	border: 1px solid #000;
	margin: 0 0 10px 0;
	width: 300px;

	color: #888; font-size: 11px; font-family: Tahoma;

	-webkit-box-shadow: 0 0 7px #969490;
	-moz-box-shadow: 0 0 7px #969490;
	-o-box-shadow: 0 0 7px #969490;
	box-shadow: 0 0 7px #969490;

	-webkit-text-shadow: 0 1px 0 #000;
	-moz-text-shadow: 0 1px 0 #000;
	-o-text-shadow: 0 1px 0 #000;
	text-shadow: 0 1px 0 #000;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

div.message-box {
	border-top: 1px solid #666;
	padding: 10px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

div.message-box div.message-header {
	color: #61cd07; font-weight: bold; font-size: 11px;
	margin: 0 0 10px 0;
}

div.message-box a.message-close {
	background: #000 url('../images/message-close.png') center no-repeat;
	width: 15px; height: 15px;
	display: block; float: right;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;

	-webkit-opacity: .2;
	-moz-opacity: .2;
	-o-opacity: .2;
	opacity: .2;
}

div.message-box:hover a.message-close {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

div.message-box div.message-body {
	overflow: hidden;
}

div.message-box div.message-body div.thumb {
	width: 48px;
	height: 48px;
	margin: 0 10px 0 0;
	float: left;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

div.message-box div.message-body div.thumb img {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

Теперь открываем браузер и радуемся результату, но это еще не все, осталось оживить все это дело.

Шаг третий. Оживление на jQuery

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

(function($) {
	$.jnotify = function(title, text, pictureSrc, options) {
		var stackContainer, messageWrap, messageBox, messageBody, messageTextBox, closeButton, messagePicture, image;

		options = $.extend({
			lifeTime: 0,
			click: undefined
		}, options);

		// находим контейнер с сообщениями, если его нет, тогда создаём
		stackContainer = $('#notifier-box');
		if (!stackContainer.length) {
			stackContainer = $('<div>', {id: 'notifier-box'}).prependTo(document.body);
		}

		// создаём элементы вертски контейнера сообщения
		messageWrap = $('<div>', {
			className: 'message-wrap',
			css: {
				display: 'none'
			}
		});

		messageBox = $('<div>', {
			className: 'message-box'
		});

		messageHeader = $('<div>', {
			className: 'message-header',
			text: title
		});

		messageBody = $('<div>', {
			className: 'message-body'
		});

		messageTextBox = $('<span>', {
			text: text
		});

		closeButton = $('<a>', {
			className: 'message-close',
			href: '#',
			title: 'Закрыть уведомление',
			click: function() {
				$(this).parent().parent().fadeOut(300, function() {
					$(this).remove();
				});
			}
		});

		// если указан путь к картинке, тогда создадим контейнер и для неё :)
		if (pictureSrc != undefined) {
			messagePicture = $('<div>', {
				className: 'thumb'
			});
			image = $('<img>', {
				src: pictureSrc
			});
		}

		// теперь расположим все на свои места
		messageWrap.appendTo(stackContainer).fadeIn();
		messageBox.appendTo(messageWrap);
		closeButton.appendTo(messageBox);
		messageHeader.appendTo(messageBox);
		messageBody.appendTo(messageBox);

		if (messagePicture != undefined) {
			messagePicture.appendTo(messageBody);
			image.appendTo(messagePicture);
		}
		messageTextBox.appendTo(messageBody);

		// если время жизни уведомления больше 0, ставим таймер
		if (options.lifeTime > 0) {
			setTimeout(function() {
				$(messageWrap).fadeOut(300, function() {
					$(this).remove();
				});
			}, options.lifeTime);
		}

		// если установлен колбек
		if (options.click != undefined) {
			messageWrap.click(function(e) {
				if (!jQuery(e.target).is('.message-close')) {
					options.click.call(this);
				}
			});
		}

		return this;
	}
})(jQuery);

Ну вот теперь у нас есть готовый код, для добавления уведомлений на вашем сайте. Как видите по коду я добавил еще возможность привязать колбек на клик по уведомлению. Данный колбек может быть пригодным, например если необходимо открыть новую вкладку в браузере или редиректить, когда пользователь кликает на уведомление.

Шаг четвертый. Подготовка к работе

Теперь у нас есть всё для полной работоспособности уведомлений. Осталось накинуть пробный исходник HTML кода, чтобы для новичков в этом деле было понятно как запускать такое чудо. Собственно вот и сам код, с пояснительными комментариями:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Notification messages</title>

	<link href="css/base.css" rel="stylesheet" type="text/css" />

	<!-- Подключаем стили уведомлений -->
	<link href="css/jnotifier.css" rel="stylesheet" type="text/css" />

	<!-- Подключаем jQuery -->
	<script src="js/jquery.min.js" type="text/javascript"></script>

	<!-- Подключаем наш плагин -->
	<script src="js/jnotifier.jquery.js" type="text/javascript"></script>

	<script type="text/javascript">
	function showMesssage() {
		// тут мы вызываем уведомление, без таймера и без колбека
		$.jnotify(
			'Сообщение от Василия Пупкина',
			'Это просто обычный текст для проверки работы jQuery-плагина сообщений уведомлений. Кстати, знаете ли вы, что в Европе признано считать людей с ...',
			'image.png'
		);
	}
	</script>
</head>
<body>
	<!-- При клике показываем уведомление -->
	<a href="javascript:showMesssage();">Показать уведомление</a>
</body>
</html>

Собственно, на этом можно и закончить, надеюсь урок вам понравился. Подписывайтесь на RSS, ибо дальше статьи и уроки будут еще вкуснее и полезней :)

Как видно на превью, я сделал только шесть цветов, остальные впилить не так уже и сложно, нужно лишь один стиль добавить. Для использования кнопок необходимо подключить один лишь файл buttons.css:

<link href="buttons.css" rel="stylesheet" type="text/css">

И конечно же вставить саму кнопку в нужное вам место в HTML исходник:

<input value="Press me please!" class="custom-button" type="submit" />

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

<input value="Фиолетовый" class="custom-button custom-button-purple" type="submit" />

Собственно в стилях кнопок из стандарта CSS3 используется градиенты, text-shadow, box-shadow, border-radius и opacity свойства, из-за этого код немного распух, а именно из-за префиксов, которые необходимо использовать для понимания различных браузеров.

И на этом все. Небольшой такой очередной фрибиес получился, который надеюсь кому-нить пригодиться :) В следующий раз ждите либо урок о кастомных контролов для HTML5 Video или же урок по созданию плагина модальных окон на jQuery, а может смогу порадовать еще каким-либо фрибиeсом.

Шаг первый: Проверка поддержки Notifications API в браузере

На сегоднешний день Notifications API поддерживается только в Google Chrome, поэтому перед использованием, необходимо проверить поддержку браузером, чтобы не возникли js-ошибки.

if (typeof window.webkitNotifications == 'undefined') {
	console.log('Notifications API не поддерживается вашим браузером.');
}

Шаг второй: запрос разрешения пользователя

Перед тем как отображать и использовать сообщения, необходимо запросить у пользоватея разрешение, на использование Notifications API, на вашем домене. Сделать это можно вызвав метод requestPermission:

webkitNotifications.requestPermission();

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

if (webkitNotifications.checkPermission() != 0) {
	webkitNotifications.requestPermission();
}

Есть три состояния прав:

• PERMISSION_ALLOWED [0]: Если пользователь разрешил использование нотификейшенов с текущего домена.
• PERMISSION_NOT_ALLOWED [1]: Если пользователь не предпринимал никаких действий.
• PERMISSION_DENIED [2]: Если пользователь запретил использование нотификейшенов с текущего домена.

Шаг третий. Создание обьекта сообщений

Ну и наконец перейдем к самому показу сообщения. Они деляться на два типа, первый тип это обычное текстовое сообщение, с иконкой, заголовком и самим сообщением, и второй тип сообщение с HTML содержимим.
Начнем с первого типа, для создания обьекта сообщения необходимо использовать метод createNotification и передать три параметра, путь к картинке, заголовок и само содержимое.

webkitNotifications.createNotification('icon.png', 'Заголовок', 'Проверка Notifications API');

Для создания сообщения второго типа, необходимо использовать метод createHTMLNotification, и передать ему только ссылку.

webkitNotifications.createHTMLNotification('http://sofcase.net/').show();

Только незабудьте присвоить обьекты переменным, иначе не сможете контролировать их :)

Шаг четвертый. События и обработчики

Теперь у нас есть обьект сообщений, но пользы от него мало если не показывать пользователю, давайте покажем. Для этого есть метод show.

notification.show();

И вот именно после обработки этого куска кода мы наконец увидим наше сообщение. Но одним методом show мы не ограничеваемся, также у нас есть метод close, который принудительно закрывает сообщение, и есть 3 обработчика события: onerror, ondisplay, onclose.

Собственно больше сказать нечего, функционал у данного API не широк, но по сути большего и не надо. Более подробно вы можете почитать на странице спецификации.

Добрый doctype

Вы можете, не задумываясь, сходу написать doctype для XHTML1.0 либо HTML4? Если можете, тогда у вас отличная память, если нет, тогда видимо вы строку доктайпа всегда копировали! HTML5 заботиться о нас и наших нервах, поэтому было решено сделать доктайп очень коротким и запоминающемся:

<!DOCTYPE html>

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

Экономим байты

Про короткий doctype мы уже поговорили, но в HTML5 решили укоротить не только его, теперь для тегов link и script атрибут type указывать необязательно. Система сама определит тип подключаемого содержимого.

<link href="style.css" rel="stylesheet" />
<script src="jquery.js"></script>

Но на тегах link и script не останавливаемся, так же для объявление кодировки страницы тег meta тоже стал в разы короче. Раньше необходимо было указывать целых два атрибута content и http-equiv :)

<meta charset="utf-8" />

Новые элементы управления и их атрибуты

Теперь поговорим про элементы управления. Среди них появились новые элементы, но помимо этого и новые атрибуты. Вспомните, как приходилось писать на JS плагины либо использовать сторонние, для создания нестандартных элементов управления, например слайдер, он же Range в HTML5. Но давайте сначала поговорим о атрибутах:

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

  <input type="text" name="search_words" placeholder="Search..." />

• autofocus — устанавливает фокус на элемент после загрузки страницы, пользователь сразу может вводить данные не используя лишние движения мышью.

  <input type="text" name="search_words" autofocus />

• required — делает элемент обязательным полем, используется для браузерского валидатора, также же можно проверять этот атрибут в свои плагинах-валидаторах.

  <input type="text" name="search_words" required />

• pattern — с помощью этого атрибута можно указывать шаблон для ввода данных, удобно для полей ввода мыла, даты и т.д.

  <input type="text" name="search_words" pattern="." />

Ну что же, а теперь можно поговорить и про новые элементы управления. Некоторые из них требуют свои атрибуты привязанные к ним например для range необходимы атрибуты min и max.

• search — обычное текстовое поле, только с небольшой кнопкой отмены (крестик) в правой части элемента, которая сбрасывает текст.

  <input type="search" />

• range — вот он, слайдер, можно использовать для выбора значения в некоторой величине, например от 50 до 290 с шагом 5. Свои атрибуты: min, max, step.

  <input type="range"  min="50" max="290" step="5" />

• number — этот элемент управления аналогичен слайдеру(range), вот только внешний вид у него другой, обычное текстовое поле с стрелками шага. Свои атрибуты: min, max, step.

  <input type="number" min="50" max="290" step="5" />

• date — позволяет пользователю выбрать дату

  <input type="date" />

• month — позволяет пользователю выбрать месяц (формат YYYY-MM)

  <input type="month" />

• week — позволяет пользователю выбрать номер недели года (формат YYYY-W[week])

  <input type="week" />

• time — тут и так все понятно, — выбор времени

  <input type="time" />

На этом про элементы управления мы остановимся, есть еще несколько (email, url, tel и т.д.). Многим из этих элементов управления, браузерам еще стоит улучшать их внешний вид или подход к юзабилити (например для date можно было бы прикрутить календарик и включать его только если у поля есть аттрибут calendar).

Еще пару слов

Помимо выше перечисленного, в HTML5 присутствует еще много новшеств, о которых мы поговорим немного позже, в частности о video, audio, canvas (2d/3d работа с графикой) и т.д. Хочу сказать, что HTML5 весьма удивителен и красив, о нем еще много чего не сказано, чего стоило сказать.

Шаг первый. Сырье

И так, давайте для начала подготовим все необходимое, у нас должен быть jQuery(либо подключаем с google api, что собственно и рекомендую всегда делать), а также две картинки для эффекта с фоном (первая и вторая), обе картинки я взял из ссылки, о которой писал в начале статьи.

Шаг второй. HTML и СSS

Теперь нам необходимо сверстать очень простую заготовку и написать для неё парочку стилей. Начнем с HTML, давайте в нем сразу подключим файл с CSS стилями(base.css):

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>jQuery Background Effect</title>
	<link rel="stylesheet" type="text/css" href="base.css" />
</head>
<body>
	<div id="wrap">
		<div id="effect_box">
			<div id="effect_box_inner"></div>
		</div>
	</div>
</body>
</html>

В след за HTML страницей, описываем, приведенные ниже в коде, стили в файле base.css:

body { padding: 0; margin: 0; font-size: 13px; font-family: Tahoma; }
#wrap { width: 100%; margin: 200px auto; }
#effect_box { background: #369 url('lowerBokeh.png') 0px 0px repeat; height: 300px; }
#effect_box_inner { background: url('upperBokeh.png') 0px 0px repeat; height: 100%; }

Думаю здесь понятно, что у нас получается двойной фон (так как обе картинки с альфа каналом), за счет вложенного контейнера effect_box_inner.
Теперь у нас есть готовые стили и сама страница, но пока наш контейнер(#effect_box), на котором должен быть эффект, статический. Давайте перейдем к активации эффекта.

Шаг третий. Оживление

Сначала подключаем jQuery c Google API, и описываем код, который придает нашему контейнеру красивой эффект фона. У главного контейнера мы будем перемещать фон по вертикале, для внутреннего по горизонтали, в итоге получается небольшой красивый эффект.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document.body).ready(function()
{
	var current_x = 0;
	var current_y = 0;

	setInterval(function()
	{
		$('#effect_box').animate({'background-position': '0 ' + --current_y + 'px'}, 30);
		$('#effect_box_inner').animate({'background-position': --current_x + 'px 0'}, 30);
	}, 60);
});
</script>

Получившийся эффект отлично работает в Google Chrome, Safari, Opera и в IE, а вот FireFox решил как всегда жутко тормозить. На этом думаю все, получился такой вот микро урок, и надеюсь материал кому-либо был интересен и познавателен. Естественно оставшиеся вопросы можно задать в комментариях :)

Перед тем как начать, нам необходимо посмотреть какое API предоставляет Envato Marketplace, найти его можно по этой ссылке. API возвращает данные в JSON формате, поэтому нам будет необходима функция json_decode (поддерживается начиная с PHP 5.2).

Шаг первый. Создаём заготовку

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

<?php
/*
Plugin Name: EnvatoStat
Plugin URI: http://wordpress.org/
Description: Plugin for Envato Marketplace users.
Author: Ваше имя
Version: 1.0
Author URI: http://wordpress.org/
*/

// Создаем хук
add_action('wp_dashboard_setup', 'envatostat_setup');
function envatostat_setup()
{
	wp_add_dashboard_widget('envatostat_widget', 'EnvatoStat', 'envatostat_widget');
}

// Функция самого виджета
function envatostat_widget()
{
	// ...
}

На событие wp_dashboard_setup мы вешаем вызов нашей функции envatostat_setup, в которое проделывается аналогичное только для добавление виджета в dashboard.

Шаг второй. Делаем страницу настроек

Страница с настройками необходимо для заполнения данных пользователем, а именно имя аккаунта и API ключ от Envato Marketplace. В конец файла добавляем вот такой код:

// Добавляем пункт меню
add_action('admin_menu', 'envatostat_create_menuitem');
function envatostat_create_menuitem()
{
	add_options_page('EnvatoStat Settings', 'EnvatoStat Settings', 'manage_options', 'envatostat_menuitem', 'envatostat_settings_page');
}

// Страница настроек
function envatostat_settings_page()
{
	echo '<div class="wrap">
	<div id="icon-options-general" class="icon32"><br /></div>
	<h2>EnvatoStat Settings</h2>';

	if($_REQUEST['do'] == 'save')
	{
		update_option('envato_username', $_REQUEST['envato_username']);
		update_option('envato_apikey', $_REQUEST['envato_apikey']);
		echo '<div id="message" class="updated"><p><strong>Changes saved</strong></p></div>';
	}

	echo '<form action="" method="post">
	<table class="form-table">
	<tr>
		<td width="160">You username on Envato:</td>
		<td><input type="text" name="envato_username" size="20" value="' .  get_option('envato_username', '') . '" /></td>
	</tr>
	<tr>
		<td>You API key of Envato:</td>
		<td><input type="text" name="envato_apikey" size="45" value="' .  get_option('envato_apikey', '') . '" /></td>
	</tr>
	<tr>
		<td></td>
		<td><input type="submit" name="submit" value="Save changes" class="button-primary" /></td>
	</tr>
	</table>
	<input type="hidden" name="do" value="save" />
	</form>';
}

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

Шаг третий. Сердце плагина

Ну вот и подошли мы к основному, помните функцию envatostat_widget, в неё мы будем писать код, который ниже. Но для начала поговорим о том, что будет происходить. Выдераем данные о аккаунта из WordPress и проверяем, если они не пустые, тогда посылаем запрос к апи на получение состоянии баланса пользователя. Когда получим данные, распарсиваем их и если они вылидны, тогда посылаем второй запрос на последние продажи пользователя, их мы аналогично распарсиваем и если они валидны выводим.

$username = get_option('envato_username', '');
$apikey = get_option('envato_apikey', '');

if($username != '' && $apikey != '')
{
	$json_url = "http://marketplace.envato.com/api/v1/" . $username . "/" . $apikey . "/account.json";
	$api = @file_get_contents($json_url);
	$data = json_decode($api);
	if($data == null)
	{
		echo "Error response data :(";
	}
	else
	{
		echo '<img src="' . $data->account->image . '" style="float: left;" />
		<div style="float: left; margin-left: 10px;">
		<table width="100%" cellspacing="6">
		<tr>
			<td width="150">Your balance:</td>
			<td>$' . $data->account->balance . '</td>
		</tr>
		<tr>
			<td>Commision rate:</td>
			<td>' . $data->account->current_commission_rate * 100 . '%</td>
		</tr>
		<tr>
			<td>Total deposits:</td>
			<td>$' . $data->account->total_deposits. '</td>
		</tr>
		<tr>
			<td>Total earnings:</td>
			<td>$' . $data->account->available_earnings;. '</td>
		</tr>
		</table>
		</div>
		<div class="clear"></div>
		<hr size="1" color="#dcdcdc" />';

		$json_url = "http://marketplace.envato.com/api/v1/" . $username . "/" . $apikey . "/statement.json";
		$api = @file_get_contents($json_url);
		$data = json_decode($api);
		if($data == null)
		{
			echo "Error response data :(";
		}
		else
		{
			echo '<table width="100%" cellspacing="6">';
			foreach($data->statement as $stat)
			{
				$stat->description = str_replace('sold ', '', $stat->description);
				$stat->description = str_replace('w/ rate of ', '(rate of ', $stat->description) . ')';
				$datetime = new DateTime($stat->occured_at);

				echo '<tr>';
				echo '<td width="30"><span style="font-size:10px;color:' . ($stat->kind == "sale" ? "green" : "red") . '">' . $stat->kind . '</span></td>';
				echo '<td width="60" align="center"><span style="font-size:10px;"><strong>$' . $stat->amount . '</strong></span></td>';
				echo '<td><span style="font-size:10px;">' . $stat->description . '</span></td>';
				echo '<td width="65" align="right"><span style="font-size:10px;">' . $datetime->format("d.m.Y") . '</span></td>';
				echo '</tr>';
			}
			echo '</table>';
		}
	}
}
else
{
	echo "Please enter your username and API key of Envato, on widget settings page.";
}
?>

Теперь наш плагин, готов осталось его лишь установить, заливаем наш файл с плагином в вордпресс, в папку /wp-content/plugins/, затем в панели управления включаем, теперь он полноценно работает. На этом все!

Начнем также, как и в прошлом уроке, начнем с CSS:

.boxmessage
{
	position: fixed;
	left: 0; right: 0;

	background: #333;
	border-bottom: 1px solid #666;
	padding: 25px;
	cursor: pointer;

	color: #999; font-family: Tahoma; font-size: 13px;
}
.boxmessage h3
{
	color: #fff; font-size: 17px; font-weight: normal;
	margin: 0 0 10px 0; padding: 0;
}
.error
{
	background: rgba(125, 0, 0, .5);
	color: #fff;
}

Приступаем ко второму шагу, к HTML разметке, давайте сразу создадим файл плагина и подключим его вместе с jQuery, а также добавим в HTML обработку событий для показа сообщений:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jBoxMessage</title>

	<link href="base.css" rel="stylesheet" type="text/css" />
	<link href="jboxmessage.css" rel="stylesheet" type="text/css" />

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.jboxmessage.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document.body).ready(function()
	{
		$('#show').click(function() { $.jboxmessage('Тестовое сообщение', 'Это просто тестовое сообщение', 'top') });
		$('#show_error').click(function() { $.jboxmessage('Ой, какая досада', 'Что-то пошло не так, как следовало :(', 'bottom', 'error') });
	});
	</script>
</head>
<body>

	<a href="javascript:;" id="show">show message</a>
	<a href="javascript:;" id="show_error">show error message</a>

</body>
</html>

Остался последней шаг, код нашего плагина, приступаем к нему:

$.jboxmessage = function(header, content, position, class_name)
{
	// create box of message
	var boxmessage = $('<div class="boxmessage ' + class_name + '"><h3>' + header + '</h3>' + content + '</div>');

	// set position
	if(position == 'top')
	{
		$(boxmessage).css('top', 0);
	}
	else
	{
		$(boxmessage).css('bottom', 0);
	}

	// close on click
	$(boxmessage).click(function()
	{
		$(this).animate({opacity: 0}, 500, function()
		{
			$(this).remove();
		});
	});

	// show message
	$(boxmessage).css('opacity', 0).prependTo(document.body).animate({opacity: 1}, 500);
};

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

Вставляем кнопку с помощью фрейма

Все довольно просто, необходимо просто вставить фрейм с некоторыми задаными параметрами:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http://my.url.ru" style="width:130px; height:50px;"></iframe>

Вставляем кнопку с помощью Javascript

Этот метод аналогично прост, необходимо подключить специальный js файл от Твиттера:

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

В место где должна красоваться кнопка, вставить ссылку со специальным классом:

<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Параметры, которые может принимать Твиттер

Кастомизация данных для ретвита происходить по параметрам переданным в URL, либо в data атрибутах. Вот сам списочек:

• url — ссылка на статью [атрибут data-url]
• via — через что было ретвитнуто [data-via]
• text — текст сообщения [data-text]
• count - показывать количество ретвитов или нет [data-count] (none, horizontal, vertical)
• related — насколько я понял, это похожие аккаунт [data-related]

Ну вот думаю и все. Если есть вопросы спрашиваем в комментариях, помогу :) По поводу распространения кнопки, думаю она скоро станет висеть на каждом блоге, но вот захотят ли люди убирать кнопку ретвита от сервиса TweetMeme?

Первым делом, что мы сделаем это естественно определим CSS стили для сообщений и самого стека. Сделаем стандартные сообщения темного фона с прозрачностью в 70% (прошу заметить я в CSS стилях использую RGBA, оно работает лишь в браузерах поддерживающие CSS3), также определим стили для контейнера сообщений (для стека), он у нас будет в правом верхнем углу.

#jm_stack_box {
	position: fixed; top: 15px; right: 15px;
	width: 220px;
}
#jm_stack_box .jm_message {
	background-color: #000;
	background: rgba(0, 0, 0, .7);
	padding: 10px; margin: 0 0 15px 0;
	font-family: Tahoma; font-size: 11px;
	color: #fff;
	cursor: pointer;

	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
#jm_stack_box .jm_message h3 {
	font-size: 15px; font-weight: normal;
	padding: 0; margin: 0 0 5px 0;
}

Ну вот, теперь у нас есть готовые стили. Пора бы переходить к самому плагину. Сообщения у нас будут иметь такие параметры: заголовок, текст, время жизни и поле для переопределения класса.
И так, давайте создадим для начала тело плагина:

(function($) {
	$.jmessage = function(header, message, lifetime, class_name) {
		// ...
	};
})(jQuery);

Теперь перейдем к добавлению сообщений. При добавлении нам нужно получить ссылку на контейнер сообщений(опять же, — стек). Если не удастся получить, тогда мы его создаем, после создаём контейнер сообщения и показываем его в стеке. Сразу вешаем триггер на клик, что бы при клике на сообщение оно скрывалось и удалялось, ну и конечно же устанавливаем таймер для автоматического закрытия сообщения, если время жизни сообщения больше 0.

(function($) {
	$.jmessage = function(header, message, lifetime, class_name) {
		// получаем стек
		var stack_box = $('#jm_stack_box');

		// если его нет, тогда создаём
		if (!$(stack_box).length) {
			stack_box = $('<div id="jm_stack_box"></div>').prependTo(document.body);
		}

		// создаем контейнер сообщения
		var message_box = $('<div class="jm_message ' + class_name + '"><h3>' + header + '</h3>' + message + '</div>');

		// эффектно показываем
		$(message_box).css('opacity', 0).appendTo('#jm_stack_box').animate({opacity: 1}, 300);

		// устанавливаем триггер, при клике закрывать сообщение
		$(message_box).click(function() {
			$(this).animate({opacity: 0}, 300, function() {
				$(this).remove();
			});
		});

		// устанавливаем таймер на закрытие сообщения
		if ((lifetime = parseInt(lifetime)) > 0) {
			setTimeout(function() {
				$(message_box).animate({opacity: 0}, 300, function() {
					$(this).remove();
				});
			}, lifetime);
		}
	};
})(jQuery);

Теперь наш плагин готов к использованию, вызывать сообщения можно вот таким образом:

$.jmessage('Заголовок', 'Текст сообщения.', 3000, 'test_message');

Теперь добавьте в CSS еще два стиля, для кастомных классов сообщений, а именно сообщение о ошибке и сообщение об успешном выполнении какой-либо операции:

#jm_stack_box .jm_message_error {
	background-color: #c00;
	background: rgba(125, 0, 0, .5);
}
#jm_stack_box .jm_message_success {
	background-color: #0c0;
	background: rgba(0, 125, 0, .5);
}

На этом все, если есть вопросы задавайте их в комментариях. Не забывайте экспериментировать, например можно сделать дополнительный блок (с текстом «закрыть все сообщения») в стеке при клике на который, будут закрываться все открытые сообщения.

И так начнем. В первую очередь нам нужен HTML макет элемента, вот какой он должен у нас быть:

<div class="progressbar" id="pb">
	<div>100%</div>
</div>

Класс главного дива описываем его визуальные свойства, идентификатор позволит нам манипулировать им в jQuery. Далеко не отходим и сразу же описываем CSS код прогрессбара:

div.progressbar
{
	border: 1px solid #db7a15;
	background-color: #efefef;

	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

div.progressbar div
{
	background: url('bg.gif') 0px 0px repeat;
	height: 20px;
	text-align: center;
	font-size: 11px; font-weight: bold; color: #fff; line-height: 20px;

	text-shadow: 0px 0px 3px #000;
	-o-text-shadow: 0px 0px 3px #000;
	-moz-text-shadow: 0px 0px 3px #000;
	-webkit-text-shadow: 0px 0px 3px #000;

	border-radius: 2px;
	-o-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

Так, с HTML и CSS мы решили, у нас теперь есть готовый прогрессбар, осталось создать для него анимированый фон и функцию манипуляции, смотрим js:

// когда сайт загружен
$(document.body).ready(function()
{
	// вешаем событие
	$('a').click(function()
	{
		// меняем состояние прогрессбара
		$('#pb div').stop(true).animate({width: $(this).attr('class') + '%'},
		{
			// пошагово ищменяя текст состояния
			step: function(now)
			{
				// записываем в текст
				$(this).text(Math.round(now) + '%');
			},
			duration: 2000
		});
	});

	// заставляем фоновую картинку анимировать
	setInterval(function()
	{
		x = parseInt($('#pb div').css('background-position-x')) + 1;
		$('#pb div').css('background-position-x', '' + x + 'px');
	}, 35);
});

Готово! Манипуляция происходить при нажатии на ссылки в которых в классе указан процент нового состояния, если не совсем понятно смотрите в исходники, либо пример :)

Из недостатков: случаями непонятное поведение текста состояния при проценте меньше 3, а также Mozilla Firefox и Опера, уперто не хотят анимировать свойство background-position-x, из-за этого в них фон статический, а не динамический :)

При создании кнопок использовал свойства border-radius, gradients, box-shadow, text-shadow. Всего готово восемь цветов: синий, красный, зеленый, серый, пурпурный, голубой, оранжевый и бурый. Использовать очень просто: создаем поле формы (input), с типом submit либо button и присваиваем класс :)

Пример использования кнопок:

<input type="submit" value="Я кнопка" class="button green" />

Ах, да кнопки имеют два состояния, первый это обычный, второй это наведенный (hover). Вот вроде бы все, еще хотелось бы услышать конкретные мнения в комментариях :)

И так начнем с HTML каркаса, давайте создадим его. У нас будет общий контейнер, он будет самим аккордеоном, в нем будет последовательно идти, заголовок H3, блок, H3, блок и т.д. Где H3 это заголовок секции, а блок это её содержимое. Вот такой HTML у нас должен получится:

<div id="accordion">
	<h3 class="head">Секция #1</h3>
	<div class="block">Текст для секции #1</div>
	<h3 class="head">Секция #2</h3>
	<div class="block">Текст для секции #2</div>
	<h3 class="head">Секция #3</h3>
	<div class="block">Текст для секции #3</div>
</div>

Теперь когда у нас есть готовый каркас, нужно определить для него стили. Из разряда CSS3 для заголовка и для блока определим скругленные углы на 3 пикселя (свойство border-radius), для заголовка отдельно определим тень (свойство text-shadow).

#accordion h3.head {
	margin: 1px 0; padding: 5px 10px;
	font-size: 17px; font-family: Tahoma; font-weight: normal; color: #fff;
	background: #333;
	cursor: pointer;

	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;

	text-shadow: 1px 1px 0px #000;
	-o-text-shadow: 1px 1px 0px #000;
	-moz-text-shadow: 1px 1px 0px #000;
	-webkit-text-shadow: 1px 1px 0px #000;
}

#accordion div.block {
	padding: 10px; margin: 0;
	font-size: 13px; font-family: Tahoma; font-weight: normal; color: #888;
	background: #efefef;

	border: 1px solid #ccc;
	border-radius: 3px;
	-o-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Также необходимо определить стиль для активной секции, например сделаем фон синего цвета. Добавим в конец CSS эти строчки:

#accordion h3.active {
	background: #369;
}

Ну вот вроде бы со стилями и все, теперь можно перейти ко вкусному, к jQuery :) И так не большой алгоритм: при загрузки страницы скрываем все секции кроме первой, делаем первую секцию активной, а также вешаем обработчик события на клик по секции. Вот собственно сам js-файл аккордеона:

// Когда страница полностью загружена
$(window).ready(function() {
	// Скрываем все секции кроме первой
	$('#accordion > div:not(:first)').hide();
	// Делаем первую секцию активной
	$('#accordion h3:first, #accordion div:first').addClass('active');
	// Если пользователь кликнул на секцию
	$('#accordion > h3').click(function() {
		// Сбрасываем все секции
		$('#accordion > h3').removeClass('active');
		$('#accordion > div').hide();

		// Делаем активной на которую кликнули
		$(this).addClass('active');
		$(this).next().addClass('active').show();
	});
});

Ну вот, теперь наш аккордеон полноценно работает. Но, все же чего-то в нем не хватает, давайте добавим анимации для наглядности.

// Когда страница полностью загружена
$(window).ready(function() {
	// запоминаем высоту и отступы каждого блока
	$('#accordion > div').each(function() {
		$(this).data('height', $(this).height());
		$(this).data('padding-top', $(this).css('padding-top'));
		$(this).data('padding-bottom', $(this).css('padding-bottom'));
	});

	// Скрываем все секции кроме первой
	$('#accordion > div:not(:first)').hide();
	// Делаем первую секцию активной
	$('#accordion h3:first, #accordion div:first').addClass('active');
	// Если пользователь кликнул на секцию
	$('#accordion > h3').click(function() {
		// Сбрасываем все секции
		$('#accordion > h3').removeClass('active');
		$('#accordion > div:visible').animate({
			height: 0,
			'padding-top': 0,
			'padding-bottom': 0
		}, 500, function() { $(this).hide() });

		// Делаем активной на которую кликнули
		$(this).addClass('active');
		box = $(this).next().addClass('active');
		$(box).animate({
			height: $(box).data('height'),
			'padding-top': $(box).data('padding-top'),
			'padding-bottom': $(box).data('padding-bottom')
		}, 500);
	});
});

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

В первую очередь хочу сказать, что движок не на столько мощный, как многие гиганты типа Magento. Так как нужно было быстро реализовать этот движок, а именно за одну неделю, в качестве шаблонизатора я решил использовать сторонний шаблонизатор Smarty. В качестве js-библиотеки использовал конечно же мой любимый jQuery, а в качестве визуального редактора пришлось использовать мой ненавистный TinyMCE.

Когда реализовывал ядро, старался придерживаться паттерна проектирования MVC. ЧПУ реализовано динамически, т.е. в файле .htaccess достаточно сделать перенаправление на index.php и забыть про него.

Теперь поговорим о том, что может магазин. Ну в первую очередь, это естественно полное управления товарами и категориями, заказами и статическими страницами. Корзина реализована для пользователей и гостей, если вы добавляли товары в корзину под гостем, то после авторизации ваша корзина будет синхронизирована с пользовательской. Заказ могут сделать только зарегистрированные пользователи, т.е. регистрироваться придется все равно :)

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

В дальнейшем планирую сделать оплату заказов по PayPal, WebMoney, MoneyBookers, Visa и MasterCard, характеристики товаров и сравнение, также сделать состояния заказов (ожидает оплаты, оплачен, доставлен), управление глобальными настройками движка через панель управления, и еще несколько небольших мелочей.

И так начнем по порядку. Для получения своей статистики просмотра сериалов, необходимо в их базе сериалов, отметить какие сериалы вы уже просмотрели, перестали смотреть, либо планируете смотреть. После отметки сериалов на главной странице отображается расписание новых эпизодов сериалов, которые вы смотрели. Немного ниже есть ссылка на раздел, где показывает, какие новые эпизоды вышли, и там же можно отметить их просмотренными.

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

У каждого сериала есть своя статистика, ваш рейтинг, общий рейтинг, рейтинг на IMDB и Кинопоиска, еще есть общая длительность сериала и количество смотрящих сериал (также показывает процент смотрящих от общей аудитории MyShows). Также показывается статус сериала: продолжается, закончен и новый сериал.

MyShows.ru предоставляет каждому пользователю его статистику в виде юзербара, который можно запихнуть куда угодно :) Например вот мой юзербар:

За все время я просмотрел 5316 эпизодов, потратив на них 2499 часов(104 дня). Ну в общем-то все, регистрируйтесь и следите за своей статистикой.

И так начнем, делаем для кнопки закругленные углы, тень для текста и самой кнопки, а также сам градиент.

.button
{
	border: 1px solid #3366cc;
	border-radius: 3px;
	padding: 5px 15px;
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #3399cc), color-stop(1, #3399ff));
	background: -moz-linear-gradient(bottom, #3399cc, #3399ff);
	color: #fff;
	text-shadow: 1px 1px 0px #069;
	font-size: 13px;
	font-family: Tahoma;
	cursor: pointer;
	box-shadow: 0px 0px 6px #99ccff;
}

После этого делаем для кнопки ховер, для наглядности и что бы она действительно была кнопкой, а не казалась статическим элементом.

.button:hover
{
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #0066cc), color-stop(1, #3399cc));
	border: 1px solid #006699;
}

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

.button[disabled=disabled]
{
	background: -webkit-gradient(linear, left bottom, left top,
		color-stop(0, #CCC), color-stop(1, #DDD));
	background: -moz-linear-gradient(bottom, #CCC, #DDD);
	border: 1px solid #BBB;
	text-shadow: 1px 1px 0px #DDD;
	color: #999;
	cursor: default;
	box-shadow: 0px 0px 6px #BBB;
}
.button[disabled=disabled]:hover
{
	background: -webkit-gradient(linear, left bottom, left top,
 		color-stop(0, #CCC), color-stop(1, #DDD));
	background: -moz-linear-gradient(bottom, #CCC, #DDD);
	border: 1px solid #BBB;
}

Ну вот на этом все. Еще раз напомню, что данный пример отлично выглядит только в Google Chrome, Safari и Mozilla Firefox, так как только они на данный момент поддерживают градиенты, но можно вместо них ставить картинки градиентами, тогда и в остальных браузерах будет нормально отображаться, за исключением ослика :)

Resize

Это свойство позволяет пользователю динамически изменять размер элемента, к которому он применен. Например как по умолчанию textarea в Google Chrome. Свойство resize принимает один параметр, тип ресайза (hotizontal — горизонтальный, vertical — вертикальный, both — и тот и тот).

Так же для работы этого свойства нужно указывать overflow. Максимальный размер устанавливается используя max-width и max-height, а минимальный либо width и height, либо min-width и min-height. Это свойство поддерживается только в Safari и Google Chrome.

Background size

Свойство background-size позволяет задавать фиксированный размер фона. Принимает два значения, которые определяют размер фона (можно передавать одно, которое будет дублироваться). Принимает значения в пикселях, процентах и значение auto.

Как можно видеть картинка ужата по средствам свойства background-size. Это свойство не поддерживается только в Mozilla Firefox в данный момент.

Transition

Ну вот и самое вкусное, с появлением transition можно уже делать много анимационных вкусностей с элементами, не используя javascript. Синтаксис у свойства transition довольно простой:
transition: color 3s linear 4s;

Первое значение это свойство, к которому привязывается анимация, второе время выполнение, третий параметр это тайминг функция (о них немного ниже) и четвертый параметр это задержка. Нужно также не забывать что свойство transition множественное, т.е. через запятую можно указывать несколько правил для него, либо можно вместо первого параметра указать all, и тогда анимация будет применяться ко всем свойствам. В Mozilla Firefox могут быть проблемы с анимацией.

Для примера анимации — наведите на синий блок. Свойство transition имеет дочерние свойства transition-duration, transition-delay, transition-property и transition-timing-function. Теперь поговорим о тайминг функциях, их всего шесть: default, linear, ease-in, ease-out, ease-in-out и cubic-bezier. Эти тайминг функции говорят как будет вести себя анимация, например default в начале и в конце анимации замедляется, а linear всю анимацию выполняет на одинаковом интервале. Подробнее о тайминг-функциях можно почитать в спецификации CSS3.

Ну что же, приступим. У нас есть обычное текстовое поле для ввода текста, то есть <input> со стандартными браузерскими стилями, выглядит он вполне нормально и обычно, но мы сделаем его красивым и эффектным.

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

input.example
{
     border-radius: 3px;
     border: 1px solid #AAA;
     padding: 3px 5px;
     color: #888;
     width: 140px;
     box-shadow: 0px 0px 5px #CCC;
}

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

input.example
{
     border-radius: 3px;
     border: 1px solid #AAA;
     padding: 3px 5px;
     color: #888;
     width: 140px;
     box-shadow: 0px 0px 5px #CCC;
     transition: all 300ms ease-in;
}
input.example:hover
{
     border-color: #66cccc;
     box-shadow: 0px 0px 6px #99ccff;
     color: #666;
}
input.example:focus
{
     border-color: #6699cc;
     box-shadow: 0px 0px 6px #66ccff;
     color: #333;
}

Теперь смотрим что получилось, кажется весьма неплохо. Не забывайте про приставки к свойствам CSS3 для разных браузеров. В следующий раз расскажу как создавать красивые кнопки (buttons) используя CSS3.

Border Radius

Данное свойство используется для закругление углов блочных элементов. Синтаксис у него простой, как и у margin либо padding. Также это свойство имеет под свойства: border-radius-topleft (верхний левый угол), border-radius-topright (верхний правый угол), border-radius-bottomleft (нижний левый угол), border-radius-bottomright (нижний правый угол).

Text Shadow

Я до сих пор помню как я подставлял под необходимый мне текст блок с таким же содержимым и смещал его на один пиксель вниз и вправо, и все это лишь для того, чтобы добиться красивого эффекта тени. Теперь этого делать не приходится ведь есть свойство text-shadow.

Синтаксис у него простой: text-shadow: 1px 1px 0px #000;
Первый параметр смещение тени по оси x, второй по оси y, третий параметр размытие, и четвертый параметр это цвет тени.

Box Shadow

Это свойство полностью аналогично свойству text-shadow, только применяется к блочным элементам, а не к тексту. Синтаксис и поддержка в браузерах также аналогичны к свойству text-shadow.

Множественные фоны

Еще одно интересное свойство, его использование очень легкое и простое. Объявление фона происходит аналогично спецификации CSS2.1, только дополнительные фоны нужно указывать через запятую.

background-image: url('url_image_1'), url('url_image_2');
background-repeat: no-repeat, no-repeat;
background-position: top left, top right;

Примечания для новичков

Как вы можете видеть в примерах я описывал свойства без всяких приставок, которые все еще обязательны для поддержки этих свойств в различных браузерах, пожалуйста не забывайте о них. Приставка -o- для Opera, приставка -moz- для Mozilla Firefox, приставка -webkit- для Safari и Google Chrome (некоторые свойства уже понимает и без приставки). Для множественных фонов приставки не нужны.

Список стоков

• ActiveDen (мин. стоимость работы $1)
  Сток для как для флеш-аниматоров, так и для флеш-программистов.
• AudioJungle (мин. стоимость работы $1)
  На этом стоке можно продавать свои музыкальные композиции.
• ThemeForest (мин. стоимость работы $5)
  Этот сток для верстальщиков, тут и HTML шаблоны и готовые шаблоны для WordPress, Joomla и т.д.
• VideoHive (мин. стоимость работы $2)
  Если же вы любите заниматься видео-монтажом и видео-эффектами, тогда вам нужен этот сток.
• GraphicRiver (мин. стоимость работы $1)
  Этот сток рай для дизайнера, тут можно продавать все что можно нарисовать :)
• 3DOcean (мин. стоимость работы $1)
  Сток для 3D аниматоров и дизайнеров, тут продают всякие модели, текстуры и т.д.
• CodeCanyon (мин. стоимость работы $5)
  Ну вот и сток для веб-разработчиков, тут можно продавать работы на технологиях PHP, Javascript, ASP.NET и Java. C недавних пор появились категории CSS, HTML5, Плагины(WP, Magento и т.д.)

Подробнее о аккаунтах

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

Цену на ваш товар выставляет модератор после проверки вашей работы. При продаже ваших работ вам платят процент, если тип вашего аккаунта — обычный, тогда вам платят 25% от стоимость работы, если ваш тип аккаунта эксклюзивный (бесплатный) вам платят от 40% до 70%, но вы не имеете права продавать свои работы на других стоках(имеется введу те работы, которые вы продаете на их стоке).

Перед добавлением своих работ на каждом стоке необходимо пройти их небольшой тест из 10 вопрос, которые связаны с авторскими правами. Ну вроде как все рассказал, успешных вам продаж.

Тут в очередной раз мне пригодились знания C#. Потратив в общей сумме пол часа, утилита была готова и работала на отлично. Все что ей нужно это выбрать папку с шаблоном, затем утилита сама найдет XML файл шаблона и запишет в него все файлы в этом шаблоне. Саму утилиту можно скачать здесь.

Так же полностью обновил страницу «Обо мне», страница «Портфолио» пока что не доступна, добавил в шаблон поддержку древовидных комментариев. По поводу дизайна, хочу заметить, что поддержка IE6-8 не осуществлялась, так как я ярый ненавистник этого браузера (в IE8 все отображается нормально и ничего не съезжает, но всякие красивости, например закругленные уголки и тени на текстах, работать не будут так как они реализованы по средствам CSS3).