Create Stunning CSS Box Shadow with HTML, CSS & JS

Table of Contents:

1. Introduction
2. Styling with CSS
3. Positioning and Aligning Elements
4. Styling Controls and Inputs
5. Styling the Result Section
6. Styling the Box
7. Styling the Generate Code Button
8. Conclusion

Introduction

Welcome to the tutorial series on creating a box shadow generator using HTML, CSS, and JavaScript. In this video, we will be focusing on styling our web page using CSS. We will cover various aspects such as font styling, box sizing, positioning, and more. Let's dive in!

Styling with CSS

To begin, we will start by styling the headings of our web page. The main heading (h1) will have a font family of Roboto and sans-serif, with a font weight of 100. Additionally, we will align the text to the center.

Next, we will style the box shadow generator section. We'll set the font family to Roboto and sans-serif, and give it a width of 800 pixels. We will also add a box shadow effect with specific values to give it a visually appealing look.

Positioning and Aligning Elements

In order to position the controls and result section properly, we will use flexbox. By setting the display to flex, we can align the controls on the left and the result section on the right. We will also add space between them using the justify-content property.

To ensure correct sizing of elements, we will set the box-sizing property to border-box for the box shadow generator and all its child elements.

Styling Controls and Inputs

We will now move on to styling the controls section. We'll set a padding of 8 pixels and a width of 300 pixels for better spacing and alignment. The headings (h2) within the controls section will have a font size of 18 pixels, margin of 4 pixels (top and bottom), and font weight of normal.

To provide spacing between groups of elements, such as headings and input fields, we will target the group class and set padding and margin values accordingly.

For the sliders and color input field, we'll increase the width to 100 percent for better user experience.

Styling the Result Section

The result section will be styled as a flex container with a column direction. This will ensure that its contents are aligned vertically. We will also add a padding of 24 pixels and set the flex property to one so that it occupies maximum space.

The box within the result section will have a width and height of 240 pixels, a white background color, and a default box shadow. We'll also add a margin bottom of 50 pixels.

Styling the Generate Code Button

To position the generate code button relative to the box shadow generator, we'll set the position property of the box shadow generator to relative. The button itself will have a position of absolute, with bottom and right positions set to 8 pixels. We'll also add padding, set font size and weight, remove the border, and add background color and text color.

Conclusion

In this video, we covered the CSS styling for our box shadow generator web page. We discussed various aspects such as font styling, positioning, box sizing, and more. In the next video, we will add the JavaScript functionality to make our generator work. If you have any questions, feel free to ask in the comments below. Don't forget to like and subscribe for more tutorials. Thank you for watching!