Эффект Bubble с помощью CSS

Под эффектом Bubble, я имею в виду "всплытие" картинки на передний план, на подобии того, как это сделано в в операционных системах от Apple. В этой статье я расскажу вам как сделать меню с эффектом Bubble, используя только возможности CSS. И хотя этот метод лишён красивого перехода, как у Apple, он поможет вам сделать меню немного красивее. В статье описано два метода: CSS-спрайты (простейший метод) и метод подмена картинки (более продвинутый).

Первый метод: CSS-спрайты

Самый простой способ сделать эффект Bubble - это использовать CSS-спрайты. Всё что вам нужно сделать - это изменить фон картинки.

Но для начала напишем HTML:

<ul id="bubble"> <li> <a class="icon feed" href="#" title="Full RSS Feed">Full RSS Feed</a> </li> <li> <a class="icon email" href="#" title="Feed via Emal">Feed via email</a> </li> <li> <a class="icon twitter" href="#" title="Full RSS Feed">Follow me on Twitter</a> </li> <li> <a class="icon facebook" href="#" title="Full RSS Feed">I'm on Facebook</a> </li> <li> <a class="icon delicious" href="#" title="Full RSS Feed">Save me</a> </li> <li> <a class="icon technorati" href="#" title="Full RSS Feed">Fave me</a> </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><a href="#" title="Full RSS Feed"> <img class="small" src="feed.png" alt="Full RSS" /> <img class="large" src="feed_large.png" alt="Full RSS" /> </a></li> <li><a href="#" title="Feed via Emal"> <img class="small" src="email.png" alt="Feed via Emal" /> <img class="large" src="email_large.png" alt="Feed via Emal" /> </a></li> <li><a href="#" title="Follow me on Twitter"> <img class="small" src="twitter.png" alt="Follow me on Twitter" /> <img class="large" src="twitter_large.png" alt="Follow me on Twitter" /> </a></li> <li><a href="#" title="I'm on Facebook"> <img class="small" src="facebook.png" alt="I'm on Facebook" /> <img class="large" src="facebook_large.png" alt="I'm on Facebook" /> </a></li> <li><a href="#" title="Save me"> <img class="small" src="delicious.png" alt="Save me" /> <img class="large" src="delicious_large.png" alt="Save me" /> </a></li> <li><a href="#" title="Fave me on Technorati"> <img class="small" src="technorati.png" alt="Fave me on Technorati" /> <img class="large" src="technorati_large.png" alt="Fave me on Technorati" /> </a></li> </ul>

В этом методе мы сделаем кое-какие изменения. При наведении мыши пункт меню будет "всплывать" над соседними пунктами. Разница с первым методом состоит в том, что сейчас необходимо задать ширину и высоту для элементов <li>. Иначе их размеры будут меняться при подмене картинки. Итак, файл 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 img { position : relative; border : none; } #bubble2 li a img.large { display : none; } #bubble2 li a:hover img.small { display : none; z-index : 0; } #bubble2 li a:hover img.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><a href="#" title="Full RSS Feed"> <img src="feed_large.png" alt="Full RSS" /> </a></li> <li><a href="#" title="Feed via Emal"> <img src="email_large.png" alt="Feed via Emal" /> </a></li> <li><a href="#" title="Follow me on Twitter"> <img src="twitter_large.png" alt="Follow me on Twitter" /> </a></li> <li><a href="#" title="I'm on Facebook"> <img src="facebook_large.png" alt="I'm on Facebook" /> </a></li> <li><a href="#" title="Save me"> <img src="delicious_large.png" alt="Save me" /> </a></li> <li><a href="#" title="Fave me on Technorati"> <img src="technorati_large.png" alt="Fave me on Technorati" /> </a></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 img { 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 img { margin-top : -28px; transform : scale(1); -moz-transform : scale(1); -webkit-transform: scale(1); z-index : 1000; } 

Пример