Html подсветка блока при наведении

.skeleton <
display: flex;
flex-wrap: wrap;
justify-content: center;
background: url(Ссылка на фон на странице);
background-size: cover;
background-position: center;
margin: 20px 0;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
>
.skeleton:hover .sedule:after <
opacity: 1;
>
.skeleton .sedule <
background-color: #4f93ce;
border-radius: 10px;
display: flex;
flex-direction: column;
position: relative;
width: calc(33.333% — 20px);
margin: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
opacity: 0.95;
>
@media screen and (max-width: 1534px) <
.skeleton .sedule <
width: calc(50% — 20px);
>
>
@media screen and (max-width: 520px) <
.skeleton .sedule <
width: calc(100% — 20px);
>
>
.skeleton .sedule:hover:before <
opacity: 1;
>
.skeleton .sedule:before,
.skeleton .sedule:after <
border-radius: inherit;
content: «»;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
transition: opacity 500ms;
width: 100%;
>
.skeleton .sedule:before <
background: radial-gradient(600px circle at var(—mouse-x) var(—mouse-y), rgba(191, 226, 255, 0.4), transparent 40%);
z-index: 3;
>
.skeleton .sedule:after <
background: radial-gradient(500px circle at var(—mouse-x) var(—mouse-y), rgba(191, 226, 255, 0.9), transparent 40%);
z-index: 1;
>
.skeleton .sedule .sedule-content <
background-color: #337AB7;
border-radius: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 78px 16px 16px;
z-index: 2;
height: 100%;
line-height: 1.2;
margin: 2px;
>
.skeleton .sedule .sedule-image <
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
>
.skeleton .sedule .sedule-image i <
font-size: 64px;
color: #16354f;
>
.skeleton .sedule .sedule-image img <
height: 64px;
>
.skeleton .sedule .sedule-image svg <
height: 64px;
fill: #16354f;
>
.skeleton .sedule .sedule-title <
font-size: 18px;
font-family: ‘Roboto’, sans-serif;
padding: 10px 0;
color: #BFE2FF;
text-transform: uppercase;
font-weight: 600;
>
.skeleton .sedule .sedule-text,
.skeleton .sedule .sedule-text p <
font-size: 15px;
font-family: Verdana, sans-serif;
color: #FFF;
margin: 0;
line-height: 1.2;
>
.skeleton .sedule .sedule-text p:not(:last-child) <
margin-bottom: 10px;
>

let skeleton = document.querySelectorAll(«.skeleton»);
for( let i = 0; i < skeleton.length; i++)<
skeleton[i].onmousemove = e => <
for(const sedule of document.getElementsByClassName(«sedule»)) <
const rect = sedule.getBoundingClientRect(),
x = e.clientX — rect.left,
y = e.clientY — rect.top;
sedule.style.setProperty(«—mouse-x», `$px`);
sedule.style.setProperty(«—mouse-y», `$px`);
>;
>
>

Полностью стиль дизайна выполнен на стилистике CSS, что закреплена под основой, а значит вы сами можете поставить тот цветовой оттенок, что соответствует вашему сайту или блогу.

Также здесь присутствуют небольшие тени, которые в большинстве сделаны, чтоб подчеркнуть основу каркаса, и также меняются при наведение, где проводя курсор, за ним следует освещение.

Источник

Эффект свечения при наведении на HTML и CSS

Что таким же образом можно самостоятельно подключить под разные элементы, где вам нужно видеть такой яркий эффект, это от разного строение, до простой кнопки. Как уже можно понять, что изначально эти кнопки находятся на начальной стадии, когда на них нет эффектов свечения. Но когда вы наведете на него курсор, он начнет светиться на заднем плане, что отлично смотрится на темном фоне, а также на светлом, где просто стилистику цвета подгоняем под свой стиль сайта.

При проверки по корректной работе:

.kentrovos <
display: flex;
text-align: center;
align-items: center;
justify-content: center;
>
.adekopas <
position: relative;
margin: 0 50px;
background: #111;
>
.knopas <
height: 68px;
width: 218px;
border-radius: 50px;
>
.cumerence <
height: 196px;
width: 196px;
border-radius: 50%;
>
.adekopas button, .adekopas span <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>
.adekopas button <
background: #252424;
color: #eceaea;
outline: none;
border: none;
font-size: 20px;
z-index: 9;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
>
.knopas button <
height: 58px;
width: 208px;
border-radius: 50px;
>
.cumerence button <
height: 176px;
width: 176px;
border-radius: 50%;
>
.adekopas span <
height: 100%;
width: 100%;
background: inherit;
>
.knopas span <
border-radius: 50px;
>
.cumerence span <
border-radius: 50%;
>
.adekopas:hover span:nth-child(1) <
filter: blur(7px);
>
.adekopas:hover span:nth-child(2) <
filter: blur(14px);
>
.adekopas:hover <
background: linear-gradient(#11ecd8, #efd80e, #ec0dd1);
animation: rotate 1.5s linear infinite;
>
@keyframes rotate <
0% <
filter: hue-rotate(0deg);
>
100% <
filter: hue-rotate(360deg);
>
>
@media (max-width: 640px) <
.kentrovos <
flex-wrap: wrap;
flex-direction: column;
>
.adekopas <
margin: 50px 0;
>
>

Надеюсь, вам понравился этот эффект свечения и вы поняли основные коды и концепции. Если вы новичок и у вас есть базовые знания HTML и CSS, вы также можете создать этот тип анимации.

Источник

Анимированная светящаяся при наведении кнопка с помощью CSS

Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна.

HTML для кнопки

.btn < position: relative; display: inline-block; width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 30px; z-index: 1; >.btn:hover < animation: animate 8s linear infinite; >@keyframes animate < 0% < background-position: 0%; >100% < background-position: 400%; >> .btn:before < content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: .5s; >.btn:hover:before

Пример того, как будет выглядеть анимированная кнопка

Видео урока, как написать код для данной светящейся кнопки. Я бы пекомендовал, не копирвоать код, а написать его по этому видео. Это зайет на 2 минуты больше времени, но будет понятна логика, как работает анимация «свечения».

Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…

Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео…

Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока…

Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….

Здравствуйте, кнопка просто супер . Все отлично, но есть маленький нюанс: в браузере Safari при выделении кнопки появляется прямоугольник. На сколько я понял из-за фильтра filter: blur
К Гугл Хроме все отлично отображается. Не подскажите, как можно поправить данный нюанс , чтобы и в Сафари отлично отображался ?

Кстати Сафари схож с браузером Мозила

Проблему видел, как вылечить на 100% не знаю, но на вскидку пару вариантов попробовал, если уменьшить blur и увеличить размер псевдо-элемента, то рамка пропадает, но и фон выглядит меньше, не таким светящимся. А иначе в Сафари выглядит как-будто фон ограничивается и обрезается.

Источник

Смена фона блока информации при наведении мыши

В этом уроке мы будем учиться делать такие, блоки, которые при наведении на них курсора мыши подсвечиваются.

Пример таких блоков Вы можете посмотреть здесь

Реализация данного метода состоит из HTML и CSS части.

Блоков может быть и больше, добавляются они дублированием контейнера

#links ul list-style-type: none; 
width: 700px; 
> 
 
#links li border: 1px dotted #999; 
border-width: 1px 0; 
margin: 5px 0; 
> 
 
#links li a < 
color: #990000; 
display: block; 
font: bold 120% Arial, Helvetica, sans-serif; 
padding: 5px; 
text-decoration: none; 
> 
 
* html #links li a < /* make hover effect work in IE */
width: 700px; 
> 
 
#links li a:hover background: #ffffcc; 
> 
 
#links a em < 
color: #333; 
display: block; 
font: normal 85% Verdana, Helvetica, sans-serif; 
line-height: 125%; 
> 
 
#links a span color: #125F15; 
font: normal 70% Verdana, Helvetica, sans-serif; 
line-height: 150%; 
>

Свойство width и цвета подсветки блоков и текста устанавливайте на своё усмотрение, в зависимости от того, какой ширины и раскраски должны быть Ваши блоки.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.smileycat.com
Перевел: Евгений Попов
Урок создан: 11 Мая 2008
Просмотров: 55478
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник