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

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

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

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

Меню сайта

Теги HTML

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

CSS

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

Реклама

Все для сайта

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

Фотогалерея


Фотогалерея на CSS3 Основной код CSS: <style type="text/css"> .gallery { margin: 100px auto 0; width: 800px; } .gallery a { display: inline-block; height: 135px; position: relative; width: 180px; /* CSS3 Prevent selections / -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; height: 100%; left:0px; position: absolute; top: 0px; width: 100%; z-index: 1; / CSS3 Box sizing property / -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; / CSS3 transition rules / -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; / CSS3 Box Shadow / -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } / Custom CSS3 rotate transformation / .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .gallery a:focus img { cursor: default; height: 250%; left: -150px; top: -100px; position: absolute; width: 250%; z-index: 25; / CSS3 transition rules / -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; / CSS3 transform rules / -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } </style> Листинг* <div class="gallery"> <a tabindex="1"><img src="../picture/1.jpg"></a> <a tabindex="2"><img src="../picture/2.jpg"></a> <a tabindex="3"><img src="../picture/3.jpg"></a> <a tabindex="4"><img src="../picture/4.jpg"></a> <a tabindex="5"><img src="../picture/5.jpg"></a> <a tabindex="6"><img src="../picture/6.jpg"></a> <a tabindex="7"><img src="../picture/7.jpg"></a> <a tabindex="8"><img src="../picture/8.jpg"></a> <a tabindex="9"><img src="../picture/9.jpg"></a> <a tabindex="10"><img src="../picture/10.jpg"></a> <a tabindex="11"><img src="../picture/11.jpg"></a> <a tabindex="12"><img src="../picture/12.jpg"></a> </div> Предпросмотр Скачать

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

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

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

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

Друзья сайта

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

Хостинг от uCoz

Avon

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