News

Use CSS3 to create multiple angled elements

Emulate the look of the BrightMedia site by using multiple elements and versatile CSS3-based tricks.

cssangles

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!

×