30 lines
873 B
HTML
30 lines
873 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script>
|
|
|
|
</script>
|
|
<style>
|
|
/* 'mask-image-slice' without 'fill' clips inner content area away.
|
|
'clip' clips evyerthing outside of rect() away.
|
|
If filter wouldn't be applyed first in the chain, you either see
|
|
blured background in the 'fill' area, or outsite the 'clip' area. */
|
|
div {
|
|
width: 350px;
|
|
height: 350px;
|
|
background-color: red;
|
|
position: absolute;
|
|
-webkit-mask-box-image-slice: 75;
|
|
-webkit-mask-box-image-repeat: stretch;
|
|
-webkit-mask-box-image-source: url(resources/mask.png);
|
|
clip: rect(76px, 274px, 274px, 76px);
|
|
-webkit-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div></div>
|
|
</body>
|
|
</html> |