It's easy to make cute little minimal clouds using a large dashed svg stroke-dasharray. I first tried changing the border radius of a rectangle, but it turns out that the border-radius property scales if the rectangle is scaled.
HTML: This is all you need! If you want a longer cloud, change the width, x2, and stroke-dasharray.
The sky definitely took the longest part, everything else was designed to be as easy as possible. The moon and stars were all svgs created in illustrator, then animated using the @keyframes CSS3 rule. The sun was created purely in css, by setting the border-radius property to 50%.
The stars were made in illustrator with the same technique I used for my thanksgiving greeting. This time, I overlayed a polar grid over a spiral to create a semi-random effect. It would look even better if the center of the polar grid wasn’t the same as the spiral.
To the grid, apply a dotted stroke (dash 1, gap 30, dash 1, gap 60) to create the stars. The spiral has a 3pt stroke, the polar grid is 2pt.
Here’s the code.
HTML: The moon was added as an embedded svg for kicks.
This is the first in a series of posts about making a simple (and cute) CSS3 animation from scratch. I used a few illustrator and CSS3 tricks. Check out these posts if you’re interested in that kind of thing.
Final project HERE and potato-quality gif:
Why yes, that is a burrito house with two cuties laying on a black bean pillow and tortilla blanket.
The first step was figuring out how to realistically change the color of the sky from sunrise to sunset.
Test 1: Conical gradient
I sent myself down the wrong path by looking at too many star timelapse gifs by thinking that the sky in my animation needed to rotate like this, about some point below the horizon.
I started by making a conical gradient in illustrator. Illustrator doesn’t have a conical gradient, so I applied a linear gradient to a stroke and then increased the stroke size to 400pt to create a filled in circle that looked like a CD. I was initially disgusted by this hack method, in disbelief that my dear illustrator was just not capable of outputting a damn conical gradient, but after reading a few blogs, this is in fact how the pros do it. Gross. There’s another way to fake it by blending lines together, but I found it did not scale well.
I tried manually spinning it (cmd-D to repeat transformation)
It was horrible. Shouldn’t have come as a surprise, but it did.
Test 2: Linear gradient
My next step was trying to move a linear gradient. My reasoning was: wait a second, sunrises and sunsets look pretty linear why did I even try a rotary that was dumb.
Surprise! (not really) this didn’t look good either.
I was really missing time. Sure, there’s some grading involved at each frame of a sunset, but overall the whole sky changes color with time, and there’s no way to easily fake this and I’ve already spent too much time trying to evade doing work that isn’t even a lot of work.
Final Test: CSS3 Animation
I painstakingly copied and pasted each of the color stop hex codes AND "location" values into my css file. The location is exactly what it sounds like: it's where in the gradient, from left to right, a specific color is found. I already spent a couple hours getting the linear/radial gradient to be approximately correct in terms of time position, so I wasn’t about to throw away all that work quickly.
Here's what my code looks like for the sky. Surprisingly simple once it was done.
HTML: It's an empty div with a class so we can refer to it in the CSS.
<div class="gradient"></div>
CSS: We assign a width, height, and animation called "SkyAnimation" which lasts for 20 seconds and repeats infinitely, easing in and out each keyframe. In the list of keyframes for SkyAnimation, we refer to keyframes by the percentage of completion of the full animation time. So doing something at keyframe 50% means some CSS code occurs 10 seconds in (50% of 20 seconds). For each keyframe, we assign a background color. To keep the sky at the same color for periods of time (like the day and night) we make two keyframes with the same color, so the color stays constant between (like 8% to 38%). I also made sure that the first and last colors are the same, so the animation looks seamless.
Note, this code snippet is missing the @-webkit-keyframes and @-moz-keyframes which are the same as @keyframes. But hey, this isn't a professional site and I'm assuming people won't use IE4 when viewing it.
TIL
Conical gradients in illustrator can be made with strokes
CSS3 animations can use percentages for keyframe values
Quicktime on mac can take screen captures
That was a lot of work for something that seems like it should be easy...story of my life
to choose the fonts I wrote a small ruby script to randomly select a font from the fonts folder, then manually applied it in illustrator
def cf # define mac os font directory fontList = Dir['/Library/Fonts/*'] numberOfFonts = fontList.length randomIndex = 1 + rand(fontList.length) font = fontList[randomIndex] # remove directory path font = font[15...-4] puts font end cf
next lvl: illustrator script (js) to select fonts + place em
whipped this up at lunch, an attempt at a clean funky thanksgiving greeting because ones I saw on google were uglyy
I think this one is cute and more importantly, delicious
the peas in the background were made in like 30sec by applying a thick (16pt) dashed line to grid and spiral paths. (super cheap trick / illuminati confirmed)
romaincrisis
turnnoffyourmind
areudirty