Элементы пользовательского интерфейса Google+

Элементы пользовательского интерфейса Google+: иконки, кнопки, выпадающие меню

Замечательный набор элементов пользовательского интерфейса в стиле Google+. Здесь есть все что нужно для реализации приятного интерфейса у вас на сайте. Все элементы работаю на jQuery версии 1.6.2 и имеют очень маленький вес. Мало того что это очень красивые элементы интерфейса, так тут еще и здоровских иконок предостаточно. Иконки также не лишены динамики или анимации и она состоит в следующем: при наведении иконки из серой превращается в цветную и в низу появляется табличка с описанием или превью (tittle). За динамику интерфейса отвечает скрипт jquery.tiptip.js, за стили анимации и динамики отвечает tiptip.css, за каждый отдельный элемент иконки, кнопки или выпадающего меню отвечает файл css3-buttons.css. Очень прост html код одной единицы этого интерфейса, допустим код иконки с выпадающим описанием выглядит так:

<a href="#" class="button left" title="Home">
<span class="icon icon108"></span>
</a>

а выпадающее меню выглядит так:

<div class="buttons">
<div class="dropdown">
<a href="#" class="button">
<span class="label">File</span>
<span class="toggle"></span>
</a>
<div class="dropdown-slider">
<a href="#" class="ddm"><span class="label">New</span></a>
<a href="#" class="ddm"><span class="label">Save</span></a>
</div>
</div>

Всё просто и понятно!

Что касается всех иконок, которые есть в этом наборе элементов интерфейса google+, так они все содержатся в одном изображении, цветные и серые соответственно:

     

Похожие статьи