• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать матовое стекло с описанием в CSS (Как сделать красивое матовое стекло при помощи стиля CSS)
Создать матовое стекло с описанием в CSS
Kosten
Дата: Суббота, 2019-12-21, 04:41 | Сообщение 1
Оффлайн
Администраторы
Сообщений:27454
Награды: 61


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

Все началось с материала, как сделать матовое стекло на чистом CSS, где изначально было 2 версий. Но как оказывается, то при желание можно найти отличные решение, которые пригодятся в создание сайта или отдельных элементов.

Так при установки смотрится матовое стекло, что идет на CSS:



Здесь устанавливаем цветной или яркий фон:



HTML

Код
<div class="podesam sentrirovan">
<div class="kudsevad"></div>
<div class="dsamulagun sentrirovan">
    <h1 class="http://zornet.ru">ZorNet.Ru</h1>
    <p>ZorNet.Ru — сайт для вебмастера</p>
  </div>
</div>

CSS
Здесь как можно заметить идет 2 фона, который на всю основу, а также на тот вид, который идет в матовом стекле.

Код
body {
  background: url('http://zornet.ru/_fr/56/7972691.jpg') no-repeat center center fixed;
  background-size: cover;
}

.kudsevad {
  background: url('http://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;
}

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

Демонстрация
Прикрепления: 3397016.jpg(40.8 Kb) · 7643185.jpg(45.5 Kb) · live-css-blur.zip(3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать матовое стекло с описанием в CSS (Как сделать красивое матовое стекло при помощи стиля CSS)
  • Страница 1 из 1
  • 1
Поиск: