Скрипты для сайта

Скрипты для сайта

Главная | Регистрация | Вход

Приветствую Вас Гость | RSS

Меню сайта

Теги HTML

Терминология языка HTML
Теги HTML по алфавиту
Теги HTML по типу
Уроки HTML начинающим

CSS

Введение в стили CSS
Параметры шрифта и фона
Отображения текста
Отступы,рамки и выделение
Параметры абзацев,списков
Параметры таблиц
Специальные селекторы

Реклама

Все для сайта

Все для графики
Меню и навигация
Слайдеры и слайдшоу
Кнопки и иконки
Tooltips
Аудио и видео плееры
Формы и таблицы

Всплывающие Tooltips подсказки


Всплывающие Tooltips подсказки JAVASCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/Tooltips/Sweet_Tooltip/js/sweet-tooltip.js"></script> Листинг <div id="container"> <div class="item-tooltip"> <div class="item"> <span class="top-title">Sweet Strong </span> <div class="image-item"><img src="../image/sweet-strong.png"></div> </div> <div class="item-information"> <span class="title">Название стиля </span> <span class="information-content"> tooltip-sweet-strong </span> <span class="title">Пример </span> <span class="information-content"> Наведите на <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-sweet-strong" data-text-tooltip="Я всплывающая подсказка"> эту ссылку </a> , чтобы увидеть этот тултип в работе </span> </div> </div> </div> Основной код CSS /* Sweet Strong / .tooltip-sweet-strong { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd358), to(#ffbc30)); background-image: -webkit-linear-gradient(top, #ffd358, #ffbc30); background-image: -moz-linear-gradient(top, #ffd358, #ffbc30); background-image: -ms-linear-gradient(top, #ffd358, #ffbc30); background-image: -o-linear-gradient(top, #ffd358, #ffbc30); background-image: linear-gradient(to bottom, #ffd358, #ffbc30); color: #c77500; font-weight: bold; padding: 5px 20px; border-radius: 20px; box-shadow: 0px 3px 0px #c77500; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); } .tooltip-sweet-strong:after { content: ''; border-top: 8px solid #ffbc30; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; left: 45%; top: 95%; } .tooltip-sweet-strong:before { content: ''; border-top: 8px solid #c77500; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; left: 45%; top: 110%; } / Mini Slick / .tooltip-mini-slick { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#0088e2), to(#005cc4)); background-image: -webkit-linear-gradient(top, #0088e2, #005cc4); background-image: -moz-linear-gradient(top, #0088e2, #005cc4); background-image: -ms-linear-gradient(top, #0088e2, #005cc4); background-image: -o-linear-gradient(top, #0088e2, #005cc4); background-image: linear-gradient(to bottom, #0088e2, #005cc4); color: white; font-weight: normal; padding: 8px; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.5); margin-top: 10px; text-shadow: -1px -1px 0px rgba(0,0,0,0.4); } .tooltip-mini-slick:after { content: ''; border-top: 10px solid #005cc4; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 35%; top: 85%; } / Big Grey / .tooltip-big-grey { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f6f6f6)); background-image: -webkit-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -moz-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -ms-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: -o-linear-gradient(top, #f9f9f9, #f6f6f6); background-image: linear-gradient(to bottom, #f9f9f9, #f6f6f6); color: #5c5c5c; width: 140px; height: 25px; padding: 30px 20px; border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0px 2px 0px rgba(0,0,0,0.1); margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; font-size: 14px; } .tooltip-big-grey:after { content: ''; border-top: 10px solid #f6f6f6; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 2.8em; } .tooltip-big-grey:before { content: ''; border-top: 10px solid rgba(0,0,0,0.1); border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; left: 45%; margin-top: 4.2em; } / Nightly / .tooltip-nightly { position: absolute; opacity: 0; background: rgba(35,34,27,0.9); color: white; font-weight: normal; padding: 8px 16px; border-radius: 5px; margin-top: 10px; text-shadow: none; } .tooltip-nightly:before { position: absolute; content: ''; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.4)), to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0)); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0)); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0)); background-image: -o-linear-gradient(top, rgba(255,255,255,0.4), rgba(0,0,0,0)); background-image: linear-gradient(to bottom, rgba(255,255,255,0.4), rgba(0,0,0,0)); padding: 8px 16px; width: 77px; height: 15px; border-radius: 5px; margin: -7px 0 0 -15px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5); } .tooltip-nightly:after { content: ''; border-top: 5px solid rgba(35,34,27,0.9); border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; left: 45%; margin-top: 1.85em; } / Nightly / .tooltip-shiny-red { position: absolute; opacity: 0; background: #ff2723; color: white; font-weight: normal; padding: 8px 16px; border-radius: 5px; margin-top: 10px; text-shadow: none; box-shadow: 0px 1px 0px #bb0400; } .tooltip-shiny-red:before { position: absolute; content: ''; background: rgba(255,255,255,0.2); padding: 8px 16px; width: 87px; margin: -8px 0 0 -16px; } .tooltip-shiny-red:after { content: ''; border-top: 5px solid #ff2723; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; left: 45%; margin-top: 1.85em; } / Soft Blue / .tooltip-soft-blue { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#ddeefe), to(#c0e0f1)); background-image: -webkit-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -moz-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -ms-linear-gradient(top, #ddeefe, #c0e0f1); background-image: -o-linear-gradient(top, #ddeefe, #c0e0f1); background-image: linear-gradient(to bottom, #ddeefe, #c0e0f1); color: #3f4b53; font-weight: bold; padding: 5px 20px; border-radius: 20px; border: 1px solid #c0d9e9; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); } .tooltip-soft-blue:after { content: ''; border-top: 6px solid #c0e0f1; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.6em; } .tooltip-soft-blue:before { content: ''; border-top: 6px solid #c0d9e9; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 1.7em; } / Big Yellow / .tooltip-big-yellow { position: absolute; opacity: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#f7e29a), to(#deb223)); background-image: -webkit-linear-gradient(top, #f7e29a, #deb223); background-image: -moz-linear-gradient(top, #f7e29a, #deb223); background-image: -ms-linear-gradient(top, #f7e29a, #deb223); background-image: -o-linear-gradient(top, #f7e29a, #deb223); background-image: linear-gradient(to bottom, #f7e29a, #deb223); color: #2c170a; font-weight: bold; width: 100px; padding: 12px 20px; border-radius: 20px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.5); border: 1px solid #d9c171; margin-top: 10px; text-shadow: 1px 1px 0px rgba(255,255,255,0.4); text-align: center; z-index: 8; } .tooltip-big-yellow:after { content: ''; border-top: 6px solid #deb223; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; left: 45%; margin-top: 2.2em; } Предпросмотр Скачать*

Заработай сейчас!

Заработай сейчас

Навигация по сайту

Поиск по сайту

Друзья сайта

Самоучитель html
Все для веб-мастера
Музыка для души
Мир развлечений
Скачать кино бесплатно!
Видеоклипы online

Хостинг от uCoz

Avon

Присоединяйтесь
к Avon