Holiday lights in pure CSS: FrontEnd tutorial

Hi! It’s holidays! So, let’s create today the holiday lights in pure CSS. If this is your first time here and you want to learn Frontend and JavaScript, start right now by subscribing, and don’t forget to turn on the subtitles. [Music playing] To display holiday lights I need to transform square elements into circles using “border-radius” property and set the radius to 50%. Easy. To arrange lights on the canvas, I use CSS flex and the following properties To animate lights, I use “CSS keyframes.” This rule controls the intermediate steps in a CSS animation sequence by defining styles for waypoints.

00:43 - Let’s dive into the code [Music playing] Let’s start with HTML. I need to create a wrapper. Let it be a class of “wall” and then will be “lights”, a wire of lights. And inside it, I need an element, the class “bulb” and “light”. Let’s say 8 elements. Now, we’ll be 1st, 2nd, 3rd, “light” plus “1st”, 2nd, 3rd, 4th, 5th, 6th, 7th, and 8th. Okay, its class 4, 3, 2, 1. And remove this extra element. Now, let’s style it. Background for “body”, “color” as for now should be “white”.

01:51 - And background dark but not the pure black, okay. The wall itself should be height “100vh” or 100% of a viewport, display “flex” and flex directions should be “column”. Now lights. That should be “display: flex” as well, then I need to order them in a row, so it’s “flex-direction: row” and “justify: content”. “Content” is not “center” but “space-around”. Good at now “align-items: center”. And let it be the height of 30%. Good. Okay, let make it for three these rows. So, copy and paste it three times. Okay, now let’s create our bulbs. So, for a class “bulb” I set the “border-radius” should be 50%. And now let’s add them colors. For “light1” and “light3”.

03:13 - Let’s be ground green and set height and width. For “light2” should be red. For “light3” let it be for example blue. And for “light4” - yellow. Let’s make a “light2” a bit bigger. And the same for a “light4”. I have a typo with the “light3”. I didn’t add a dot here and now we have “bulbs”. Okay, now let’s remove these numbers and start working with it. Now, let’s add shadows to our bulbs. For CSS, I need to add to the “light1” and “light3” a “box-shadow”. I don’t need this coma, and now let’s do the same for the rest of the bulbs.

04:49 - And now let’s add a visible animation to all bulbs to see how it works. Let’s add animation to the class “bulb” as “animation”, let’s say “light”. One, for example, one second, linear, zero seconds, “infinite” and “alternate”. And now let’s add this keyframe with this title. From “opacity: 1”, to “opacity”, let’s say 0.3. Now fix this typo, “keyframes” And of course, I forgot that it should be “light1”. Let’s see our declaration, “animation” and… Yes. I should fix this one. Yes, now that works. Let’s improve our animation and make it nicer. Let’s move “animation” from here and add that for “light1”. Should be like this. Let’s say it should be “0.8” seconds. Add animation to “light2” here. And it will be “light2”. And one more to “light4” here and let’s say it should be 1 second. Now, let’s add keyframes for “light2”. It should be like that. “Light2” and change the opacity from 0.3 to 1. Yes, looks good. That’s it. So easy. My code is available on CodePen.

06:38 - Documentation is available on the Internet. Follow the links if you’re eager to get more. [Music playing] If you like this video, give it “thumbs up,” share it with your friends, subscribe to the channel and watch other episodes. Thanks for watching and dive deeper. .