В этом мануале узнаете как можно сделать адаптивную фоновую подсветку виде TV каркаса. Иногда нам нужно разместить изображение в красивом обводе, где все делается для того, чтоб как можно больше обратили внимание. Здесь сделаем адаптивный обвод, в котором можно разместить что то под функциями или простое изображение, что гораздо оригинальнее смотрится.
Так как все изначально сделано под темный фон, то здесь будут присутствовать светлые тени, что появятся при наведение курсора. Что именно идет один эффект, который вы самостоятельно можете выставить в закрепленной стилистике.
HTML
Код
<div id="malerutext-sarotunim">
<div id="delpoisanguis">
<div id="meaavoni-dascultiplie"></div>
</div>
</div>
CSS
Код
#malerutext-sarotunim {
max-width: 1024px;
margin: auto;
}
#delpoisanguis {
background: #000;
position: relative;
border-top: 3px solid #888;
margin: 5%;
padding: 2% 2% 4% 2%;
border-radius: 10px;
border-bottom-left-radius: 50% 2%;
border-bottom-right-radius: 50% 2%;
transition: margin-right 1s;
}
#delpoisanguis:after {
content: '';
display: block;
position: absolute;
bottom: 3%;
left: 36%;
height: .5%;
width: 28%;
background: #ddd;
border-radius: 50%;
box-shadow: 0 0 3px 0 white;
}
#meaavoni-dascultiplie {
position: relative;
background-color: #777;
background-size: cover;
background-position: top center;
height: 0;
padding-bottom: 56.25%;
position: relative;
overflow: hidden;
}
@media all and (min-width: 960px) {
#delpoisanguis {
-webkit-animation: tvflicker .2s infinite alternate;
-moz-animation: tvflicker .5s infinite alternate;
-o-animation: tvflicker .5s infinite alternate;
animation: tvflicker .5s infinite alternate;
}
@-webkit-keyframes tvflicker {
0% { box-shadow: 0 0 100px 0 rgba(200,235,255,0.4); }
100% { box-shadow: 0 0 95px 0 rgba(200,230,255,0.45); }
}
@-moz-keyframes tvflicker {
0% { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
}
@-o-keyframes tvflicker {
0% { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
}
@keyframes tvflicker {
0% { box-shadow: 0 0 100px 0 rgba(225,235,255,0.4); }
100% { box-shadow: 0 0 60px 0 rgba(200,220,255,0.6); }
}
}
Демонстрация
