How to Make Digital 8-Bit Style Corners Using Only CSS
A recent project of ours brought up a bit of discussion on whether to use images or try and develop a CSS method for creating a digital 8-bit style effect for corners. Since we always like a challenge we decided to go the 100% CSS route and the result was beautiful quick rendering 8-bit style corners requiring zero images. There is only one drawback to using this method; you must use a solid color background in your design. We decided that since there are no tutorials that we could find teaching this method we would release it to the design community; we know it’s a very specific style for specific projects but hopefully one day you might find a use for it.
Step 1: Creating the Basic Generic DIV
The first step is to create the basic generic DIV that will house each section’s content. This is all pretty basic CSS and XHTML and pretty self explanatory. The only item to pay special attention to is the relative positioning used on the main DIV, this is needed because we will be absolute positioning our corners inside our main DIV.
CSS
.section{ width: 500px; float: left; border: 10px solid #FF6600; background: #fff; position: relative; } .section_content{ display: block; padding: 25px; overflow: hidden; }XHTML
<div class="section"> <div class="section_content"> Content Goes Here </div> </div>
Step 2: Creating and Positioning the Corners
The next step is to create the corners and position them. To limit the markup we will use the same class for all corners and then position them using a 2nd unique class for each specific corner. You still won’t be able to see any difference from the previous step, so don’t freak out when nothing changes.
CSS
.corner{ width: 15px; position: absolute; z-index: 9; } .tl{ top: -10px; left: -10px; } .tr{ top: -10px; right: -10px; } .bl{ bottom: -10px; left: -10px; } .br{ bottom: -10px; right: -10px; }XHTML
<div class="section"> <div class="corner tl"></div> <div class="corner tr"></div> <div class="section_content"> Content Goes Here </div> <div class="corner bl"></div> <div class="corner br"></div> </div>
Step 3: Styling the Corners
The next step is to add 3 DIVs to each of the main corner DIVs, these 3 DIVs will be our building blocks for creating the 8-bit effect. After you finish this step you will notice there are a lot of alignment issues and things look out of whack, no worries this will be fixed with only a few lines of CSS in the final step.
CSS
.corner .a{ width: 5px; height: 10px; float: left; display: block; background: #fff; } .corner .b{ width: 5px; height: 5px; float: left; display: block; background: #fff; } .corner .c{ width: 10px; height: 10px; float: left; display: block; background: #FF6600; }XHTML
<div class="section"> <div class="corner tl"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <div class="corner tr"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <div class="section_content"> Content Goes Here </div> <div class="corner bl"> <div class="a"></div> <div class="c"></div> <div class="b"></div> </div> <div class="corner br"> <div class="a"></div> <div class="c"></div> <div class="b"></div> </div> </div>
Step 4: Fixing Alignment
Step 4: Fixing Alignment
The last and final step will fix the alignment issues from the previous step, since the XTHML markup is complete all you need to do is apply the CSS and you’re finished.CSS
.tr .a, .tr .b, .tr .c, .br .a, .br .b, .br .c{ float: right; } .bl .a, .br .a{ border-top: 5px solid #FF6600; }
Complete Code
CSS
.section{ width: 500px; float: left; border: 10px solid #FF6600; background: #fff; position: relative; } .section_content{ display: block; padding: 25px; overflow: hidden; } .corner{ width: 15px; position: absolute; z-index: 9; } .tl{ top: -10px; left: -10px; } .tr{ top: -10px; right: -10px; } .bl{ bottom: -10px; left: -10px; } .br{ bottom: -10px; right: -10px; } .corner .a{ width: 5px; height: 10px; float: left; display: block; background: #fff; } .corner .b{ width: 5px; height: 5px; float: left; display: block; background: #fff; } .corner .c{ width: 10px; height: 10px; float: left; display: block; background: #FF6600; } .tr .a, .tr .b, .tr .c, .br .a, .br .b, .br .c{ float: right; } .bl .a, .br .a{ border-top: 5px solid #FF6600; }XHTML
<div class="section"> <div class="corner tl"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <div class="corner tr"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <div class="section_content"> Content Goes Here </div> <div class="corner bl"> <div class="a"></div> <div class="c"></div> <div class="b"></div> </div> <div class="corner br"> <div class="a"></div> <div class="c"></div> <div class="b"></div> </div> </div>
If anybody has any questions or knows of a way to simplify this method please let us know in the comments. Also if you have used this method on any project please leave a link in the comments, we would love to see it in action.