Сайт

Только что добавил небольшое украшение для сайта в панели со значками(Твиттер, Ютуб, Рсс…) Этот красивый эффект написан на чистом CSS, японцем ksk1015. Эта запись никак не относится к тематике сайта, но кому интересно, выкладываю код:

СSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.effi {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-origin: border-box;
 
	display: inline-block; width: 41px; height: 40px;
	border-width: 16px;
	border-color: rgba(0,0,0,0);
 
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 40%;
 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
 
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
	border-style: dotted;
}
 
.effi:hover {
	border-width: 0;
	border-color: rgba(0, 0, 0, 0.5);
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--Rss button-->
<a href="http://pole.dyndns.info/?feed=rss2" class="effi" style="background-image: url(http://pole.dyndns.info/wp-content/uploads/rss.png); background-size: 36px, 36px;"</a>
<!--End of Rss button-->
 
<!--Twitter button-->
<a href="http://twitter.com/#!/poleinfo"  class="effi" style="background-image: url(http://pole.dyndns.info/wp-content/uploads/twitter.png); background-size: 36px, 36px;"></a>
<!--End of Twitter button-->
 
<!--RSSMAIL button-->
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Pole&loc=ru_RU"  class="effi" style="background-image: url(http://pole.dyndns.info/wp-content/uploads/emailrss.png); background-size: 36px, 36px;"></a>
<!--RSSMAIL button-->
 
<!--YouTube button-->
<a href="http://www.youtube.com/user/krikusZ80"  class="effi" style="background-image: url(http://pole.dyndns.info/wp-content/uploads/youtube.png); background-size: 36px, 36px;"></a>
<!--End of YouTube button-->

Вот.

Вы можите оставить комментарий, или поставить трэкбек со своего сайта.

Написать комментарий

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bug Report
Локализовано: шаблоны Wordpress