Kosten |
Суббота, 21 Декабря 2019, 04:41 | Сообщение 1 |
|
Здесь мы создаем красивое решение, которое заключается в создание стильного или красивого матового стекла, где по вверх можно разместить описание или название , что смотрится оригинально. Так как оно по умолчанию будет по вверх изображение, где сама структура рисунка дополняет стилистику дизайна.
Все началось с материала, как сделать матовое стекло на чистом CSS, где изначально было 2 версий. Но как оказывается, то при желание можно найти отличные решение, которые пригодятся в создание сайта или отдельных элементов.
Так при установки смотрится матовое стекло, что идет на CSS:
Здесь устанавливаем цветной или яркий фон:
HTML
Код <div class="podesam sentrirovan"> <div class="kudsevad"></div> <div class="dsamulagun sentrirovan"> <h1 class="https://zornet.ru">ZorNet.Ru</h1> <p>ZorNet.Ru — сайт для вебмастера</p> </div> </div>
CSS
Здесь как можно заметить идет 2 фона, который на всю основу, а также на тот вид, который идет в матовом стекле.
Код body {
background: url('https://zornet.ru/_fr/56/7972691.jpg') no-repeat center center fixed;
background-size: cover;
}
.kudsevad {
background: url('https://zornet.ru/_fr/56/7972691.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
filter: blur(13px);
position: absolute;
height: 300px;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
}
.podesam {
border-top: 2px solid rgba(249, 249, 249, 0.55);
border-bottom: 2px solid rgba(245, 240, 240, 0.49);
height: 185px;
width: 100%;
overflow: hidden;
}
.sentrirovan {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.dsamulagun {
height: 200px;
width: 340px;
}
.dsamulagun h1 {
text-align: center;
text-shadow: 1px 1px rgba(35, 33, 33, 0.6);
color: #f7f5f5;
margin-top: 49px;
font-family: 'Lora', serif;
font-weight: 700;
font-size: 35px;
}
.dsamulagun p {
text-align: center;
color: #ffffff;
text-shadow: 1px 1px rgba(0, 0, 0, .1);
margin-top: 0px;
font-family: 'Lato', serif;
font-weight: 400;
font-size: 22px;
}
Также кто знает, как можно создать такой дизайн, то можете добавлять или обновлять эту тему, где сам при находке оригинального стиля матового стекла, то как можно быстрей в этой теме пропишу материал.
Демонстрация
|
| [ RU ] |
|
|
