Категория > Вёрстка > Эффект Bubble с помощью CSS - «Верстка»

Эффект Bubble с помощью CSS - «Верстка»


23-11-2009, 13:00. Автор: Галина





Под эффектом 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;
    }
    

    Пример


    Перейти обратно к новости