ВходHover эффекты для фона страницы. Оригинальные эффекты при наведении курсора мыши на объекты
CSS3 дал бесчисленные возможности для дизайнеров UX (опыта взаимодействия), а самое лучшее в этом, что самые крутые элементы действительно просты в реализации.
Буквально пара строк кода даст удивительные эффекты перехода, которые взволнуют ваших пользователей, увеличат вовлечённость и, в конечном итоге, при правильном использовании, увеличит вашу посещаемость. Более того, эти эффекты используют аппаратное ускорение, это прогресс - в котором вы можете принять участие прямо сейчас.
Вот 8 действительно простых эффектов, которые добавят жизнь в ваш UI (пользовательский интерфейс) и улыбок на лица ваших пользователей.
Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:
Сделав это, установите его ширину и высоту (чтобы он имел размеры), его цвет фона (чтобы мы могли видеть его) и свойства его эффекта.
Свойство transition имеет три значения: свойства по переходу (в нашем случае все из них) скорость перехода (в нашем случае 0,3 секунды) и третье значение, которое позволяет изменять как рассчитывается ускорение и замедление, но мы продержимся настройки по умолчанию, оставляя это поле пустым.
Теперь все, что нужно сделать, это менять свойства, и они будут создавать анимацию для нас.
Если вы хотите продолжить самостоятельно, то для вас демо-файлы .
1. Затемнение
Сделать эффекты затемнения - это довольно распространённая просьба клиентов. Это отличный способ подчеркнуть функциональность или обратить внимание на призыв к действию.
Эффект кодируются в два этапа: сначала, вы установите начальное состояние; далее установите изменение, например, при наведении мыши:
Fade { opacity:0.5; } .fade:hover { opacity:1; }
(Убедитесь, что вы присвоили вашему div класс "fade", чтобы увидеть, как это работает.)
2. Смена цвета
Раньше анимация изменения цвета был невероятно сложным делом, с вовлечением математики, участвующей в расчете отдельные значения RGB, а затем рекомбинации их. Теперь мы просто устанавливаем div’у класс "color" и задаём цвет, какой хотим, в CSS:
Color:hover { background:#53a7ea; }
3. Увеличение и ужатие
Когда-то чтобы увеличить элемент, вам нужно было использовать его ширину и высоту или параметр наполненности. Но сейчас для увеличения мы можем использовать трансформацию силами CSS3.
Установите класс вашего div, на «grow», а затем добавьте этот код в ваш стиль блока:
Grow:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
Ужать элемент так же просто, как увеличить его. Чтобы увеличить элемент мы указываем значение, большее 1, чтобы уменьшить его, мы указать значение меньше, чем 1:
Shrink:hover { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
4. Кручение элементов
CSS предусматривает ряд трансформаций, и одна из лучших - это кручение элемента. Присвойте вашему div’у класс "rotate" и добавьте следующие строки в ваш CSS:
Rotate:hover { -webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); transform: rotateZ(-30deg); }
5. Превращение квадрата в круг
Сейчас очень популярен эффект трансформации квадратного элемента в круглый и наоборот. С помощью CSS этого легко добиться, мы просто переход свойство границы радиуса. Мы просто задействуем свойство border-radius.
Присвойте вашему div’у класс "circle" и добавить эти строки к вашим таблицам стилей:
Circle:hover { border-radius:50%; }
6. 3D тень
3D тени были восприняты с неодобрением в течение года или около того, потому что они, видите ли, не вписывались в плоский дизайн, это, конечно ерунда, они работают фантастически хорошо, давая пользователю почувствовать вовлеченность как при работе с плоским дизайном, так и с псевдо 3D интерфейсом.
Этот эффект достигается путем добавления прямоугольника тени, а затем перемещая элемент на оси х с помощью изменения свойству transform и translate таким образом, что кажется, будто элемент растёт из экрана.
Присвойте вашему div’у класс "threed", а затем добавьте следующий код в ваш CSS:
Threed:hover { box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px); transform: translateX(-3px); }
7. Качание
Не все элементы используют свойство перехода. Мы также можем создать очень сложные анимации с использованием @keyframes, анимации и анимации-итерации.
В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем Chrome, в этом отношении, по крайней мере).
@-webkit-keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes swing { 15% { -webkit-transform: translateX(5px); transform: translateX(5px); } 30% { -webkit-transform: translateX(-5px); transform: translateX(-5px); } 50% { -webkit-transform: translateX(3px); transform: translateX(3px); } 65% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 80% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } }
8. Вставка границы
Один из самых горячих стилей кнопок прямо сейчас - это кнопка призрак; кнопка без фона и жирной границы. Мы можем, конечно, просто добавить рамку к элементу, но это изменится положение элемента. Мы могли бы решить эту проблему с помощью размеров бокса, но гораздо более простым решением является переход в border с помощью вставки тени.
Дайте вашему дел класс "border" и добавьте следующий CSS для ваших стилей:
Border:hover { box-shadow: inset 0 0 0 25px #53a7ea; }
Хотите узнать, ? или ? Всё это и многое другое на сайте . Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на и вы узнаете первым о новых статьях! Также вступайте в нашу
В данном уроке продолжаем работать с CSS, реализуем красивый эффект при наведение на картинку где она плавного поворачивается с затемнением, а на фоне ее появляется обводка и текстовые заголовки.
CSS эффект описываем каркас блоков для трансформации
Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.
Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.
Div.dws>div.blocImg>img+div.blocText>div.text>h2+p
transition
CSS эффект при наведении
transform scale(x,y)
:hover::before::after
Описываем основные стили картинки / эффект на css
Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden , скрываем все лишнее за ее пределами, добавляем курсор.
BlocImg { width: 600px; height: 338px; overflow: hidden; cursor: pointer; }
Позиционируем для удобства блок посередине экрана.
Dws { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.
BlocImg img { width: 100%; transition: .5s; }
Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5; .
Dws:hover .blocImg img { transform: rotate(-10deg) scale(1.3); filter: blur(1px); opacity: .5; }
Теперь приступим к стилилизации текста.
Оформляем текстовое содержание блока
Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.
BlocText { outline: 1px solid orange; position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; }
Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.
Text { color: #fff; text-transform: uppercase; padding: 0 20px; }
Заголовку второго уровня задаем 25 пик.
Text h2 { font-size: 25px; }
Вторую его часть делаем оранжевым цветом, устанавливаем отступы с низу для черты, и делаем нижнее подчеркивание в 2 пик.
Text h2 span { color: orange; padding-bottom: 3px; border-bottom: 2px solid #fff; }
Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.
Text p { position: absolute; top: 180px; width: 250px; border-left: 4px solid #ffb611; padding: 0 10px; }
Описываем псевдоэлементы::before и::after
Уберем обводку outline , которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.
Создаем псевдоэлементы ::before ::after , описываем их основные стили.
Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.
BlocText::before, .blocText::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1) .
BlocText::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0,1); }
Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y
BlocText::after { border-left: 1px solid #fff; border-right: 1px solid #fff; transform: scale(1,0); }
А для их появления, трансформацию для всех осей указываем в 1.
Dws:hover .blocText::before, .dws:hover .blocText::after { transform: scale(1,1); }
И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.
А по наведении текст отображаем.
Dws:hover .text { opacity: 1; }
В конечном итоге получили классный Hover Effects при наведение на картинку.
Кому видео было интересно, делитесь им с друзьями в социальных сетях, и не забывайте при этом комментировать.
Урок подготовил Горелов Денис.
Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое . Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом .
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.
Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.
Дабы не ломать общую картину, не стал коверкать машинным переводом названия эффектов(за исключением некоторых), оставил оригиналы заголовков такими, как их обозвал разработчик.
Очень интересный эффект при наведении на миниатюры изображений, с использованием тонких линий в конструкции и типографии. Несколько различных видов эффектов появления подписей к картинкам, мягкие и не навязчивые 3D-преобразования, и плавные переходы псевдо-элементов. Работает только в современных браузерах.
iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.
Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.
Совсем уж простецкий эффект перехода, без особых наворотов, полностью круглое изображение в рамке, трансформируется меняя фокус при наведении и всё.
Hover-эффекты для миниатюр на CSS3
Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.
Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.
Вращение миниатюр при наведении
Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.
Если перевести дословно:»Сексуальный эффект при наведении на «. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.
Пять различных эффектов для изображений при наведении на них. Всплывающие подписи в трёх вариациях, шторки в виде смены степени прозрачности и вращение с перемещением по горизонтали.
4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.
Выстроенные в сетку галереи миниатюры с различными эффектами появления подписей, вращение, проявление, всплытие и т.д. Документация по использованию и настройке довольно скудна, но при особом желании разобраться можно.
Данный эффект особого ничего из себя не представляет, банальная смена яркости изображений при наведении, разве что добавлены элементы анимации. Разбираться с подробностями реализации придётся самостоятельно, разложив исходники демо.
Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.
Различные эффекты анимации рамки вокруг изображений, смотрится довольно привлекательно, имеется подробное руководство по настройке и использованию.
Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.
Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.
Раздвижные изображения
Суть данного эффекта в том, что изображение раздвигается вверх и вниз для появления подписи. Если поработать с параметрами стилей, думаю можно добиться вполне-себе симпатичных эффектов, а по умолчанию, выглядит всё совсем уж просто.
С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.
Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.
Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.
Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.
Набор красивых эффектов при наведении на миниатюры, различные виды появления и оформления подписей к картинкам. Тонкие линии в контрасте с слегка затемнённым фоном создают лёгкие для восприятия информационные блоки.
Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.
Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.
Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.
6 Подписей к картинкам
6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.
Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.
Сервис SendPulse – это маркетинговый инструмент для создания подписной базы и перевода случайных посетителей вашего сайта в разряд постоянных. SendPulse объединяет на одной платформе важнейшие функции для привлечения и удержания клиентов:
● e-mail-рассылки,
● web-push,
● SMS рассылки,
● SMTP,
● рассылки в Viber,
● отправка сообщений в facebook messenger.
Рассылки email
Вы можете воспользоваться различными тарифами для ведения e-mail-рассылки, в том числе и бесплатным. Бесплатный тариф имеет ограничения: подписная база не более 2500.Первое, с чего нужно начать, при работе с сервисом e-mail рассыл ок , – это создать свою адресную книгу . Задайте заголовок и загрузите список e-mail адресов.
На SendPulse удобно создавать формы подписки в виде всплывающего окна, встроенные формы, плавающие и фиксированные в определенной части экрана. С помощью форм подписки вы соберете базу подписчиков с нуля или дополните новыми адресами свою базу.
В конструкторе форм вы можете создать именно ту форму подписки, которая наиболее полно отвечает вашим нуждам, а подсказки сервиса помогут вам справится с этой задачей. Так же возможно использование одной из доступных готовых форм.
При создании форм подписки обязательно использование e-mail с корпоративным доменом. Читайте, как .
Шаблоны сообщений помогут красиво оформить ваши письма подписчикам. Собственный шаблон писем вы можете создать в специальном конструкторе.
Авторассылки . Контент-менеджеры активно используют автоматическую рассылку . Это помогает автоматизировать процесс работы с клиентами. Создать авторассылку можно несколькими способами:
● Последовательная серия писем . Это самый простой вариант, когда вне зависимости от условий пишутся несколько писем, которые будут разосланы получателям в определенном порядке. Здесь могут быть свои варианты – серия сообщений (простая цепочка сообщений), особая дата (письма приурочены к определенным датам), триггерное письмо – письмо отправляется в зависимости от действий подписчика (открытия сообщения и пр).
● Automation360 – рассылка с определенными фильтрами и условиями, а также с учетом конверсий.
● Готовые цепочки по шаблону. Вы можете создать серию писем по заданному шаблону или видоизменить шаблон и подстроить его под свои нужды.
А/B тестирование поможет провести эксперимент по различным вариантам отправки серии писем и определить наилучший вариант по открытиям или переходам.
Отправка Push уведомлений
Push-рассылки – это подписка в окне браузера, это своего рода замена rss-подпискам. Технологии web-push стремительно вошли в нашу жизнь, и уже сложно найти сайт, который не использует для привлечения и удержания клиентов пуш-рассылки. Скрипт запроса на , вы можете отправлять письма, как вручную, так и создать авторассылки, создав серию писем или собрав данные с RSS. Второй вариант подразумевает, что после появления новой статьи на вашем сайте, автоматически будет рассылаться уведомление об этом вашим подписчикам с кратким анонсом.
Новинка от Send Pulse – теперь вы можете монетизировать сайт с помощью Push-уведомлений, встраивая в них рекламные объявления. По достижении 10$ каждый понедельник осуществляются выплаты на одну из платежных систем – Visa/mastercard, PayPal или Webmoney.
Push -сообщения на сервисе абсолютно бесплатны. Оплата берется только за White Label – рассылки без упоминания сервиса SendPulse, но если вам не мешает логотип сервиса, то вы можете пользоваться пушами бесплатно без ограничений.
SMTP
Функция SMTP защищает вашу рассылку от попадания в черный список за счет использования белых IP адресов. Технологии криптографической подписи DKIM и SPF, которые используются в рассылках SendPulse, повышают доверие к рассылаемым письмам, благодаря чему ваши письма реже будут попадать в спам или блэк-лист.Боты Facebook Messenger
Facebook чат-бот находится на этапе бета-тестирования. Вы можете подключить его к своей странице и рассылать сообщения подписчикам.Отправка SMS
Через сервис SendPulse легко отправлять-рассылки по базе телефонных номеров. Вначале вам нужно создать адресную книгу с перечнем телефонных номеров. Для этого выберите раздел “Адресная книга”, создайте новую адресную книгу, загрузите номера телефонов. Теперь вы можете создать СМС-рассылку по данной базе. Цена СМС рассылки варьирует в зависимости от операторов связи получателей и составляют в среднем от 1,26 рубля до 2,55 рублей за 1 отправленное СМС.Партнерская программа
SendPulse реализует партнерскую программу, в рамках которой зарегистрированный пользователь по вашей ссылке, который оплатил тариф принесет вам 4000 рублей. Приглашенный же пользователь получает скидку 4000 рублей на первые 5 месяцев использования сервиса.Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!
Оживите свой веб-сайт!
Различные эффекты при наведении могут привнести свежести на страницы вашего сайта. Ранее для любого эффекта нужно было сталкиваться с javascript, но сегодня, после появления технологии CSS3, всё может делать в обход использования javascript.
Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.
01. Увеличение
Демо: Для просмотра
Этот эффект очень просто внедрить, причем это можно реализовать несколькими способами. Мы воспользовались методом, когда к каждому изображению добавляется параметр полей, а затем, при наведении курсора мыши, этот параметр убирается. Допустим, параметр полей начинается на 15 пикселях, а при наведении становится 2 пикселя, что приводит к тому, как будто, изображение подпрыгивает. Вы можете также просто использовать этот эффект и с текстом, даже если ссылки расположены вертикально, а не горизонтально.
Переход здесь можно выставлять по своему усмотрению, причем эффект будет также привлекателен без какого-либо перехода. Мы, например, сделали эффект немного плавным, что, как нам показалось, добавит эффекту изюминку.
CSS-код эффекта Bump Up
Ex1 img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
Ex1 img:hover {
margin-top: 2px;
}
02. Stack & Grow
Демо: Для просмотра
Автор этого эффекта, по видимому, хотел добиться некоего эффекта лампы-лавы, так как при наведении курсора мыши на список ссылок, каждое изображение медленно расширяется, а затем возвращается к первоначальному размеру.
Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.
CSS-код для Stack & Grow
/*Example 2*/
#container {
width: 300px;
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
03. Fade Text in
Демо: Для просмотра
Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.
Для того чтобы текст появился вновь, мы просто изменяем цвет и высоту строки. Когда вы наводите на изображение, текст снова появляется. Очень забавный и лёгкий эффект.
CSS-код эффекта Fade Text In
#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
#ex3 img{
float: left;
margin: 0 15px;
}
04. Crooked Photo
Демо: Для просмотра
Этот эффект очень прост, но он отлично подойдёт для галереи миниатюр. Для начала вам нужно создать сетку с изображениями, а затем вращать изображения при наведении курсора мыши на них, что создает привлекательный эффект.
Здесь нужно использовать много новых значений CSS, поэтому стоит рассматривать также вариант отката для более ранних версий браузеров. В нашей галерее будут использованы переходы, трансформации, а также тени блоков, правда, по вашему желанию. Трансформация будет отвечать за вращение изображения, а переходы будут отвечать за мягкий и плавный эффект.
Здесь вы можете применять псевдо-селекторы.
CSS-код для Crooked Photo
#ex4 {
width: 800px;
margin: 0 auto;
}
#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect
Демо: Для просмотра
Этот эффект немного посложнее в реализации, поэтому нам пришлось немного повозиться с ним, чтобы добиться достойного эффекта. Стандартное положение изображения – слегка прозрачное. Затем, когда вы наводите на изображение, уровень прозрачности понижается, и изображение приобретает первоначальный вид, а также появляется небольшое свечение и отражение (только для браузеров семейства WebKit).
К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.
Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье (David Walsh).
CSS-код эффекта Fade In and Reflect
#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}
#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Заключение
Этих 5 примеров должно быть достаточно для вдохновения вас на создание нечто собственного. Помните, что вы всегда можете поэкспериментировать с уже готовыми примерами, а затем рассказать нам о них.
Если вы встречали другие привлекательные эффекты где-то в сети, то, пожалуйста, расскажите нам и остальным читателям об этом.