Acrylic, Fluent Design

acrylic-fluent-design.markdown

Acrylic, Fluent Design

A Pen by Andriy Rodzyk on CodePen.

License.

index.html

<section class="flex_center">
	<div class="acrylic">
		<div class="acrylic_wrap"></div>
		<div class="acrylic_text flex_center">
			<img height="256px" src="https://rodzyk.github.io/img/ar.svg" alt="">
		</div>
		
	</div>
</section>
<section>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae architecto sequi sint quidem sunt cupiditate! Libero asperiores repellat reprehenderit distinctio itaque veritatis officia pariatur et dicta ea. Iure, consequuntur incidunt!</p>
	<p>Magnam esse tempora nemo eligendi rem incidunt similique dolorem sit sunt qui, quo dolores pariatur delectus nisi, explicabo non obcaecati enim quis ab nobis unde. Fugiat adipisci possimus maxime facere?</p>
	<p>Illo inventore delectus perspiciatis soluta sed ad nam doloribus minima est perferendis consequuntur sint modi cumque reprehenderit esse, debitis aperiam, atque cum voluptates, rerum quo nihil nisi corrupti at. Molestias!</p>
	<p>Magnam sed excepturi doloremque provident rem! Autem qui praesentium, possimus esse, nihil, architecto eligendi dolor repellendus perferendis hic voluptas voluptatibus similique suscipit commodi fugiat natus! Eos non natus temporibus vitae.</p>
	<p>Quod neque hic quae porro labore reiciendis fuga harum atque, minus tempore voluptas quaerat quam quos, aspernatur inventore, voluptatibus distinctio tempora voluptate est? Eius excepturi obcaecati recusandae veniam omnis dolorum.</p>
	<p>Sapiente, porro hic! Nostrum tempore labore aut maxime esse, dolores eveniet, quae exercitationem deleniti deserunt possimus, voluptates tenetur quis libero ab. Sequi, quibusdam. Asperiores inventore, nulla laudantium est corporis quo.</p>
	<p>Eveniet, culpa laborum. Expedita porro ab quisquam soluta velit sit? Fuga, beatae eos, distinctio iste ab sit sed, culpa odit ea perferendis ipsam qui at dolore adipisci eum! Sint, laboriosam.</p>
	<p>Voluptatibus natus iure ipsam accusantium, deleniti nostrum aliquam placeat in molestias totam dicta illo. Consequatur dolor assumenda commodi. Aut laudantium similique recusandae voluptatem sint ab aliquid porro ut officiis eum!</p>
</section>

style.scss

$blur_radius: 10px;
$back_image: "https://rodzyk.github.io/img/my_heart_is_dead_but_still_red_by_nanomortis-d8hpg04.png";
$back_color: rgba(255,255,255,.2);
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
section{
	height: 100vh;
	padding: 2em;
	position: relative;
	&:first-child{
		background: url($back_image) fixed;
		background-size: cover;
	}
	&:last-child{
		background-color: rgba(240,240,240,1);
	}
}

.acrylic{
	width: 90%;
	height: 320px;
	
	position: absolute;
	overflow: hidden;
	.acrylic_text{
		background-color: $back_color;
		position: absolute;
		top:0;left:0; right:0; bottom: 0;
		z-index: 99;
	}
	.acrylic_wrap{
		position: absolute;
		top: 		-$blur_radius;
		left: 	-$blur_radius;
		right: 	-$blur_radius;
		bottom: -$blur_radius;
		overflow: hidden;
		background: url($back_image) fixed;
		background-size: cover;
		filter: blur($blur_radius);
	}
}

p{font-size: 16px; text-align: justify; display:block; margin: 1em 0;}

.flex_center{
	display: flex;
	justify-content: center;
	align-items: center;
}