News

The art of rendering effective CSS Shapes

Go behind the code of the distinctively styled Publicis90 project to discover how the various animated 3D shapes were created

Publicis90

Go behind the code of the distinctively styled Publicis90 project to discover how the various animated 3D shapes were created

Publicis90

The shapes of things

In combination with the split screen design and bright, sugary colour palette, the most distinctive feature of Publicis90 is its use of shapes. Sized and positioned within GSAP Tweenmax-sequenced transitions, essentially these <div> objects are styled to stack on top of each other with box-shadow skilfully used to add a 3D effect and give depth to the page. Here we’ll discover how the site achieves this by looking at several examples.

Stacking some <div> elements

The first shape we see on Publicis90 is the stack of three crème coloured circles, perched on top of a blue “track” or column. On the page this is very simply constructed with a wrapper <div> containing three nested layers forming each circle shape. The CSS class for the element begins with final sizing, placement and z-index. Check each step’s full code to add the second rectangle shape also.

<div class="column"></div>
<div class="circles">
<div></div>
<div></div>
<div></div>
</div>
CSS:
.circles {
position: absolute;
height: 330px;
width: 330px;
left: 20%;
top: auto;
bottom: 57%;
margin: 0 0 -165px -165px;
z-index: 2;
} 

Setting colour and border

Next the contained elements, the three circles, are assigned a main class that crucially first makes each <div> round by simply setting border-radius to half the size (50%). Each is then made the same crème colour, before setting display to block. Vendor prefixes have been omitted from all CSS for brevity:

.circles div {
border-radius: 50%;
background-color: #F8E2D5;
display: block;
} 

Subsequent sizing and shadow

Using nth-child(n) class selectors, each of the three <div> elements representing the shape are then sized proportionally – staggering the percentage height and widths so they sit inside each other as desired. The z-index values then ensure they stack as expected. In addition, the box-shadow of the lowest and largest base circle is given a box-shadow that is coloured to compliment the element placed behind:

.circles div:nth-child(1) {
box-shadow: 0 30px 50px rgba(73, 142, 150, .4);
height: 100%;
width: 100%;
z-index: 0;
}

.circles div:nth-child(2) {
box-shadow: 0 35px 50px #EDBAA1;
height: 70%;
width: 70%;
z-index: 1;
}

.circles div:nth-child(3) {
box-shadow: 0 30px 50px #EDBAA1;
height: 40%;
width: 40%;
z-index: 1;
} 

Stacking the shapes correctly

The rectangular shape equivalent on the site is produced using an almost identical technique, only changing the proportions and omitting the 50% border-radius used for the circles. However, both require an additional class to pull them into the desired alignment using transform and translate as shown:

.circles div, .rectangles div {
position: absolute;
left: 50%;
top: 50%;
display: block;
transform: translate(-50%, -50%);
} 

Creating the column

The blue column or “track” placed under the element is very simply another <div> placed below. This is the “column” <div> included in the HTML within step 1 and only requires appropriate styling to size it and locate it in correct alignment under the “circles” element. Using border-radius set to the same width as “circles” gives it a rounded domed top to match.

.column {
position: absolute;
left: 20%;
top: auto;
background-color: #7AC5CE;
border-radius: 330px 330px 0 0;
bottom: 0;
height: 69%;
margin: 0 0 0 -165px;
width: 330px;
z-index: 1;
}

Skewing to make slanted

Similarly, the rectangle shape equivalent features a slanted pink flash element underneath. This is formed in a largely identical way to the column, by being sized and positioned as appropriate. However, in this instance a transform is used to skew, rotate and translate it to achieve that final angular slant.

.slant {
position: absolute;
right: 50%;
top: auto;
background-color: #E45E9F;
bottom: 50%;
height: 434px;
margin: 0 -990px -212px 0;
transform: skewX(138deg) rotateZ(24deg) translate(50.7%, 0);
width: 2000px;
z-index: 1;
}

GET THE LATEST ISSUE OF WEB DESIGNER NOW


×