Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a snippet referenced in http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/ that outlines how we can utilize pseudo-elements and box-shadows to get HiDPI-friendly geometic shapes into our designs without using images or extra markup.
// snippet referenced in: http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/
// for project: http://terranovachurch.org
.locations .wrapper {
height:210px;
&:after {
// implement the brackets
content:' ';
display:block;
width:45px;
height:135px;
overflow: hidden;
position:absolute;
left:0;
top:-135px;
box-shadow:
0 175px 0 0 $white, // left bracket
915px 175px 0 0 $white; // right bracket
}
.details {
position:absolute;
left:5px;
top:5px;
right:5px;
z-index:999;
// middle separator
&:after {
content:' ';
display:block;
width:1px;
background:$white;
height:125px;
left:480px;
top:40px;
position:absolute;
@include opacity(0.9);
}
}
}
@maxwellnewage
Copy link

maxwellnewage commented Jan 14, 2013

what is this?

@jchristopher
Copy link
Author

jchristopher commented Feb 7, 2013

As per the description and the comment on the first line, please see http://mondaybynoon.com/20130114/css3-pseudo-elements-box-shadows-hidpi-retina-geometric-shapes/ for context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment