28. Working with CSS images and box shadows - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial video, We are going to learn about #css #images #box-shadows for the new website. We will start right under the first container containing the first part of the website, by building a new container. At the top of this container we will place our header tag which acts like a container of its own. It contains introductory content and we can put things in it like headings, logos or icons. But we cannot put a header tag inside a footer tag or address tag. Also we cannot nest the header tag inside another header tag. After the header tag we will create a div class of container to place the three columns inside it. Each column will contain a box, logo element, label below the element and some text i.e. stacking three different elements on one another image, label and text. For creating a box, we will create a div tag and add a class to it because this is going to be the main element that we will be styling. The CSS box-shadow property applies shadow to elements. Syntax: box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit; - None: Default value. No shadow is displayed - h-offset: The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box. - V-offset: The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. - Blur: Optional. The blur radius. The higher the number, the more blurred the shadow will be. - Spread: Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. We create three such boxes and add different styling to them. To create the mobile view we give each box a width of 100% once it reaches the mobile size and also override the margin and padding property. Finally we create another container assigning it a column size of 12 i.e. covering the entire screen and add different styling property to it in a similar fashion. ---------------------------- Week 1 : Day 5 Section 4 : Advanced CSS: Building and styling website Tutorial 28 : Working with images and box shadows ---------------------------- Do subscribe and hit Bell Icon ---------------------------- Follow us in social media handles for opportunities and code related support. Instagram: https://www.instagram.com/wb.web/ Facebook: https://www.facebook.com/wbweb/ Twitter: https://twitter.com/wbweb_in/ LinkedIn: https://www.linkedin.com/company/wbweb/ ---------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for internship or freelancing opportunities. For consultation or partnership related queries drop a mail to [email protected].