Here I am on my last segment of the Dash courses!
For this segment, my client is an eccentric millionaire named Cotter. He likes robots.
I'd be Cotter's best friend, because he looks kinda cute-ish maybe and he also has a lot of money. But alas, I am not anywhere near being a robot.
Yet.
To please Cotter and provide a nice foundation for asking him if he'll be my sugar daddy, I'm going to have to learn about making shapes with HTML and CSS. Ian already had me so an exercise where I made a box that flashes back and forth between blue and red if I click it, but this may be more intense.
I'm also going to learn more about borders, and gradients, and background-size stuff. Sounds fun. LET'S GET TO IT.
So, by default a div is three things.. invisible, a rectangle based on the size of its containing element, and sexually frustrated. In the past, I inserted things into the div (color, text, pictures) to sate its burning desire to fornicate. This time, I'm going to shape divs and rub them all against each other in some softcore-porn-esque way to make them look like a robot.
...is it getting warm in here?
So since divs are born rectangles, it takes a little convincing to get them to loosen up and stop being so straight and just be a circle for a day or two. We do that with alcoho--I mean with border radius! Adding a border radius adds curves to your div.
I just assuming that whatever value you give the border radius, it will reach out to the border and say "okay, from the center of the element, the border has a radius of this" and that makes sense to me. If you set border radius to one value, then you get something that's completely rounded. If the border radius is at least half the length of the shape, then you get a circle.
The syntax is border-radius: top-left top-right bottom-right bottom-left; so if you only give some of the corners a radius to work with, you'll only have those parts of the rectangle rounded out. Simple enough.
Trapezoids are a bit more complicated. Because they have sharp edges, we don't use border-radius for something like a triangle. Instead, we move the border around the div.
Step 1: Make a div with some size (a size of 0 works, too)
Step 2: Add border thickness and color/transparency to create a shape that emanates from the div (which is invisible because it has no color).
Here's an example of a trapezoid I just made and some explanation below:
The div itself has no height, and a width of 140px. If it had no width, the middle square part would be gone and this would be a triangle.
The top border extends upwards 300px. Technically, the div's location in this picture is the very bottom border of the trapezoid. It has the 140px width and is invisible.
From here we create borders to the left and right of the div. Because there is no border on the BOTTOM of the div, the border on the sides stretches straight out from the center of the div, and connects to the top corners of the div. The color is transparent, so it kind of cuts triangles out of the div which would normally be a square.
Here's another illustration of the div (hooray MS paint skills):
My drawings should be in the fucking
MoMA.
Adding curves to the corners of this would let you shape it even more! I'm sure you guys could imagine the number of phallic divs I'm making right now.. tee-hee.
So I've done some fiddling and some rounding of edges and now I have a robot body, a wheel it rolls around on a-la the maid in The Jetsons, and a nice little head-shape. What he needs are glowy eyes. "How are the eyes going to be glowy?" you ask as you hang my illustration of my div above your mantle in your den... well I'll tell you how... RADIAL GRADIENTS.
Pop some radial gradients into the background and BAM, you got a big eye in the middle of the div. Adjust the background size of your (invisible) div, and the radial eye will start repeating, making two eyes! Or four! Or ELEVEN MILLION.
I'm not going to show you guys radial gradient things because this post is long enough.. but here is the syntax:
radial-gradient(shape, centercolor, outercolor);
In this case we made the shape circle, the center color "white 15%" and the outercolor "transparent 40%".. the percentages correlate to opacity so it makes it look more glowy.
Woohoo! After adding another little div to make an antenna, stuff is looking like a robot!
Hooray. Should put a Santa hat on him considering that it's Christmas eve... maybe later.
Anyway, the robot needs to do more stuff! It will start taking commands, moving its arms (which are yet to exist) and blinking its laser eyes. Exciting.
More to come.