Автор

Cтильные подсказки для сайта

Cтильные подсказки для сайта


 

Подсказки являются неотъемлемой частью сайта, который содержит множество текстовой информации, по этому в данном уроке речь пойдет о создании подсказок с использованием плагина TyniTips, суть состоит в том, когда при наведении курсора мыши на выделенное слово или объект плавно всплывает подсказка с необходимым текстом, изображением или другим медиафайлом для предоставления дополнительной информации посетителю, плагин достаточно легок в использовании и не составит особого труда при внедрении в верстку сайта, и так, давайте же посмотрим что у нас с этого получилось..

 

ДЕМО
ИСХОДНИКИ

 

Для начала нам необходимо подключить jQuery и сам плагин, для этого нам необходимо вставить следующий код между тегами head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

 

Далее мы формируем непосредственно подсказки, для необходимых элементов:

<script type="text/javascript">
$(document).ready(function() {
	$('a.tTip').tinyTips('light', 'title');
	$('a.imgTip').tinyTips('yellow', '<img src="images/demo-image.jpg" /><br />Rudebox.org.ua - Информационный блог, в котором публикуются новости веб-дизайна, а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира.');
	$('img.tTip').tinyTips('green', 'title');
	$('h1.tagline').tinyTips('blue', 'tinyTips - Урок по созданию всплывающих подсказок!');
});
</script>

 

Вызов плагина сопровождается передачей ему двух аргументов. Первый аргумент указывает на стиль отображения подсказки. Второй аргумент указывает на источник контента подсказки.

Затем мы задаем стили для наших подсказок, стиль для подсказки имеет три раздела. В общем разделе задается стиль для всей подсказки в целом. В разделе нижней части (класс .bottom) можно установить изображение указателя на элемент, для которого выводится подсказка, выглядит следующим образом:

.lightTip		{ width: 342px; }
.lightTip .content	{ width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }
.lightTip .bottom	{ height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip		{ width: 342px; }
.yellowTip .content	{ width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }
.yellowTip .bottom	{ height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip		{ width: 342px; }
.orangeTip .content	{ width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }
.orangeTip .bottom	{ height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip			{ width: 342px; }
.redTip .content	{ width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }
.redTip .bottom		{ height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip		{ width: 342px; }
.greenTip .content	{ width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }
.greenTip .bottom	{ height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip		{ width: 342px; }
.blueTip .content	{ width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }
.blueTip .bottom	{ height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip		{ width: 342px; }
.purpleTip .content	{ width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }
.purpleTip .bottom	{ height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip		{ width: 342px; }
.darkTip .content	{ width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }
.darkTip .bottom	{ height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

 

На этом наши подсказки готовы, можно просмотреть как они выглядят в демо или скачать уже готовый материал.


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Cтильные подсказки для сайта

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


Cтильные подсказки для сайта

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


Cтильные подсказки для сайта

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..


Cтильные подсказки для сайта

Коллекция причудливых текстовых эффектов, чтобы оживить теглайн и кнопки действий вашего сайта.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close