Exercise 3: Visual Effects

I experimented with these techniques from Chapter 4

A One Sided Shadow

.one-sided-shadow {
box-shadow: 0 5px 4px -4px black;
}

B Irregular Drop Shadow

.irregular-shadow {
border: 30px dotted rgba(219, 39, 72, 1);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}

C Color tint

.tint {
width: 90%;
margin: 0 auto;
height: 300px;
background-image: url("images/37.png");
background-size: cover;
background-color: hsl(349, 71%, 51%);
background-blend-mode: luminosity;
transition: .5s background-color;
}

.tint:hover {
background-color: transparent;
}

D Frosted Glass

.frosted-bg, .frosted-bg code {
background: url("images/37.png");
}

.frosted-bg h2 {
color: rgba(252, 253, 255, 1);
}

.frosted-bg code {
width: 100%;
height: 100%;
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}

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

E Folded Corners

.folded-corners {
background: linear-gradient(-150deg, transparent 1.5em, rgba(252, 253, 255, 1) 0);
}

.folded-corners::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 1.73em; height: 3em;
background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: .5em;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
}