Create Image and Box Shadow

Create Image and Box Shadow

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 

  1. Create a Container and a Row in HTML.
  2.         <div class="container">
                   <div class="row" >
            
                    
                   </div>         
              
            </div>
    
            
  3. Define Column Class in CSS.
  4.          .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%;}
    
            
  5. Create 3 Column using “.col-4 ” in HTML
  6.         <div class="container">
                <div class="row" >
            
                          <div class="col-4">
                       
                
                          </div>
                
                          <div class="col-4">
                        
                
                          </div>
                   
                          <div class="col-4">
                        
                            
                            
                         </div>
                
                  </div>  
            </div>     
    
    
    
           
  7. Create a Box inside the Column to Contain the Content.
  8.         <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>     
    
    
    
           
  9. Use the Selector to select all box, use box-sizing property to include your box with padding and margin.in CSS
  10.         *{
        
                box-sizing: border-box;
          
        
              }
          
  11. Provide your Box some general Styling such as .text align, margin, padding, border radius, background colour and finally box-shadow check here
  12.   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);
            
        
    }
             
    
  13. 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.
  14.     @media screen and (max-width: 680px) {
                                              .col-4{
            
                                                      width:100%;
                                                      margin: 0;
                                                      }
        
        
                                              div.box{
            
                                                     padding: 5px;
                                                     display: block;
            
                                                    }
    
    
    
                                            }
    
    
  15. Create a Div with a class name called” Icon ” to contain all your content and Images in HTML
  16.  <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>     
    
    
    
  17. Style your “Icon” class in CSS
  18.   
          div.icon{
        
                  width:100%;  
        
                  }
    
  19. Wrap your image in a Div Tag and Style it in CSS
  20. <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;   
               }
    
    
    
  21. Finally add in Label and Contents in all 3 column, and style it in CSS
  22. <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

Your email address will not be published. Required fields are marked *

5 × 1 =