Увеличение при наведении и нажатии - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Эффекты увеличения » Увеличение при наведении и нажатии

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Увеличение при наведении и нажатии

Самый простой способ увеличения




Увеличение будет происходить 2 раза, при наведении и второй раз при нажатии на картинку или фото.В принципе возможно сделать и большее количество параметров увеличения, в данном примере используется всего два для исключения путаницы начинающим осваивать возможности применения CSS3.Увеличение может быть применено к различным элементам имеющим значения размеров, фотки и картинки самые распространнённые объекты для применения, поэтому пример нацелен на них.Достаточно применить используемый класс к нужному элементу и он будет воспроизводить указанные значения.При существующих вопросах или предложениях используйте форму комментариев, для экспериментов воспользуйтесь "Редактором HTML" находящимся в нижней части материала.





Код для применения к изображениям


<style>
/* - Установка элемента - */
.prostozoom{
/* - Ширина начальная - */
width:100px;
/* - Высота начальная - */
height:100px;
}
/* - Установка при наведении - */
.prostozoom:hover{
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
}
/* - Установка при нажатии - */
.prostozoom:active{
transform: scale(2.5, 2.5);
-o-transform: scale(2.5, 2.5);
-ms-transform: scale(2.5, 2.5);
}
</style>
<img src="http://delaisait.ucoz.ru/_dr/0/41791677.jpeg" class="prostozoom">



Пример в действии



Проверьте код в редакторе









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1592 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: увеличить, увеличение

    Всего комментариев: 5
    0   Спам
    5 IZOTOP   (26.09.2013 23:15)
    Аватар IZOTOP Было добавлено свойство с префиксом для браузеров с движком webkit:

    -webkit-transform

    0   Спам
    4 Wolifinhtein   (24.09.2013 20:42)
    Аватар Wolifinhtein вот спасибо теперь работает

    0   Спам
    3 Wolifinhtein   (24.09.2013 08:21)
    Аватар Wolifinhtein не знаю навожу щёлкаю и ноль реакций,может я чёто не правильно делаю?

    0   Спам
    1 Wolifinhtein   (22.09.2013 04:38)
    Аватар Wolifinhtein не работает

    0   Спам
    2 IZOTOP   (22.09.2013 19:43)
    Аватар IZOTOP Это не может "не работать", это свойство CSS3 transform в рядовом применении. Пожалуйста, если есть свидетельства неработоспособности указывайте все данные указывающие на это.
    Кстати, свойство трансформации может быть применено к любьым элементам, работать на получении данных об атрибутах и находиться в родственной цепи с другими элементами входящими в общую картину отображаемого.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]