How To Make Search Box Using HTML & CSS

CodingNepal — Mon, 15 Feb 2021 21:09:48 +0000

Hello Readers, today in this blog I’m going to create a Search Box Design Using HTML CSS, and this search box will fully responsive. Earlier I have shared How To Create Login Form in HTML CSS, now we will go for search bar design.

Simply, A search box is an input field where the user has to type what they wanted from the specific webpages. Nowadays there are various types of search boxes on the internet but the main motive of a search bar is the same.

As you can see on the given image of this program [Responsive Search Box], This is the real example of a search bar. At first, this search bar is in small form literally we can see only the search icon and when we clicked on that search icon smoothly search box appears with an input field.

If you want to see the essential code behind this program [Responsive Search Bar Design], and all animation that I have added to this program please do watch the full video tutorial of this program [Animated Search Box Design] that I have provided below.

Full Video Tutorial Search Box Design Using HTML & CSS

As you have seen in the given tutorial of this program [Search Box Design ], At first there is only a search box icon on the screen in round shape, when we clicked on that search icon search’s input field smoothly and the round shape of the icon turns into rectangle shape in the left part and round shape in the right side. To make this animation I have used HTML input’s checkbox.

If you are familiar with HTML & CSS then you can easily create this program [Responsive Search Box Design], those friends who are feeling difficulty to build this program, don’t worry i have provided full source code below.

You Might Like This:

Responsive Contact Us Form

Responsive Registration Form

Search Box [Source Code]

To copy-paste the given codes of this program [Animated Search Bar Design], at first you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your document.




  
    
     Responsive Search Box | CodingLab

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: #FF676D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box{
  max-width: 400px;
  width: 100%;

}
.box .search-box{
  position: relative;
  height: 50px;
  max-width: 50px;
  margin: auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  transition: all 0.3s ease;
}
#check:checked ~ .search-box{
  max-width: 380px;
}
.search-box input{
 position: absolute;
 height: 100%;
 width: 100%;
 border-radius: 25px;
 background: #fff;
 outline: none;
 border: none;
 padding-left: 20px;
 font-size: 18px;
}
.search-box .icon{
  position: absolute;
  right: -2px;
  top: 0;
  width: 50px;
  background: #FFF;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #FF676D;
  font-size: 20px;
  border-radius: 25px;
}
#check:checked ~ .search-box .icon{
  background: #FF676D;
  color: #FFF;
  width: 60px;
  border-radius: 0 25px 25px 0;
}
#check{
  display: none;
}

If you face any difficulties while creating your Animated Search Box or your code is not working as expected, you can download the source code files for this CSS Search Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Responsive Services Box with Flip Animation using only HTML & CSS

CodingNepal — Sun, 09 Aug 2020 07:54:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Fully Responsive Services Box with Flip Animation using only HTML & CSS. Earlier I’ve shared a blog on how to create an Awesome Product Card Design in HTML & CSS. You may have seen the services box on many websites.

The services page is one of the most important pages on your website to show what you offer to your visitors or content viewers. Based on the service you need to figure out the best way to explain it. These could be through short sentences, long paragraphs, bullet point sections, or videos.

In this program (Responsive Services Box with Flip Animation), on the webpage, there are three service cards or boxes with the icon and title of the services but when you hover on a particular box then the description of that hovered services card will be visible with a flip animation. This flip animation is fully based on HTML & CSS and these boxes are responsive for any device.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Services Box with Flip Animation).

Video Tutorial of Responsive Services Box with Flip Animation

In the video, you have seen the flip animation of these Responsive Service Cards or Boxes and I hope you have understood the codes behind creating these cards and their animation. As you know, this is a pure CSS program so there are no vast codes used on this Services Box program. I have used the CSS grid property to make these cards responsive.

If you like this program (Responsive Services Box with Flip Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

Responsive Services Box with Flip Animation [Source Codes]

To create this program (Responsive Services Box with Flip Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Responsive Services Box | CodingNepal
      
      
      
   
   
      
         
            
               
                  
               
               Web Design
            
            
               Web Design
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
               
            
         
         
            
               
                  
               
               Advertising
            
            
               Advertising
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.
               
            
         
         
            
               
                  
               
               Game Design
            
            
               Game Design
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100%;
  width: 100%;
  text-align: center;
  background: #f2f2f2;
}
.wrapper{
  display: grid;
  margin: 200px 90px auto;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
@media (max-width: 700px) {
  .wrapper{
    margin: 200px auto;
  }
}
.wrapper .box{
  width: 350px;
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
}
.wrapper .box .front-face{
  background: #fff;
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .front-face .icon{
  height: 80px;
}
.box .front-face .icon i{
  font-size: 65px;
}
.box .front-face span,
.box .back-face span{
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.box .front-face .icon i,
.box .front-face span{
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.box .back-face{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 220px;
  width: 100%;
  padding: 30px;
  color: #fff;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transform: translateY(110px) rotateX(-90deg);
  box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
  transition: all 0.5s ease;
}
.box .back-face p{
  margin-top: 10px;
  text-align: justify;
}
.box:hover .back-face{
  opacity: 1;
  transform: rotateX(0deg);
}
.box:hover .front-face{
  opacity: 0;
  transform: translateY(-110px) rotateX(90deg);
}

That’s all, now you’ve successfully created a Responsive Services Box with Flip Animation using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

CSS Service Box – CodingNepal