|
Под эффектом Bubble, я имею в виду "всплытие" картинки на передний план, на подобии того, как это сделано в в операционных системах от Apple. В этой статье я расскажу вам как сделать меню с эффектом Bubble, используя только возможности CSS. И хотя этот метод лишён красивого перехода, как у Apple, он поможет вам сделать
меню немного красивее. В статье описано два метода: CSS-спрайты (простейший метод) и метод подмена картинки (более продвинутый).
Первый метод: CSS-спрайты
Самый простой способ сделать эффект Bubble - это использовать CSS-спрайты. Всё что вам нужно сделать - это
изменить фон картинки.
Но для начала напишем HTML:
<ul id="bubble">
<li>
Full RSS Feed
</li>
<li>
Feed via email
</li>
<li>
Follow me on Twitter
</li>
<li>
I'm on Facebook
</li>
<li>
Save me
</li>
<li>
Fave me
</li>
</ul>
Теперь готовим картинки для спрайтов. Они должны выглядеть следующим образом:
Осталось написать CSS-стили, чтобы сделать для пунктов меню фоновые изображения:
#bubble {
list-style : none;
margin : 0px;
padding : 0px;
}
#bubble li {
display : inline-block;
margin : 0px;
padding : 0px;
}
#bubble li a.icon {
background : url(sprites.png) no-repeat;
border : none;
display : block;
width : 128px;
height : 128px;
text-indent : -9999px;
}
Следующий шаг - написать стиль для наведённых ссылок. Этот стиль будет сдвигать фоновое изображение,
создавая таким образом эффект всплытия картинки.
#bubble li a.feed {
background-position: -139px -12px;
}
#bubble li a.feed:hover {
background-position: -13px -12px;
}
#bubble li a.email {
background-position: -139px -149px;
}
#bubble li a.email:hover {
background-position: -13px -149px;
}
#bubble li a.twitter {
background-position: -139px -283px;
}
#bubble li a.twitter:hover {
background-position: -13px -283px;
}
#bubble li a.facebook {
background-position: -139px -422px;
}
#bubble li a.facebook:hover {
background-position: -13px -422px;
}
#bubble li a.delicious {
background-position: -139px -559px;
}
#bubble li a.delicious:hover {
background-position: -13px -559px;
}
#bubble li a.technorati {
background-position: -139px -698px;
}
#bubble li a.technorati:hover {
background-position: -13px -698px;
}
Всё, меню готово. Как видите, к недостаткам этого способа можно отнести то, что для каждого пункта меню
используется отдельная запись в стилевом файле.
Второй метод: подмен картинки.
Для реализации этого метода, нужно написать немного больше HTML-разметки, но меньше стилей в CSS.
Поскольку для каждой ссылки мы используем по две картинки, наш HTML будет выглядеть так:
<ul id="bubble2">
<li><div align="center">[thumb]http://www.css-tricks.ru/feed.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/feed_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/email.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/email_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/twitter.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/twitter_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/facebook.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/facebook_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/delicious.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/delicious_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/technorati.png[/thumb]</div>
<div align="center">[thumb]http://www.css-tricks.ru/technorati_large.png[/thumb]</div>
</li>
</ul>
В этом методе мы сделаем кое-какие изменения. При наведении мыши пункт меню будет "всплывать" над
соседними пунктами. Разница с первым методом состоит в том, что сейчас необходимо задать
ширину и высоту для элементов . Иначе их размеры будут меняться при подмене картинки.
Итак, файл CSS будет выглядеть так:
#bubble2 {
list-style : none;
margin : 20px 0px 0px;
padding : 0px;
}
#bubble2 li {
display : inline-block;
margin : 0px 5px;
padding : 0px;
width : 72px;
height : 72px;
}
72px - это высота маленького изображения.
CSS для ссылок:
#bubble2 li a thumb {
position : relative;
border : none;
}
#bubble2 li a thumb.large {
display : none;
}
#bubble2 li a:hover thumb.small {
display : none;
z-index : 0;
}
#bubble2 li a:hover thumb.large {
display : block;
margin-top : -28px;
margin-left : -28px;
z-index : 1000;
}
Не забудьте установить свойство position в значение relative, потому что нам необходимо
использовать свойство z-index, а это свойство работает только при абсолютном или относительном
позиционировании элемента.
Для того, чтобы при наведении мыши, картинка выводилась по центру, мы будем устанавливать отрицательный
внешний отступ, равный -28px. Это очень важно, для того чтобы получился эффект увеличения.
Значения отступов рассчитывается так:
margin-top= – ([высота большой картинки] – [высота маленькой картинки])/2
и
margin-left= – ([ширина большой картинки] – [ширина маленькой картинки])/2.
Для того, чтобы меню работало корректно в IE, добавим ещё один стиль в HTML:
<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
display: inline;
}
</style>
<![endif]-->
Бонус. Делаем тоже самое, используя CSS3.
В CSS3 есть такое свойство как transform, одним из возможных значений которого
является функция scale. С помощью этого свойства мы можем значительно уменьшить количество кода.
Смотрим.
HTML
<ul id="bubble3">
<li><div align="center">[thumb]http://www.css-tricks.ru/feed_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/email_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/twitter_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/facebook_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/delicious_large.png[/thumb]</div>
</li>
<li><div align="center">[thumb]http://www.css-tricks.ru/technorati_large.png[/thumb]</div>
</li>
</ul>
CSS
#bubble3 {
list-style : none;
margin : 20px 0px 0px;
padding : 0px;
}
#bubble3 li {
display : inline-block;
margin : -28px 33px 0 -28px;
padding : 0px;
width : 72px;
height : 72px;
}
#bubble3 li a thumb {
position : relative;
border : none;
transform : scale(0.5625);
-moz-transform : scale(0.5625);
-webkit-transform: scale(0.5625);
z-index : 0;
}
#bubble3 li a:hover thumb {
margin-top : -28px;
transform : scale(1);
-moz-transform : scale(1);
-webkit-transform: scale(1);
z-index : 1000;
}
Пример
Перейти обратно к новости
|