MEGA-NEWS - игровой портал, объединяющий в себе множество новостей и публикаций, огромный форум с игротекой и конечно же русскоговорящее комьюнити.
4785
43
29
новостей в ленте
тем на форуме
пользователей
Будь в курсе
Это интересно
Загружай и играй
в разработке...
Вступай в команду
Правила форума Форум игрового портала MEGA-NEWS
ФОРУМ MEGA-NEWS – сообщество пользователей игрового портала.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления в барахолке, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.
ТОП-5 по сообщениям
ТОП-5 по репутации
Страница 1 из 11
Форум » Web-раздел » HTML и CSS » Создание эффекта блеска на логотипе с помощью CSS
Создание эффекта блеска на логотипе с помощью CSS
#1
Менеджер проекта
Менеджер проекта
Статус:
Offline
Регистрация:
11.03.2016
Сообщения:
267
Эффект блеска при наведении на изображение/логотип достаточно прост в реализации и очень эффектен на выходе. Так почему бы не узнать, как он работает?

Что нужно для реализации такого эффекта? Нам нужны HTML элементы и новое свойство CSS3 transition. Поехали!

Изображение блеска

Для реализации нам нужно следующее изображение:



Если изображение больше, чем вам нужно, то его можно обрезать с помощью CSS.

HTML

Для создания эффекта будут использоваться два элемента: один в качестве обертки, другой в качестве блеска. Мы использовали элементы A и SPAN:

Код
<a href="/" class="logo"><span></span></a>

HTML часть прописали, а теперь перейдем к CSS.

CSS

Стили для элемента A достаточно просты. Их задача — скрыть выступающие края эффекта блеска и задать размеры логотипа/изображения:

Код
a.logo {
    display: block;
    background: url("logo.png") 0 0 no-repeat;
    height: 70px;
    width: 91px;
    overflow: hidden;
}

Элемент SPAN также очень прост. Нужно установить размеры элемента, background-position изображения блеска и параметры для transition:

Код
a.logo span {
    display: block;
    background: url("shine.png") -60px -80px no-repeat;    
    transition-property: all;
    transition-duration: .8s;
    height: 70px;
    width: 91px;
}

Последним шагом прописываем стили на действие :hover для A:

Код
a.logo:hover span {
    background-position: 100px 100px;
}

На этом всё!
Форум » Web-раздел » HTML и CSS » Создание эффекта блеска на логотипе с помощью CSS
Страница 1 из 11
Поиск:
Условия предоставления информации
Контакты
В помощь пользователям
Навигация