I found a nice looking CSS effect on CodePen by Kyle Wetten and wanted to duplicated this in WordPress using a widget area 🙂
Register a sidebar:
register_sidebar(array(
'name' => 'Glass Header',
'before_widget' => '<div class="glass-header"><div class="drop-shadow"><div class="glass"></div>',
'after_widget' => '</div></div>',
'before_title' => '<span>',
'after_title' => '</span>',
)
);
Output the sidebar somewhere in your theme:
dynamic_sidebar("Glass Header");
Put together the style for your frosted glass:
.glass-header {
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://jarodthornton.com/love/wp-content/uploads/sites/11/2019/09/asphalt-aspiration-clouds-215.jpg);
background-size: cover;
background-position: center;
}
.glass {
height: 100%;
width: 100%;
background-image: url(https://jarodthornton.com/love/wp-content/uploads/sites/11/2019/09/asphalt-aspiration-clouds-215.jpg);
background-size: cover;
background-position: center;
clip-path: inset(1em);
filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
}
.drop-shadow {
height: 200px;
width: 100%;
filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.30));
display: flex;
justify-content: center;
align-items: center;
}
.drop-shadow:before {
content: "";
border-top: 2px solid rgba(225,225,225, 0.2);
border-left: 1px solid rgba(225,225,225, 0.1);
border-right: 1px solid rgba(225,225,225, 0.3);
z-index: 2;
filter: blur(1px);
}
.glass-header span {
position: absolute;
top: 70px;
z-index: 5;
color: white;
font-size: 4em;
letter-spacing: 0.75em;
padding-left: 0.375em;
}
.glass-header .textwidget {
position: absolute;
margin: 70px 0 0 0;
}
@media (max-width: 980px) {
.glass {
}
.drop-shadow:before {
top: 5em;
}
.glass-header span {
font-size: 4em;
top: 50px;
}
.glass-header .textwidget {
text-align: center;
margin: 50px 0 0 0;
}
.glass-header .textwidget p {
margin: 0px 20px;
}
}
@media (max-width: 640px) {
.drop-shadow span {
font-size: 2em;
}
}
Here’s the CodePen https://codepen.io/kylewetton/pen/bGbaazX
Here’s my working example using the code and markup shared here https://jarodthornton.com/love/about/
