Unicorns, Feminism, and CSS3 Gradients

February 18, 2014

unicornlaw

 

During Week 2 of HackerYou I fell into an internet rabbit hole of reading about Cyberfeminism, The Unicorn Law, and the world’s first coder Ada Lovelace.

Like anyone with a newfound obsession and fascination would, I channelled this into the theme of my week 2 project into a website called The Unicorn Law. So while I’m in week 4 of school now, I spent week 3 adding a few tweaks here and there and making the site responsive and adding a smooth scroll effect on the “Trailblazing” page. A fully live version of the site can be seen at localhost:8888/gwhite2k16/unicornfeminism/ and just as an fyi, the contact form is all for show and doesn’t actually work yet. Hey, I’ve only been a web developer for 3 weeks! Give me a break.

I went all out on gradients on this website because gradients are fun and they can get kind of crazy. Also, my logic is this: I have 9 weeks at HackerYou to make some crazy websites, then it’s back to working for clients who want some pretty sensible, clean, lots of white space type designs. I have nothing against doing that, but I firmly believe that if you have the opportunity to go a little crazy, then you should just do it. I didn’t want this website to look like a standard trendy website. I wanted it to look a little weird and ugh, I feel like an asshat for saying this, but I wanted it to look kind of post-modern.

unicornlaw2

 

Anyways, I’ve gotten a lot of comments on the cool gradients on the Trailblazing page, so i thought I’d share my process and simplify it a little bit. So this all began from a codepen I forked called SkatePen and then to see what I ended up making and view the code you can click here.

It’s actually fairly simple, the shapes themselves are just divs with a class of .gradient1 or .gradient2 . Here’s what the html for the looks like:

<div class="secondaryContainer" id="cyberfeminism">
   <div class="gradient1"></div>
   <div class="container clearfix">
      <div class="trailblazersText">
         <h2> "The future depends entirely on what each of us does every day; a movement is only people moving."</h2>
         <h3>- Gloria Steinem</h3>
         <p>The concept of Cyberfeminism defies a strict definition, and most feminist scholars would define Cyberfeminism as a range of debates, theories, and practices. Cyberfeminism is not a subject, but an approach to a subject such as gender stereotypes in cyberspace and gender equality in cyberspace.</p>
      </div>
   </div>
</div>

Most of this text just shows how the page is laid out, but what is really important is the div called gradient1. This is basically a static div that’s been rotated using CSS transformations. Here’s what the that class looks like:

.gradient1 {
   position:fixed;
   width:100%;
   padding-bottom:44%;
   background:linear-gradient(-80grad, transparent, rgba(221, 118, 36, 1));
   -webkit-transform-origin:0 0;
   transform-origin:0 0;
   -webkit-transform:rotate(-25deg);
   transform:rotate(-25deg);
   z-index: 1;
}

Okay, let’s break this down. First of all, we’re zeroing in on the big orange gradient on top of Gloria Steinam’s face. It’s position:fixed so that the rest of the items scroll behind the gradient creating a cool optical illusion. It’s 100% wide, meaning that the orange gradient is the same width as the browser. If the orange gradient wasn’t rotated it would exactly like the pink one below it. The padding-bottom adds more orange makes the orange gradient longer than the div, this helped make it more asymmetrical when it was rotated.

the background is where we add the color – it’s set to a -80grad which is what’s making the color fade out. The transparent is exactly what you think it is, it makes it see-through. Finally, the rgba value specifies the color.

Now we get into the cool part, which is the transformation. At transform-origin:0,0; our rectangular gradient is in neutral. Then when you specify transform:rotate(-25deg); the div rotates itself a -25 degrees.

You may ask why the transformation is written out twice as transform:rotate(-25deg); and -webkit-transform:rotate(-25deg);. Both of these lines of code are doing the same thing, but some browsers require the webkit prefix.

This has been by far my favourite web project I’ve ever worked on and I’m so happy with how quickly the idea kind of came together and the final execution. I don’t think it ends here for The Unicorn Law, however, I’m excited to learn more javascripty things and get into wordpress templating so I can make this a more dynamic site.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *