Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
18-03-2016, 16:25
Кнопки в стиле Google+, скачать 200 иконок Google+ - «Верстка»
Рейтинг:

Социальная сеть Google+, даже находясь в стадии бета-тестирования, ураганом ворвалась в жизнь продвинутых пользователей, поэтому не стоит удивляться тому интересу который данная социальная сеть вызывает, в том числе и у веб-дизайнеров, разработчиков и seo оптимизаторов. Этот интерес достаточно велик и постоянно “подогревается” разработчиками Google, которые постоянно усовершенствуют проект и добавляют интеграцию с другим своими сервисами. Так, например, среди сеошников популярностью пользуются кнопки и иконки Google+ которые позволяют добавлять “+1″ для вашего сайта или страницы.


Но не “+1″ единым, в последний год внешний вид Google+ диктовал моду и другим сервисам компании Google, которые  подверглись изменению дизайна и стиля оформления. Общим элементом для многих проектов можно выделить стильное меню вверху страницы, похожие иконки, кнопки управления да и вообще много разных элементов, что можно найти во всех проектах – от почты Gmail до Google Reader. Cегодня представляю вашему внимаю интересный набор кнопок в стиле Google+, найденные на сайте shrapp.nl. Набор этот является не просто иконками социальной сети Google+, а скорее целым фреймворком позволяющим добавить кнопки из интерфейса Google+ на свой сайт.



Посмотреть демо как работают кнопки Google+, скачать эти иконки и почитать документацию по их установке можете на этой странице. Во-первых, вы, конечно. можете просто сказать эти симпатичные минималистические иконки для разных действий, ситуаций и т.п. дабы использовать в своем дизайне или сайте. Более продвинутый вариант – это подключение фреймворка (скриптов) для применения иконок через css cтили легко и быстро.


Установка кнопок Google+


Полная и более детальная инструкция может быть найдена по ссылке, указанной выше – там есть разные варианты и примеры использования. Я лишь рассмотрю процесс установки + один из вариантов применения кнопок после того как вы скачали соответствующий архив.



Итак, порядок установки:


1. Поместите файл css и изображения в корневую директорию сайта, ну или туда где у вас располагаются стили для шаблона.


2. «Подключите» таблицу стилей для этого добавьте в код ссылку вида (добавляется где угодно между и ):



<</span>link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen"<span style="color: #339933;">>


3. Далее подключим jQuery TipTip плагин и соответствующую таблицу стилей (добавляется где угодно между и ):




<</span>link rel="stylesheet" href="tiptip.css" type="text/css" media="screen"<span style="color: #339933;">>
<</span>script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"<span style="color: #339933;">></script<span style="color: #339933;">>
<</span>script src="jquery.tiptip.js"<span style="color: #339933;">></script<span style="color: #339933;">>
<</span>script<span style="color: #339933;">>
$(document).ready(function() {
// Launch TipTip tooltip
$('.tiptip a.button, .tiptip button').tipTip();
});


4. Если вам нужны dropdown (выпадающее) меню, добавляем также:



<</span>script<span style="color: #339933;">>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
}); // END document.ready
// Close open dropdown slider/s by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
}); // END document.bind


На этом установку можно считать законченной. Теперь чтобы, например, вывести вот такие кнопки:



… добавляете код:



Left
Middle
Right




То есть за счет фреймворка все кнопки Google+ можно отображать через css и html путем несложных действий. Другие примеры использования кнопок в стиле Google+ можете найти в документации, на которую я ссылался ранее. В принципе нет ничего сложного, а получается весьма симпатично и стильно – особенно это, думаю, актуально будет для разработок каких-то внутрикопроративных сайтов, где кнопки будут использоваться для интерфейса системы.


P.S. Заказать книги в интернете теперь стало еще проще, специальный книжный интернет магазин имеет весьма широкий ассортимент и услугу доставки книг.

Для очищения организма от вредных элементов и шлаков помогают постные блюда рецепты которых в большом количестве вы сможете найти на нашем сайте.

Иногда для подъемов грузов заказывают специальную услугу наладка подъемников причем разных типов – от шахтных до кухонных и различных подъемных столов.


Теги: CSS Верстка style=

Просмотров: 1 906
Комментариев: 0:   18-03-2016, 16:25
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle