Как сделать блик css
Анимированный блик для кнопок на CSS3
Все исполнено на чистой стилистике, где вы самостоятельно можете все оформить под ваш дизайн. А также эффект заключается в том, что будет блик пробегать по самой основе кнопки, где задаем скорость и выставляем яркость блика. Что изначально можно посмотреть на demo страницах, где также представлено несколько вариантов.
Желтая кнопка с анимированной вспышкой объектива.
.preview-block__btn <
max-width: 350px;
margin-top: 35px;
>
На этом установка завершена.
Серая анимированная кнопка с бликами
a.button <
width: 200px;
height: 50px;
background: #333;
display: block;
position: relative;
margin: 50px auto 0;
overflow: hidden;
border: 1px solid #333333;
color: white;
text-decoration: none;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-box-shadow: 0px 0px 20px 10px white;
-moz-box-shadow: 0px 0px 20px 10px white;
box-shadow: 0px 0px 20px 10px white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
На этом установка завешена.
Красивый эффект при наведении курсора мыши на кнопки
.icon <
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
>
.icon:nth-child(1) <
background: cornflowerblue;
>
.icon:nth-child(2) <
background: salmon;
>
.icon:nth-child(3) <
background: gray;
>
/**
* The «shine» element
*/
.icon:active:after <
opacity: 0;
>
Здесь один эффект блика представлен под разную гамму цвета.
Анимированный блик у кнопки на чистом CSS
Различные hover эффекты на кнопках служат для привлечения внимания пользователей, чтобы побудить их к активным действиям. Сегодня мы рассмотрим, как создать анимированный блик при наведении на кнопку.
Позиция кнопки на экране
Как всегда начнем с создания контейнера, куда и поместим нашу кнопку. Обратите внимание, что я не использую тег button, а сразу прописываю ссылку с классом button. Дабы избежать лишнего кода (кнопка + ссылка) в HTML разметке.
По умолчанию кнопка прижата к левому верхнему углу браузера, чтобы расположить ее по центру экрана, зададим следующие CSS свойства контейнеру.
.container <
width: 100%; /* ширина на всю ширину браузера */
height: 100vh; /* на всю высоту первого экрана */
display: flex; /* делаем контейнер гибким */
justify-content: center; /* по центру по горизонтали */
align-items: center; /* вертикальное центрирование */
>
Создание кнопки
Теперь с помощью CSS стилей создадим саму кнопку. Для разметки кнопки мы использовали строчный элемент a и чтобы иметь возможность применять к кнопке блочные CSS свойства (отступы, рамки), отобразим кнопку как строчно-блочный элемент.
button <
display: inline-block;/* отображать как строчно-блочный элемент*/
text-decoration: none;/* убираем дефолтное подчеркивание у ссылки*/
font-family: ‘Roboto Condensed’;/*название шрифта*/
text-transform: uppercase;/*трансформация в заглавные буквы */
font-weight: 900;/*толщина шрифта*/
color: #fff;/*цвет текста на кнопке*/
font-size: 30px;/*размер шрифта*/
background-color: darkred;/* цвет кнопки */
padding: 20px 60px;/* расстояние от текста до края кнопки */
position: relative;/* относительное позиционирование */
border-radius: 10px;/* радиус скругления углов*/
overflow: hidden;/* спрятать все лишнее за пределами кнопки*/
>
CSS оформление блика
Для создания блика не нужно создавать новый элемент, а воспользуемся псевдоэлементом before. Наложим сверху полупрозрачную псевдокнопку с шириной на одну треть меньше оригинальной кнопки.
button:before <
content: «»; /* отображает псевдоэлемент */
position: absolute; /* абсолютное позиционирование */
top: 0; /* верхняя координата */
left: 0; /* левая координата */
width: 2em; /* относительная ширина */
height: 100%; /* высота как у оригинала */
background-color: rgba(255, 255, 255, 0.3); /* белый цвет с полупрозрачностью */
>
transform: translateX(-0.5em) skewX(-45deg);
Если мы хотим, чтобы блик появлялся при наведении, то изначально нужно его скрыть, изменив значение у translateX.
transform: translateX(-4em) skewX(-45deg);
Анимация блика
.button:hover:before <
animation: moveLight 0.5s;
>
@keyframes moveLight <
from <
transform: translateX(-4em) skewX(-45deg);
>
to <
transform: translateX(10em) skewX(-45deg);
>
>
Посмотрите пример на CodePen
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Эффект блеска для изображений сайта на CSS3
В данном уроке мы рассмотрим как создать достаточно простой эффект блеска для изображений реализованный исключительно с помощью css. С помощью данного эффекта можно скрасить различные изображения на сайте, к примеру стилизовать социальные закладки или логотип. Основная идея состоит в том, когда изображение активно, то по нем пробегает блик, который привлекает взор. Мы не будем использовать сторонних ‘тяжелых’ плагинов, все будет реализовано достаточно просто, чтобы по максимуму упростить и ускорить загрузку.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Для демонстрации нам понадобятся несколько изображений, мы их позаимствовали с ресурса tumblr. HTML разметка достаточно простая, мы не будем останавливаться на ней, просмотреть ее содержание можно в исходниках.
Шаг 1. CSS
Для достижения данного эффекта нам понадобится градиентная заливка, кроме этого мы будем подключать изображения через css. Функция figure:after будет отвечать за прозрачный слой на изображении, который создает иллюзию наложения стекла на изображении.
Пробегающий анимированный блик на кнопке Elementor
Очень много запросов было по поводу того как сделать эффект пробегающего блика на кнопке да ещё и в конструкторе Elementor. Сам эффект блика на кнопке я взял из одного примера, немного доработал и интегрировал в Элементор.
Для работы мы будем использовать бесплатную версию плагина Unlimited Elements. С его помощью можно создавать собственные виджеты для Elementor из любого кода, который вы можете найти в интернете.
Скачать архив готового виджета можно по этой ссылке и импортировать к себе.
HTML код будущей кнопки
Вы можете использовать этот код просто верстая собственную тему, вставить в существующую или интегрировать эффект пробегающего блика на кнопке в конструктор сайтов и страниц Elementor. Во всех случаях этот код сработает.
Важное исправление
В видео я допустил небольшую погрешность и сделал поле для ссылки простым текстовым полем. Вам нужно изменить тип атрибута с Текстовое поле, на Ссылка, обновить атрибут и обязательно нажать обновить виджет.
После этого перезагрузите документ. Поле для ссылки обновится и примет привычный вид. Для него начнут работать стандартные правила динамики. Это значит, что можно и ссылку из произвольного поля вытащить, и попап ей назначить.
Кстати, в архиве, который можно скачать в зелёном блоке выше, уже всё исправлено.
Где брать идеи эффектов
Идеи эффектов и сам код я часто ищу на сервисе Codepen. Потрясающее сообщество и платформа для демонстрации кода имеет библиотеку народного творчества, которое изумляет представленными решениями.
Обновления статьи
Здесь буду публиковать все изменения, которые вносил в код. Архив по ссылке выше также обновляется по мере исправлений и дополнений.
11.12.2019 — Исправлено: одинаковое выравнивание для всех кнопок на странице
Кнопка с анимацией для сайта на CSS
Дополнительное видео
В данном уроке реализуем простой вариант анимированной кнопки на CSS. Задействуем в уроке псевдоэлементы ::before и ::after, для анимированного появления используем transition, а при помощи position и overflow, от центруем кнопку и скроем все лишнее за ее пределами.
See the Pen QOZGbj by Denis (@Dwstroy) on CodePen.
Создаем кнопка с анимацией для сайта
На этом с index файлом работа заканчивается, и переходим в файл стилей.
Оформляем ссылку под стиль кнопки
Первым делом выравниваем ссылку посередине экрана.
Вторым этапом, оформим ссылку под вид кнопки.
Делаем об водку в три пикселя, шрифт побольше, задаем цвет, уберем подчеркивание, делаем все буквы заглавными, делаем ширину и высоту, но так как ссылка сейчас встроенный элемент, присваиваем ей ( display: block; ) тем самым сделали ее блочным.
Создаем и анимируем псевдоэлементы
Выравниваем его по левому краю, а так как это блик, сделаем его немного прозрачней.
Cразу анимируем его при наведении, а потом по такой же схеме сделаем второй псевдоэелемент.
Для анимации, нам нужно текущий псевдоэлемент передвинуть в нулевое положение, то есть, что бы он занял область кнопки.
Обращаемся к кнопке при помощи псевдокласса, и указываем у нее отступы слева в ноль.
Для ::after отдельный делаем стиль, где убираем прозрачность.
И добавляем псевдоэлемент при наведении.
Так, и в принципе остается добавить ( overflow: hidden; ), что бы скрыть все за пределами кнопки и мы получили такую простенькую анимацию.
Попробуйте поиграться с настройками, с позиционируйте элементы по разным краям и сводите их при наведении, а результатом обязательно делитесь в комментариях.