1 допис з тегом

верстання

/core.php, line 1
Error 2: Use of undefined constant k - assumed 'k' (this will throw an Error in a future version of PHP)

Розмиття для блока

Це просто прекрасно. Отримуємо блок, у якого розмитий фон.


index.html

<html>
	<head> 
		<title> Blur </title>
		<link rel="stylesheet" href="style.css">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<main>
			<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt architecto possimus nihil quo facilis harum, assumenda illo corporis repudiandae rem provident error qui fuga et porro laboriosam atque est debitis?
			<footer><cite>Unnamed</cite></footer>
			</blockquote>
		</main>
	</body>
</html>


style.css

body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  font: 150%/1.6 Baskerville, Palatino, serif;
  height: 200vh;
}

main::before {
  background: url("https://avatanplus.com/files/resources/original/57526cb3cfeab15519f89e8c.jpg") 0 / cover fixed;
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed;
}

body{
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed; 
}

main {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 23em;
  background: hsla(0, 0%, 100%, .25) border-box;
  overflow: hidden;
  border-radius: .3em;

}

main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

Сирцеві файли:
index.html
style.css

2019   css   html   верстання   поПрикладу