В этом уроке мы разберем с вами как сделать стильные подсказки (tooltips), используя весь потенциал CSS3.
Сгруппируем наши социальные кнопки в неупорядоченный список. Взгляните на наш HTML-код. Он очень простой:
<ul class="icons">
<li><a class="ico-twitter" href="#"><span>Twitter</span></a></li>
<li><a class="ico-rss" href="#"><span>RSS</span></a></li>
<li><a class="ico-digg" href="#"><span>Digg</span></a></li>
<li><a class="ico-reddit" href="#"><span>Reddit</span></a></li>
<li><a class="ico-technorati" href="#"><span>Technorati</span></a></li>
<li><a class="ico-facebook" href="#"><span>Facebook</span></a></li>
<li><a class="ico-stumbleupon" href="#"><span>Stumbleupon</span></a></li>
</ul>
Расположим наши иконки по-горизонтали, выровняем по центру экрана и уменьшим непрозрачность до 0.8
.
.icons{
text-align:center;
}
.icons li{
display:inline-block;
}
.icons li a{
display:block;
width: 84px;
height: 75px;
margin: 0 10px;
outline: none;
background: url('images/social_icons.png') no-repeat;
text-indent: -9000px;
position: relative;
opacity:0.8;
}
Мы объединили изображения в спрайт (для чего это делается вы можете почитать в учебнике Оптимизация сайта). Теперь с помощью background-position зададим положение фонового изображения для каждой иконки:
.icons li .ico-twitter {
background-position: 0 0;
}
.icons li .ico-rss {
background-position: -90px 0px;
}
.icons li .ico-digg {
background-position: -180px 0px;
}
.icons li .ico-reddit {
background-position: -270px 0px;
}
.icons li .ico-technorati {
background-position: -360px 0px;
}
.icons li .ico-facebook {
background-position: -450px 0px;
}
.icons li .ico-stumbleupon {
background-position: -540px 0px;
}
Подсказки, расположенные в теге span, скроем приравняв свойство css opacity к нулю. Вот код, который описывает их основные свойства:
.icons li a span {
font: 400 italic 14px/20px 'Alegreya SC', Georgia, serif;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.3);
text-indent: 0px;
position: absolute;
pointer-events: none;
opacity: 0;
}
В первом примере подсказки будут появляться соскальзывая сверху, поэтому разместим их над ссылками, установив CSS свойство bottom равным 100px.
.icons li a span {
padding: 10px;
left: 50%;
bottom: 100px;
width: 100px;
height: auto;
border-radius: 5px;
margin-left: -64px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.icons li a:hover span{
opacity: 0.9;
bottom: 70px;
}
Во втором примере подсказки будут появляться в огромном мыльном пузыре, поэтому мы сделали для подсказок border-radius равным 50%
и спрятали их с помощью transform, назначив scale(0)
. При наведении на ссылку, непрозрачность увеличивается до 0.9
, а масштаб до 1
.icons li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -55px;
border-radius: 50%;
bottom: -40px;
box-shadow: 0px 3px 8px rgba(0,0,0,0.1);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.icons li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
В третьем примере подсказки будут появляться при наведении на ссылку, поворачиваясь на 90
градусов против часовой стрелки:
.icons li a span{
width: 80px;
height: auto;
padding: 10px;
left: 50%;
margin-left: -55px;
bottom: -40px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: rotate(0deg) scale(0);
-moz-transform: rotate(0deg) scale(0);
-o-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
}
.icons li a:hover span{
opacity: 0.9;
bottom: 100px;
-webkit-transform: rotate(-90deg) scale(1);
-moz-transform: rotate(-90deg) scale(1);
-o-transform: rotate(-90deg) scale(1);
-ms-transform: rotate(-90deg) scale(1);
transform: rotate(-90deg) scale(1);
}
В четвертом (и последнем на сегодня) примере мы увеличили подсказки в 1,5
раза и повернули их на 35
градусов по часовой стрелке. При наведении мыши на иконку мы увеличиваем непрозрачность до 0.9
, уменьшили масштаб до исходного состояния и развернули обратно:
.icons li a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
bottom: 70px;
pointer-events: none;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.icons li a:hover span{
visibility: visible;
opacity: 0.9;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}
Указатели для наших подсказок сформируем с помощью псевдо-элементов :before и :after. Псевдо-элемент :before служит тенью для псевдо-элемента :after, поэтому у них так много общего. Чтобы было видно нашу тень, мы смещаем псевдо-элемент :after
на пиксель вниз и пиксель вправо.
.icons li a span:before,
.icons li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.icons li a span:after{
bottom: -14px;
margin-left: -10px;
border-top-color: #fff;
}
Voilà! Мы сделали замечательные подсказки и теперь пользователи не запутаются в огромном количестве социконок. Напомню, что эти примеры будут работать в браузерах, поддерживающих псевдо-элементы и CSS свойство transitions.