001 — Title

Suck Less at CSS November Challenge

This November, though ridiculously busy, I’ve set myself (and others) the challenge of practicing CSS, challenging CSS, with the plan of — in general — sucking less at it by the end of the month. If you’d like to participate, feel free to sign up here.

First up in the challenge is this image:

I took a quick look at the code for the challenge (don’t worry, looking at the code is allowed, so long as I write my own code — none of that copypasta nonsense) and saw that the “big picture” here is to make a square, with a gradient background, with three lines of text on it. The first line of text is a series of divs, styled in such a way that they form the numbers 1, 0 and 0. The second and third lines are simply styled text.

So — I made the following game plan:

1. mock the main layout — 400x400px blue container with three lines of text, 100, days, and css challenge
2. apply a gradient and shadow to the main container
3. style lines 2 and 3 of the text
4. convert line 1 of the text to a series of divs, styled so as to spell out 100

Step 1 — mock the main layout

I leaned on flexbox for this step — setting the main container to display flex with a flex direction of column, then filling it with three divs, each also a flex container with a flex direction of row, from that point it was a simple matter of centering everything, putting the text I wanted into each of the divs, and slapping a blue background on the container.

This didn’t involve a whole lot of CSS, just some of the flexbox properties you use pretty much every time you use flexbox:

.container {
  width: 400px;
  height: 400px;
  background: blue;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
  }
}

It didn’t look like much, but at the end of Step 1, I had created the following which, while ugly, has the main layout all handled and me well on the way to beating the challenge:

Initial layout complete

Step 2 — apply a gradient and shadow to the main container

To apply the gradient, I use an awesome Chrome Browser Extension called ColorZilla to pick colors from the lower left and upper right of the original image so I’d have colors to guide the gradient. Lower left: #43399F, Upper right: #4EC5CA. Then I used the Ultimate CSS Gradient Generator (also by ColorZilla) to create a gradient between the two colors and got the following to add to my CSS:

background: #43399f; /* Old browsers */
background: -moz-linear-gradient(45deg, #43399f 0%, #4ec5ca 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #43399f 0%,#4ec5ca 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #43399f 0%,#4ec5ca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43399f', endColorstr='#4ec5ca',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Technically, I just needed

background: linear-gradient(45deg, #43399f 0%,#4ec5ca 100%);

Which is pretty simple to break down, I want a 45 degree gradiant (from lower left to upper right) which transitions from #43399f at the start (0%) to #4ec5ca at the end (100%). ColorZilla was nice though and gave me 4 other CSS rules that will help minimize the chance that my nice gradient will look shoddy if someone has an ancient browser.

Next — the drop shadow (the wee bit of shadow around the box):

For this, I again used a generator, to ensure I ended up with all the extra “old browser” coverage. This time around I used the Box Shadow generator at CSS3Generator.com and tweaked the numbers until I had a box shadow that looked good enough (to my eye). The final numbers: horizontal and vertical lengths: 2px, spread: 10px, and color #cccccc — which resulted in the following CSS:

-webkit-box-shadow: 2px 2px 10px 0 #cccccc;
box-shadow: 2px 2px 10px 0 #cccccc;

And brought my image even closer to my target by getting the main container styled properly:

Gradient and shadow applied to main container.

Step 3 — style lines 2 and 3 of the text

Next up, for styling the “plain text” portion, I hit Google Fonts, a quick glance at the original showed me the font was a sans serif font, so I just winged it and picked a sans serif font I like (Lato).

@import url('https://fonts.googleapis.com/css?family=Lato');
font-family: 'Lato', sans-serif;

With a font picked, I just started tweaking the CSS, first I gave each line it’s own class, then began “fiddling” with font sizes, line heights, weights, etc until the text started approaching my target.

I finally settled on:

.line2 {
  font-size: 83px;
  line-height: 64px;
  font-weight: 700;
}
.line3 {
    font-size: 25px;
    font-weight: 200;
}

Which brought me even closer to the end stage of this challenge:

Step 4 — convert line 1 of the text to a series of divs, styled so as to spell out 100

And, now for the interesting part — How do I make the number 100 just by styling divs. To be honest, I didn’t know, so I did what I do when I don’t know and I “winged it”. Looking at the number 100, I “guess” that I’ll need four divs, one for each of the zeros, and two to make the one, one for the vertical line, and another for the hipster slanted line at the top.

Zeros first — I figured the zeros will just be a div sized big, with a border radius of 100 (’cause that’s what I remember using to make circular avatar pictures) and a pretty wide border — with a transparent background probably so that the container background shows through. Turned out, the zeros were exactly like I thought they’d be except I didn’t have to set any transparency, border radius with nothing in the div worked just fine.

Then, onto the one — my first instinct proved correct, just make two divs, use height and width to get boxes the size I needed to build a “one” — then came the tricky part and the one big thing I learned this challenge transform: rotate(50deg); which is the CSS magic necessary to tilt a div. And, with the one out of the way, my challenge is complete:

You can see my code [here on CodePen].

Retrospective / notes on this challenge:

I think that breaking the challenge up into steps and just whittling away, one step at a time really helped me on this challenge.

Concepts that I found myself leaning on:

• flexbox for layout, made everything easy, just needed a tweak here or there on a margin in the “100” to handle overlaps
• z-index to make sure the proper parts were on top in the “100”
• ColorZilla came in very handy for color picking from the original image.
• Online tools for building gradients and shadows help generate CSS to handle old browser
• The font is a sans-serif type font, picking one from Google Fonts made handling the text a breeze.
• transform: rotate is something I’d not used before, but it was instrumental in getting the top of the 1 in 100 sorted

Onward and upward to the next challenge. This one was simple, but it gave me a chance to work with flexbox, gradients, shadows, and transform — well worth the practice.