Новости и блог цифрового агентства G-FX Digital

Данный эффект матового стекла широко применяется в системе Mac OS, Windows 10, да и просто он прикольный.

В данном посте расскажу как сделать с помощью CSS, эффект матового стекла. Данный эффект широко применяется в системе Mac OS, Windows 10, да и просто он прикольный.

1.Создаем разметку в HTML

Я открою свой редактор, создам в папке проекта новый файл – index.html со стандартной разметкой.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="main.css"/>

</head>

<body>

</body>

</html>

Все что нам нужно для начало, это пустой div.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<div></div>

</body>

</html>

2. Подключим стили

Далее давайте создадим файл main.css и подключим его к нашей странице.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="main.css"/>

</head>

<body>

<div></div>

</body>

</html>

В нем напишем первое правило с помощью которого, обнулим все отступы.

* {

margin: 0;

padding: 0;

}

3. Добавим фон

Добавим фон для нашей старины, повесим его на body. С помощью данных правил, фон будет равномерно растянут на всю ширину экрана.

body {

background-image: url('http://bit.ly/2gPLxZ4');

background-size: cover;

background-attachment: fixed;

}

4. Добавим стили для div

Теперь мы дадим некоторую ширину и высоту нашему div с наследованием фона.

div {

background: inherit;

width: 250px;

height: 350px;

position: absolute;

}

5. Наложение эффекта

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

div:before {

  content: '';

  width: 300px;

  height: 400px;

  background: inherit;

  position: absolute;

  left: -25px;

  top: -25px;

  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);

  filter: blur(10px);

}

Что-то поменялось, но это не то, что нам нужно.

6. Доводим до идеала

Я внесу еще несколько строк кода в стили, чтобы наш эффект стал выглядеть лучше.

div {

  background: inherit;

  width: 250px;

  height: 350px;

  position: absolute;

  top: 50px;

  left: 50px;

  overflow: hidden; /*добавил новое правило*/

}

Теперь форма краев стала гораздо четче и мы получили, что хотели.

Готовую работу, можете посмотреть на Codepen

Надеюсь, вам понравилась эта статья. Если у вас есть какие-либо вопросы, не стесняйтесь, пишите.

Возврат к списку