Starting styles
To re-create the look of brightmedia.pl, we’re going to overlay a number of <div> elements on a black page. CSS is used to size and position them as desired, before using CSS3’s 2D transforms and gradient options. This way we can quickly achieve those crosshatched translucent rainbows the site opens with, adding a real sense of depth. Begin with a new HTML document, styled as follows.
001 *{ margin: 0; padding: 0; border: 0; }
002 body {
003 background: #000;
004 }
Container box
We start with a centralised <div> container. The dimensions are arbitrary, and we’re working in full resolution for purposes of illustration, but you want a box to form a starting point for the subsequent layers. While previewing the page to check positioning you can give this box a background colour, but eventually this should be set to ‘none’ to render invisble.
001 .myContainer{
002 background:none;
003 margin:250px auto;
004 width:1800px;
005 height:700px;
006 }
001 <body>
002 <div class=”myContainer”></div>
003 </body>
Additional layers
Our gradient layers we’ll call ‘shards’ here and, once you’ve added one, the principle is identical for adding all five (in this case). All start as square or rectangular <div> elements but we first use 2D transforms – primarily the skew method – to slant them into diagonals. All are slanted by the same angle, either left 45 degrees or right -45 degrees.
001 <!-- HTML -->
002 <div class=”myContainer”>
003 <div class=’shard1’></div>
004 <div class=’shard2’></div>
005 …
006 </div>
001 /* CSS */
002 .shard1 {
003 width:550px;
004 height:800px;
005 float:left;
006 margin:-15% 18% 0 10%;
007 transform: skew(45deg,0deg);
008 }
009 .shard2 {
010 width:400px;
011 height:800px;
012 float:left;
013 margin-top:10%;
014 transform: skew(45deg,0deg);
015 }
Chasing rainbows
Once you have the <div> shards positioned as desired, you can apply the various gradients. Our example works best with linear gradients but radial effects are available too. To add them you need to insert variants of the following lines into each shard CSS class defined above. You run the pattern to left, right, top or bottom and set the points of colour using the rgba() method and colour values. This way we can set transparency levels (0-1) using the last number.
001 background: linear-gradient(to bottom, rgba(229,243,12,0), rgba (243,61,12,0.4), rgba(12,99,243,0)); 002 background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.9));
Repeating page pattern
The best results can be achieved when the colours overlay and the transparency levels are low enough to let the below show through. To take things further and follow BrightMedia’s inspiration, our page itself has a repeating background pattern that again shows through. This is simply a 200 x 200 transparent PNG showing a dot emanating 45 degree lines, drawn in a slightly lighter shade to our page colour. Add to the body class as shown.
001 body {
002 background: url(dots.png) repeat fixed center, #000;
003 }
Preview, edit, repeat
You will want to regularly save and preview your page, nudging the positional CSS values and sizes of the various ‘shards’ until they reside as desired. It’s a process of trial and error, however many of the best results happen here by accident when the various <div> elements overlap in ways you wouldn’t expect. Experiment with it and be inspired!