Create Image and Box Shadow
Create Image and Box Shadow. In this Article i will discuss on how to create 3 Boxes inside a row.The first step is to divide your website into section. In side the row or section divide it into 3 Column. Inside the Column a box reside in it. Finally input your Content, image etc.
A Box can be very useful in terms of segregating contents , images or forms. You can clearly define the boundary between boxes to make your content more welly presentable and appear more user friendly to your audience.
Boxes can use to highlight your products , portfolio , company strength as well. Unlike mix text, the user need to dig into a bunch of text to search for the content, while in Box mode reader will be able to identify and understand the meaning of the content more clearly if it is being welly crafted .
Follow the Step by Step code below to generate Image and Box Shadow in your website
- Create a Container and a Row in HTML.
- Define Column Class in CSS.
- Create 3 Column using “.col-4 ” in HTML
- Create a Box inside the Column to Contain the Content.
- Use the Selector to select all box, use box-sizing property to include your box with padding and margin.in CSS
- Provide your Box some general Styling such as .text align, margin, padding, border radius, background colour and finally box-shadow check here
- Create your Mobile Styling for your Boxes when the Screen i being decreased.Give your Col-4 a width of 100% during mobile mode, margin 0 to stack thing on top without spacing,some padding for your box.
- Create a Div with a class name called” Icon ” to contain all your content and Images in HTML
- Style your “Icon” class in CSS
- Wrap your image in a Div Tag and Style it in CSS
- Finally add in Label and Contents in all 3 column, and style it in CSS
<div class="container">
<div class="row" >
</div>
</div>
.col-1 {width: 8.33%};
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
<div class="container">
<div class="row" >
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
<div class="container">
<div class="row" >
<div class="col-4">
<div class="box">
</div>
</div>
<div class="col-4">
<div class="box">
</div>
</div>
<div class="col-4">
<div class="box">
</div>
</div>
</div>
</div>
*{
box-sizing: border-box;
}
div.box{
text-align:center;
margin:25px;
padding: 36px 24px 40px 24px;
border-radius: 7px;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.15),0 2px 3px 0 rgba(0,0,0,.1);
}
@media screen and (max-width: 680px) {
.col-4{
width:100%;
margin: 0;
}
div.box{
padding: 5px;
display: block;
}
}
<div class="container">
<div class="row" >
<div class="col-4">
<div class="box">
<div class="icon">
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
</div>
</div>
</div>
</div>
</div>
div.icon{
width:100%;
}
<div class="container">
<div class="row" >
<div class="col-4">
<div class="box">
<div class="icon">
<div class="imagestyle">
<img src="resize.jpg" class="elephant">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<div class="imagestyle">
<img src="resize.jpg" class="elephant">
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="box">
<div class="icon">
<div class="imagestyle">
<img src="resize.jpg" class="elephant">
</div>
</div>
</div>
</div>
</div>
</div>
CSS
Center your image with margin set to auto, give some padding and display as block
.imagestyle{
display:block;
margin:auto;
padding-top: 5px;
padding-bottom: 5px;
}
<label> Contact Us</label> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum ante quis diam dictum, at fermentum ligula congue. interdum. </p>
CSS
label{
font-size: 35px;
font-weight:600;
}
p{
font-size : 28px;
line-height : 1.2;
}
Well this wrap up the article on how to Create Image and Box Shadow.
Check out how to work with Iframe here
Leave a Reply