QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Подготовка изображения

Сначала нам необходимо нарисовать эти иконки. Для этого создаем новый документ в Фотошоп. Для красоты я добавлю фоновый радиальный градиент от #99ccff к #6699ff.

Выберите инструмент Rectangular Marquee Tool (прямоугольное выделение) и установите параметры на фиксированную ширину, для того, чтобы размер области выделения был 48х48px. Технология следующая: создаете область выделения на новом слое, затем заливаете эту область черным цветом. Потом создаете еще один новый слой и повторяете процедуру. Главное, чтобы каждый прямоугольник был на отдельном слое. Должно получиться что-то подобное:

Теперь выберите слой с верхним прямоугольником. Это будет иконка Twitter. Дважды щелкните по слою и примените следующие стили:

Stroke

Gradient Overlay

Вот, что получилось:

Теперь перейдите к слою со вторым прямоугольником. Это будет у нас Facebook. Также примените следующие стили к этому слою:

Stroke

Gradient Overlay

Вот, что получилось:

Также действуем и с третьим слоем. Это будет иконка RSS-ленты:

Stroke

Gradient Overlay

Итог наших манипуляций:

Теперь скачиваем логотипы для иконок и размещаем их по центру в соответствующих квадратах:

И применяем к слоям с логотипами стиль Drop Shadow для добавления тени:

Итог:

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

Используя инструмент Rectangular Marquee Tool создайте область выделения вокруг иконок:

Затем скопируйте изображение Edit > Copy Merged, создайте новый документ (размер программа подставит автоматом) File > New и вставьте скопированное изображение Edit > Paste. Сохраните изображение в формате .png.

Создание HTML страницы

Давайте начнем с основного документа – HTML страницы, на которой будут размещены закладки. Вот структура документа:

<ul id="social-menu">
 <!-- Кнопка Twitter -->
 <li>
 <a class="twitter" href="https://twitter.com/#!/Quick_TUTS"> <span>1,441 Последователей</span> </a>
 </li>
 <!-- Кнопка Twitter. Конец -->
 <!-- Кнопка Facebook Button -->
 <li>
 <a class="facebook" href="http://www.facebook.com/pages/QuickTUTS-%D0%A3%D1%80%D0%BE%D0%BA%D0%B8-%D0%A4%D0%BE%D1%82%D0%BE%D1%88%D0%BE%D0%BF/107874662604382 "> <span>0 Друзей</span> </a>
 </li>
 <!-- Кнопка Facebook. Конец -->
 <!-- Кнопка RSS -->
 <li>
 <a class="rss" href="http://feeds.feedburner.com/Quicktuts "> <span>255 Подписчиков</span> </a>
 </li>
 <!-- Кнопка RSS. Конец -->
</ul>

Ну тут все понятно. Мы создали список с ссылками на наши соц. сети и RSS-ленту. Теперь приступим к оформлению с помощью стилей CSS3.

Сначала мы уберем маркеры и сделаем расстояние между закладками 15px:

#social-menu li {
	list-style: none; /*Убираем маркеры*/
	margin-bottom:15px; /*Расстояние между закладками*/
}

Теперь оформим сами кнопки, установим фоновым изображением наш спрайт:

#social-menu a {
	background: url('social-menu-sprite.png') no-repeat; /*Устанавливаем фоном для закладок наш спрайт*/
	height: 48px;
	width: 48px;
	display: block;
	position: relative;
}

Теперь применим стили к текстовым элементам (количество подписчиков и т.д.). Они обрамлены тегом span:

#social-menu span {
	width: 0;
	left: 47px;
	padding: 0;
	position: absolute;
	overflow: hidden; /* Изначально эти элементы невидимы */
	font-size: 16px;
	font-weight: bold;
	letter-spacing: -1px;
	white-space: nowrap;
	line-height: 46px;
	-webkit-transition: 0.30s; /*---------------------------------------------------------*/
	-moz-transition: 0.30s;    /* Плавное изменение свойств объекта в течение 0.3 секудны */
	transition: 0.30s;         /*---------------------------------------------------------*/
}

Обратите внимание, что изначально текстовые элементы невидны. Появятся они у нас при наведении курсора мыши на закладку. А вот скорость появления элементов определяется свойством transition. Давайте опишем появление элементов в стилях:

#social-menu a:hover span { /* Наведение курсора мыши на объект */
	width: auto;
	padding: 0 20px;
	overflow: visible; /* Делаем элементы видимыми */
}

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

/* Кнопка Facebook */
#social-menu .facebook {
	background-position: left -48px; /* Смещаем спрайт на 48 пикселей вниз */
}
#social-menu .facebook span {
	border-right:1px solid #233b6c;
	border-top:1px solid #233b6c;
	border-bottom:1px solid #233b6c;
	background-color: #325396;
	color: #fff;
}
/* Кнопка RSS-ленты */
#social-menu .rss {
	background-position: left bottom;
}
#social-menu .rss span {
	border-right:1px solid #dc762d;
	border-top:1px solid #dc762d;
	border-bottom:1px solid #dc762d;
	background-color: #f5a33f;
	color: #fff;
}

Демо

Надеюсь, урок будет Вам полезен при создании собственного сайта. Спасибо за внимание!