• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать профиль TV в адаптивной форме на CSS (Создаем адаптивную фоновую подсветку для ТВ или монитора)
Создать профиль TV в адаптивной форме на CSS
Kosten
Дата: Суббота, 2018-11-03, 21:19 | Сообщение 1
Администраторы
Сообщений:20363
Награды: 56


В этом мануале узнаете как можно сделать адаптивную фоновую подсветку виде 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); }
    }
}


Демонстрация
Прикрепления: 4483711.png(4.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать профиль TV в адаптивной форме на CSS (Создаем адаптивную фоновую подсветку для ТВ или монитора)
  • Страница 1 из 1
  • 1
Поиск: