Содержание
Ранее я написал краткое руководство по использованию кнопок социальных сетей Cool Mouse Hover для блога WordPress . И да, это еще один крутой пример социальных сетей при наведении мыши, который использует CSS Sprite ,
Зачем использовать CSS Image Sprite?
Каждый раз, когда вы вызываете изображение с помощью селектора фоновых изображений CSS, выполняется HTTP-запрос. Проще говоря, чем больше HTTP-запросов вы делаете, тем медленнее ваш сайт, и это может иметь катастрофические последствия для рейтинга в поисковых системах. Ответом на эту проблему является CSS Sprite.
CSS-спрайт — это изображение, которое включает в себя другую графику, которая будет использоваться (и повторно использоваться) на вашем сайте, поэтому вместо использования отдельных изображений каждый раз, когда вам нужно изменить фон с помощью CSS, вы используете только один спрайт. Это уменьшает HTTP-запросы и поддерживает ваш сайт очень быстро.
Another must read : Внедрить кнопку общего доступа
Мы пойдем Two Methods ,
- Способ 1: который мы использовали до 31.08.2016.
- Способ 2: который я использовал на Crunchify.com в 2015 году.
- Способ 3: использование
fontawesome.io, Пожалуйста, следуйте FontAwesome подробный учебник .
Давайте начнем:
Пример-1
Шаг 1
Изображение спрайта CSS: https://crunchify.com/wp-content/icon/crunchify-follow-sprite.png . Скачайте и поместите под свою тему /image/ папка. Вы будете ссылаться на это в файле CSS.
Шаг 2
Перейдите в область виджетов и добавьте текстовый виджет и введите код ниже Измените ссылки соответственно.
|
1
2
3
4
5
6
7
|
< div class = sidebox sidebox-social >
< а class = sm-rss href = http://feeds.feedburner.com/Crunchify rel = external target = _blank > RSS- канал < / a >
< а class = sm-goo href = https://www.google.com/+CrunchifyDotCom rel = publisher target = _blank > Google + < / a >
< а class = sm-fac href = https://www.facebook.com/Crunchify target = _blank > Facebook < / a >
< а класс = см-тви href = http://twitter.com/Crunchify target = _blank > Twitter < / a >
< а class = sm-wor href = http://profiles.wordpress.org/crunchify/ target = _blank > WordPress . орг < / a >
< / div >
|
Шаг 3
Перейти к теме style.css файл и положить ниже CSS для вашего лучшего sytling.
|
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
30
31
32
33
34
35
36
|
.sidebox-social {
набивка : 0 0 5px 0 ;
}
.sidebox {
ширина : 100% ;
переполнение : скрытый ;
поле : 0px 0px 15px 0px ;
минимальная ширина : 300 пикселей ;
}
.sidebox-social a: ссылка, .sidebox-social a: посещенный, .sidebox-social a: hover, .sidebox-social a: active {
плавать : слева ;
ширина : 32px ;
высота : 32px ;
поле : 10px 15px 10px 12 пикселей ;
набивка : 0 ;
текстовый отступ : -9999em ;
коробка-тень : 3px 3px 3px ргба ( 0,0,0,0,3 ) ;
цвет фона : прозрачный ;
фоновое изображение : url ( 'images / crunchify-follow-sprite.png' ) ;
повторение фона : без повтора ;
}
.sm-rss {
background-position : 0 0 ;
}
.sm-goo {
background-position : 0 -32px ;
}
.sm-fac {
background-position : 0 -64px ;
}
.sm-twi {
background-position : 0 -160px ;
}
.sm-wor {
background-position : 0 -192px ;
}
|
Вот и все. Теперь давайте перейдем ко 2-му примеру, который я сейчас не использую, но он работает хорошо, если хотите.
Пример-2
Шаг 1
Изображение спрайта CSS: https://crunchify.com/wp-content/icon/social-icons.png . Вам нужно это в файле CSS. Поместите это изображение в тему /images/ папка.
Шаг 2
Поместите этот код туда, где вы хотите, чтобы появился значок социальной сети, т.е. область виджета текста. Измените ссылки соответственно.
|
1
2
3
4
5
6
7
8
9
|
< ul id = social >
< li > < a href = http://twitter.com/Crunchify id = tw rel = я target = _blank > Twitter < / a > < / li >
< li > < a href = http://www.facebook.com/Crunchify id = fb rel = я target = _blank > Facebook < / a > < / li >
< li > < a href = https://www.google.com/+CrunchifyDotCom id = плюс rel = я автор target = _blank > Google + < / a > < / li >
< li > < a href = http://feeds.feedburner.com/Crunchify id = rss rel = я target = _blank > RSS < / a > < / li >
< / ul >
|
Шаг 3
Поместите ниже код CSS в ваш WordPress style.css файл:
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
/ * Социальные иконки
————————————————— ———- * /
#social {
плавать : слева ;
поле : 22px 0 0 10 пикселей ;
Левое поле: 35px ! важно ;
}
#social li {
плавать : слева ;
граница дна : никто ! важно ;
list-style-type : никто ! важно ;
}
#social li a {
плавать : слева ;
высота : 23 пикселя ;
ширина : 23 пикселя ;
текстовый отступ : -9999px ;
переполнение : скрытый ;
фон : url ( 'images / social-icons.png' ) ;
}
#social #tw {
background-position : 0 0 ;
}
#social #tw: hover {
background-position : 0 -23px ;
}
#social #fb {
background-position : -23px 0 ;
}
#social #fb: hover {
background-position : -23px -23px ;
}
#social #rss {
background-position : -46px 0 ;
}
#social #rss: hover {
background-position : -46px -23px ;
}
#social #plus {
background-position : -69px 0 ;
}
#social #plus: hover {
background-position : -69px -69px ;
}
|
Вот и все, и все готово.
0.00 (0%) 0 votes
