How to transform html Elements with CSS

What I did previously

So this is what I did on my other site:

Pride swirleys! These are an evolution of my last entry: How to make funky shapes with linear gradients!. With the added help of css transform.

(Specificly rotation of each stripe as they go towards the middle.)

First: The HTML!

<div class="parent-container parent-container-300 full-lesbian-gradient uniform-bg-image-midsize"> <div class="bg-image-top top-left top-left-child-5 rotate-child-5"> <i >/* insert as many layers deep as you want */</i > </div > <div class="bg-image-top top-left top-left-child-5 rotate-child-5 rotate-45"> <i >/* insert as many layers deep as you want */</i > </div > /* more Elements, each rotated 45 degrees more, or whatever you want really! */ </div >

As you can see, I now use the 'i' Element for the innermost Parts. That way the whole thing takes up much less space in the actual html file. There are also classes in the innermost Elements, which makes all of fit in two lines easily.

Let's dissect what the classes do (before I show them to you)

  • parent-container defines the properties that are makes these things possible to begin with: position and the display
  • parent-container-300 defines the size of the Shape, here 300px by 300px
  • full-lesbian-gradient defines the basic color/gradient we want (here the shape consist only of a lesbian pride gradient)
  • uniform-bg-image-midsize defines how big the stripes of gradients should be.

And the css:

.parent-container, .parent-container > div:first-of-type { position: relative; }
.parent-container > div i, .parent-container > div:not(div:first-of-type) { position: absolute; }
.parent-container, .parent-container div, .parent-container i{ display: inline-block; }
.parent-container-300 > div { width: 300px; height: 300px; }

So first, div:first-of-type will only effect the first direct child within parent-container. And div:not(div:first-of-type) does the exact opposite! That way I make sure the inner Parts are layed on top of each other, but still push back their neighbours!

By setting the width/height and the display type, I am making sure anything gets displayed at all! (Seriously, tried them without, and nothing will show up on screen!)

Lastly by using inheritance (with > Symbol or an open space) I only have to give the outer parents these classes!

.full-lesbian-gradient > div .full-lesbian-gradient > div i{ 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)); }

Now can I give a lesbian pride gradient to an Element and its children in no time!

.uniform-bg-image-midsize > div .uniform-bg-image-midsize > div i{ background-size: 42% 7%; background-repeat: no-repeat; }

Separating the size values means I have much less code! And I can define the gradients in single line!

And for the inner Elements:

  • bg-image-top: The background-image will anchored at the top (and not the top left or top right)
  • top-left-child-5, rotate-child-5 define the procedural changes to child Elements (the stripes getting smaller and being rotated)
  • top-left (in combination with position) makes sure all inner Elements are layed on top of each other
  • rotate-45 rotates it by 45 degrees (okay, that one was probs obvious!)
.bg-image-top, .bg-image-top i{ background-size: 42% 7%; background-repeat: no-repeat; }

With these the stripes will be in the middle (before rotation). And if I wanted to, I could make a version where it's at top left/right.

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

Finally: some transforms! This one is pretty is fairly uncomplicated: Rotate each child Element by 5 degrees. (Each child also has the rotations of their parent.)

.top-left-child-5 i{ width: 90%; height: 90%; top: 5%; left: 5%; }

Yep, this time I am shrinking the children!

For all the Elements I made class of the type rotate-45 (and 90,135,etc.) that rotate the Element by 45 degrees! And top-left just sets the properties top and left to Zero! Otherwise, the Elements will not be on top of the first on. (And that is the result we want!)

Back to the top