Transformations! And how I made them

First take a look at the things I made this time:

Sets of pride gradients (bi, transgender, lesbian, transgender and lesbian), that are displayed like whirlpool. They get smaller towards the center and get rotated each time.

Now let's look at these (and refine them).

The setup is: one big container for all of them (the class transform-container), one container for each object to set the position to relative. Then we have two sets of gradients (one of them layed on top and rotated 45 degrees).

Let's take this apart for a single set of gradients!

.gradient-lesbian-single, .gradient-lesbian-single div { background-image: linear-gradient(to right, rgb(173,37,0), rgb(208,126,71), rgba(255, 255, 255, 0.705), rgb(172,79,134), rgb(133,2,79)); background-size: 42% 7%; background-position: top; background-repeat: no-repeat; }
.box-300-with-child-fine { width: 300px; height: 300px; position: relative; }
.box-300-with-child-fine div { width: 90%; height: 90%; top: 5%; left: 5%; }
.rel-pos, .rel-pos div { position: relative; }
.rel-parent { position: relative; }

Fun fact: I had to relearn a bit how this worked myself here!

Now to feed this into the html!

<div class="rel-parent"> <div class="gradient-lesbian-single box-300-with-child-fine rel-pos"> <div >/* insert as many layers deep as you want */</div > </div > </div >

And this is the result:

Refining

I think we can better then this! First we make a new class parent-container and parent-container-300 to set the things we will always need:

.parent-container, .parent-container > div:first-child { position: relative; }
/* bit of future proofing for when we will have more then one element*/ .parent-container > div div, .parent-container > div:not(:first-child) { position: absolute; }
.parent-container, .parent-container div { display: inline-block; }
.parent-container div { width: 300px; height: 300px; }

Now to make classes for the inner div!

.top-left-zero { top: 0; left: 0; }
.top-left-child-5 div { width: 90%; height: 90%; top: 5%; left: 5%; }
/* now we get to the transformations! I made a bunch more of these*/ .rotate-90 { transform: rotateZ(90deg); }

And into the html they go!

<div class="parent-container parent-container-300"> <div class="gradient-lesbian-single top-left-child-5"> <div >/* insert as many layers deep as you want */</div > </div > <div class="gradient-lesbian-single top-left-zero top-left-child-5 rotate-90"> <div >/* insert as many layers deep as you want */</div > </div > </div >

And thats the result!

At last we will add the whirlpool effect:

.rotate-child-5 div { transform: rotateZ(5deg); }

And in the html:

<div class="parent-container parent-container-300"> <div class="gradient-lesbian-single top-left-child-5 rotate-child-5"> <div >/* insert as many layers deep as you want */</div > </div > <div class="gradient-lesbian-single top-left-zero top-left-child-5 rotate-child-5 rotate-90"> <div >/* insert as many layers deep as you want */</div > </div > </div >

The result:

Experimentation!

Now lets just try some different values, since we have more freedom with the details

And that should be all for now! See you next time!

Back to the top