Abr@X@bra.ru
Как с помощью CSS сделать эффект матового стекла?
Как с помощью CSS сделать эффект матового стекла?

Как с помощью CSS сделать эффект матового стекла?

23.07.2017
825

В данном посте расскажу как сделать с помощью 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

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




CSS
Читайте также:
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать
Web-разработчик и новый клиент. Выстраиваем правильное общение.

Web-разработчик и новый клиент. Выстраиваем правильное общение.

В данном посте, хочу поделиться как я нашел золотую середину по общению с новыми клиентами, которые обращаются ко мне,...

Читать
Визуализация данных на JS

Визуализация данных на JS

D3 (Data-Driven Documents — Управление данными в документах [досл.]). Она позволяет «оживить» ваш проект, используя...
Читать