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

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

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

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

Меню сайта

Теги HTML

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

CSS

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

Реклама

Все для сайта

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

Fullscreen

[ · Скачать удаленно () ]
Fullscreen Image Blur Effect with HTML5 JAVASCRIPT <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/slider/Fullscreen/js/170.js"></script> <script type="text/javascript" src="http://samouchka-html.ucoz.ru/dlya-grafiki/slider/Fullscreen/js/StackBlur.js"></script> Основной код CSS @import url('../css/reset.css'); /* General Demo Style / body{ background: #222; color: #fff; font-family: 'Bitter', Arial, sans-serif; font-size: 13px; } a{ color: #fff; text-decoration: none; } .clr{ clear: both; } h1{ font-size: 24px; position:relative; color: #fff; font-weight: 400; text-shadow: 0px 1px 3px rgba(0,0,0,0.8), 0px 0px 1px #fff; padding: 20px 30px 30px 30px; z-index:90; text-align: center; } h1 span{ color: transparent; text-shadow: 0px 0px 3px #fff; } / Header Style / .header{ font-family:'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .header a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .header a:hover{ color: #fff; } .header span.right{ float: right; } .header span.right a{ float: none; display: inline; } p.demos{ position:relative; z-index: 90; text-align:center; } p.demos a{ padding: 0 4px; } p.demos a:hover{ text-decoration: underline; } p.demos a.current-demo{ font-weight: bold; } .bx-content h2, .bx-content h3{ font-size: 120px; position: relative; z-index: 300; color: #fff; padding: 20px 30px 0px; font-family: 'Miltonian'; text-align: center; text-shadow: 0px 0px 1px rgba(255,255,255,0.9), 1px 2px 5px rgba(0,0,0,0.5); } .bx-content h3{ font-size: 60px; } .bx-container{ position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:0; } .bx-container img{ position:absolute; top:0px; left:0px; width:100%; z-index: 101; display:none; } .bx-canvas{ position:absolute; top:0px; left:0px; width:100%; } .bx-overlay, .bx-loading { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: transparent url('../image/pattern.png') repeat top left; z-index:10; } .bx-loading{ z-index: 9999; background: #000; } .bx-loading span{ color: #fff; font-size: 13px; position: fixed; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 8px; margin: -12px 0 0 -46px; left: 50%; top: 50%; text-shadow: 0px 0px 1px rgba(255,255,255,0.9), 1px 2px 5px rgba(0,0,0,0.5); } .bx-thumbs{ position:absolute; z-index: 100; bottom: 50px; left: 50%; margin-left: -294px; /half of width for centering/ } .bx-thumbs a{ float: left; width: 66px; height: 66px; border: 2px solid #000; overflow: hidden; margin: 2px 7px; position: relative; outline: none; cursor: pointer; background-repeat: no-repeat; background-position: center center; opacity: 0.8; border-radius: 34px; -webkit-border-radius: 34px; -moz-border-radius: 34px; box-shadow: 0px 0px 3px rgba(0,0,0,0.6), 0px 0px 0px 40px rgba(0,0,0,0.3) inset; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .bx-thumbs a:hover{ opacity: 1.0; box-shadow: 0px 0px 3px rgba(0,0,0,0.6), 0px 0px 0px 0px rgba(0,0,0,0.1) inset; } .bx-thumbs a.bx-thumbs-current{ opacity: 1.0; border-color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.6); } @font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400; src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSgOzyEkA.woff) format('woff'); } @font-face { font-family: 'Miltonian'; font-style: normal; font-weight: 400; src: local('Miltonian'), local('Miltonian-Regular'), url(http://themes.googleusercontent.com/static/fonts/miltonian/v6/DVUl6K_XDo9HSLlx2JoxNT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } <noscript> <style> .bx-loading{display:none;} </style> </noscript> Листинг* <div class="container"> <div class="header"> <div class="clr"></div> </div> <h1>Fullscreen Image Effect with HTML5 </h1> <div id="bx-wrapper" class="bx-wrapper"> <div class="bx-loading"> <span>Loading... </span> </div> <div class="bx-content"> <h2>Aroma Paradise </h2> </div> <div class="bx-thumbs"> <a href="#" class="bx-thumbs-current" style="background-image:url(../image/01.jpg)"></a> <a href="#" style="background-image:url(../image/06.jpg)"></a> <a href="#" style="background-image:url(../image/05.jpg)"></a> <a href="#" style="background-image:url(../image/04.jpg)"></a> <a href="#" style="background-image:url(../image/03.jpg)"></a> <a href="#" style="background-image:url(../image/02.jpg)"></a> <a href="#" style="background-image:url(../image/01.jpg)"></a> </div> <div class="bx-container"> <img src="../image/7.jpg" alt="image7" title="Aroma Paradise"> <img src="../image/6.jpg" alt="image6" title="Tenderness"> <img src="../image/5.jpg" alt="image5" title="Flavour Bomb"> <img src="../image/4.jpg" alt="image4" title="Crunchbite"> <img src="../image/3.jpg" alt="image3" title="Freshness"> <img src="../image/2.jpg" alt="image2" title="Raw Love"> <img src="../image/1.jpg" alt="image1" title="Shushi Town"> </div> <div class="bx-overlay"></div> </div> </div> Предпросмотр Скачать

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

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

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

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

Друзья сайта

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

Хостинг от uCoz

Avon

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