Автор

02 04.2013
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

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


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

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

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

На сегодняшний день наша студия полностью ушла от бесплатных систем и начала работу по созданию сайтов на платных так называемых движках. В данный момент мы создаем сайты на UMI.CMS, и наша студия является официальным партнером этой компании в области разработки сайтов и веб дизайна. К данной системе лично у меня пока ни каких нареканий нет, я не нашел ни каких минусов в этой системе управления сайтом. Особо хотелось бы отметить огромное преимущество этой редакции, а точнее это быстрое и удобное создание форм обратной связи любой сложности, используемых как для обратной связи, так и как форм всевозможных онлайн заказов.


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

Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности. Все больше разработчиков используют SVG, что заставляет развивать данное направление. Мы хотели бы поделиться некоторыми идеями для воздействия на кнопки.


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

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


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

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close