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 hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for internship or freelancing opportunities.

For consultation or partnership related queries drop a mail to hi@wbweb.co.in.