8 715 Как создать логотип самому? В этом уроке я расскажу как создать логотип с минимальными затратами времени.
Эффект блеска при наведении на изображение/логотип достаточно прост в реализации и очень эффектен на выходе. Так почему бы не узнать, как он работает?
Что нужно для реализации такого эффекта? Нам нужны HTML элементы и новое свойство CSS3 transition. Поехали!
Изображение блеска
Для реализации нам нужно следующее изображение:
Если изображение больше, чем вам нужно, то его можно обрезать с помощью CSS.
HTML
Для создания эффекта будут использоваться два элемента: один в качестве обертки, другой в качестве блеска. Мы использовали элементы A и SPAN:
|
1 |
<a href="/" class="logo"><span></span></a> |
HTML часть прописали, а теперь перейдем к CSS.
CSS
Стили для элемента A достаточно просты. Их задача — скрыть выступающие края эффекта блеска и задать размеры логотипа/изображения:
|
1 2 3 4 5 6 7 8 |
a.logo { display: block; background: url("logo.png") 0 0 no-repeat; height: 70px; width: 91px; overflow: hidden; } |
Элемент SPAN также очень прост. Нужно установить размеры элемента, background-position изображения блеска и параметры для transition:
|
1 2 3 4 5 6 7 8 9 10 |
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:
|
1 2 3 |
a.logo:hover span { background-position: 100px 100px; } |
В случае с логотипом из примера, понадобится некоторая хитрость, потому что сам логотип намного круглее, чем квадрат. Поэтому скругляем SPAN, чтобы эффект блеска не был на пустом месте:
|
1 2 3 |
a.logo span { border-radius: 50%; } |
Так мы создали эффект блеска на изображении!
Если у вас идеи, как улучшить этот эффект или упростить код, тогда отмечайтесь в комментариях.
