Remembering 911 A Web Designer Memorial Background

As a web designer I am often looking to improve my skills. I found this great site covering CSS backgrounds which is implemented in the the flag like image above. I came across this creative site highlighting background type images using CSS3 for backgrounds. There is a caveat with the CSS patterns that older browsers will break. So use them for your own goals.
I took two of the designs and created this simple CSS background image as a memorial to our fallen soldiers, heros, and citizens.

Below is the code and perhaps if you have some interesting use for the backgrounds let me know. I would love to see what you’ve done with it. If you are looking for some web design help we can help.


<div>
<ul>
<li style="background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 15px 21px,
linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) 15px 21px,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -35px 21px,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -35px 12px,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 30px 12px,
linear-gradient(324deg, #232927 4%, transparent 4%) -20px 46px,
linear-gradient( 36deg, #232927 4%, transparent 4%) 40px 46px,
linear-gradient( 72deg, #fff 8.5%, transparent 8.5%) 40px 46px,
linear-gradient(288deg, #fff 8.5%, transparent 8.5%) -20px 46px,
linear-gradient(216deg, #fff 7.5%, transparent 7.5%) -20px 31px,
linear-gradient(144deg, #fff 7.5%, transparent 7.5%) 40px 31px;
background-color: #232927;
background-size: 25px 25px;
width:650px;
height:200px;
list-style-type:none;">
</li>
<li style="background-color: #c40000; background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255, 1) 50%); background-size: 50px 50px;
width:650px;
height:500px;
list-style-type:none;">
</li>
</ul>
<div style="position:relative;
left:200px;
top:-300px;
width:50%;
background: rgba(255,255,255, .5); ">
<h2 style="font-size:2em;">Happy Fourth of July!</h2>
</div>

About Derek Hanson

Derek Hanson is a digital strategist and founder of Emprise Media, a digital web design and internet marketing firm. You can connect with him on Google+, Twitter, and Linkedin.
This entry was posted in Website Design. Bookmark the permalink.