Day 50: Learning CSS Variable by Building a City Skyline (Part 9)

Another day to show you 10 steps I took learning CSS Variables by building a city skyline.

  1. Filled in the windows with the secondary color for this building (var(--window-color1). Also added a margin of 10% to give the windows some space.

Day 50 1a.png

Day 50 1b.png

  1. Added display: flex and flex-wrap: wrap to the window container. This put the windows side by side, and then push them down to a new row when they don't fit.

Day 50 2a.png

Day 50 no2b.png

  1. This building is going to have another triangle on top, something like a roof. Gave the top section a border-top of 5vh solid transparent, and a border-left that is 8vw, solid, and used your building color variable as the color.

Day 50 no3a.png

Day 50 no3b.png

  1. On to the next building! It's the green one in the foreground. Give it a repeating-linear-gradient with your building color from 0% to 5%, and transparent from 5% to 10%.

day 50 no4a.png

Day 50 no4b.png

  1. Added another repeating-linear-gradient below the one I just added. Gave it a 90deg direction, used the building color from 0% to 12% and window color 12% to 44%. This made a bunch of rectangle windows.

Day 50 no5a.png

Day 50 no5b.png

  1. The background-color is no longer needed for this building anymore so I removed that property.

Day 50 no6a.png

  1. Finally! The last building! Added a repeating gradient to it with a 90deg direction. Used the building color from 0% to 10% and transparent from 10% to 30%.

Day 50 no7a.png

Day 50 no7b.png

  1. Added another repeating gradient to this building; made it the same as the one in no.7 above, except the addition of the 90deg direction, used your window color instead of the two transparent colors.

Day 50 no8a.png

Day 50 no8b.png

  1. I removed the background-color for this building since it isn't needed.

Day 50 no9a.png

  1. Okay, the buildings are done. Went back to the * selector and removed the border I applied to everything at the beginning and the buildings come together like magic.

Day 50 no10a.png

Day 50 no10b.png

Ooops! We have gone so far. I have to run now.See you tomorrow.