Сегодня мы создадим забавные социальные закладки, которым не требуется JavaScript, так как они основаны на чистом CSS. Мы повесим повернутые уменьшенные изображения социальных закладок на бельевую веревку и посадим на нее милую птичку Twitter. Это просто пример, и, конечно, вы можете добавить любые социальные закладки, которые подойдут для вашей страницы. Это решение демонстрационное, и оно может показаться кому-то слишком крупным.

Демонстрация работы – Скачать исходный код

В этом уроке вы узнаете о:

1. абсолютном расположении элементов;

2. использовании фоновых изображений;

3. использовании отрицательных значений позиционирования;

4. ссылках на социальные закладки для статических страниц и для страниц на WordPress.

Итак, давайте начнем с разметки.

HTML

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

<div>
<div></div>

<a href="http://digg.com/submit?phase=2&url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>

<a href="http://www.technorati.com/faves?add=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>

<a href="http://www.mixx.com/submit?page_url=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>

<a href="http://www.stumbleupon.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>

<a href="http://reddit.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>

<a href="http://twitthis.com/twit?url=http://http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"></a>
</div>

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

Адрес ссылки: <?php echo get_permalink() ?> 

Название: <?php the_title(); ?>

Вы можете использовать сервис, например iFeedReaders, чтобы создать эти ссылки.

CSS

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

.cl_container{
width:100%;

height:190px;

position:relative;

background:transparent url(../images/cl.png) repeat-x 0% 40px;
}

У контейнера будет повторяющееся фоновое изображение прищепки. Горизонтальное положение будет 0, что означает, что изображение будет расположен слева, и вертикальное положение будет 40px, что означает, что оно будет на 40px выше.

Теперь мы определим общие свойства ссылочных элементов:

.cl_container a{
width:130px;

height:130px;

position:absolute;

top:32px;

outline:none;

opacity:0.8;

}

.cl_container a:hover{

opacity:1.0
}

Ширина и высота элементов должны быть такими же, как к изображений, которые Вы используете. Используемые здесь изображения довольно большие. Значения свойства положения сверху будет 32px, так как мы хотим, чтобы выглядело так, как будто уменьшенные изображения прикреплены к бельевой веревке. Для браузеров, поддерживающих свойство прозрачности, мы задаем начальное значение прозрачности как 0.8 и 1.0, когда пользователь наводит указатель мыши на изображение. Это создаст изящный эффект. Вы также можете использовать это свойство фильтра для браузера Internet Explorer: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80)

У уменьшенных изображений будут такие свойства:

a.digg{
left:22px;

background:transparent url(../images/digg_koi.png) no-repeat top left;

}

/* каждое следующее на 168px больше */

a.tech{

left:190px;

background:transparent url(../images/technorati_koi.png) no-repeat top left;

}

a.mixx{

left:359px;

background:transparent url(../images/mixx_koi.png) no-repeat top left;

}

a.reddit{

left:529px;

background:transparent url(../images/reddit_koi.png) no-repeat top left;

}

a.stumble{

left:698px;

background:transparent url(../images/stumble_koi.png) no-repeat top left;
}

У прищепки, которая представляет из себя тег span внутри ссылочного элемента, будет такой стиль:

.cl_container a span{
width:17px;

height:44px;

position:absolute;

background:transparent url(../images/pin.png) no-repeat top left;

top:-20px;

left:55px;
}

Нам нужно расположить прищепку посредине ее родительского ссылочного элемента, ширина которого 130 пикселей, так что мы устанавливаем значение свойства расположения слева в 55px. Так как мы расположили изображения прищепки в средине основного контейнера, нам нужно их приподнять. Мы делаем это, устанавливая отрицательное значение  расположения сверху в -22px. Конечно, мы могли расположить весь основной контейнер по-другому, чтобы избежать использования отрицательных значений, но мы хотим показать, как просто можно использовать отрицательные значения, когда это удобно. В других ситуациях Вы можете выиграть от использования отрицательных внешних отступов и расположений, так как вместо изменения значений у большого количества элементов, Вы просто можете настроить один единственный элемент, используя отрицательное расположение или внешний отступ.

И последнее, но не менее важное, мы добавим стиль для милой птички Twitter:

a.twitter{
left:800px;

width:160px;

height:160px;

top:-85px;

background:transparent url(../images/twitter.png) no-repeat top left;
}

Птичку Twitter нужно приподнять, чтобы выглядело, как будто она сидит на веревке. Так что мы установим значение top:-85px.

И это все!

Ресурсы для этого урока можно найти здесь:

Бельевые прищепки и идея для бельевой веревки: http://dragonartz.wordpress.com/2008/10/29/polaroid-frames-vector-set/

Набор уменьшенных изображений, созданных Koi Design на сайте DeviantArt:

http://koidesign.deviantart.com/art/koidesign-social-icon-pack-135276528

Птичка Twitter, созданная Gopal Raju: http://www.productivedreams.com/free-twitter-bird-icon-set/

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

Наслаждайтесь!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создаем стильную кнопку, используя только CSS3
• Создание коммерческих веб-элементов средствами css3
• Создаем шестиугольник с помощью чистого CSS3