Dear friends in this articles we learn about How to make Beautiful Search Bar Design Using HTML, CSS Only | UI Design. If you like our article then visit more.
Search Bar Design
To create a search bar in the navigation bar is easy, just like creating another option in the navbar that will search the database. You need to be careful about the timing of placing the search bar. Make sure separately placed in the navbar. To create a navbar containing a search bars you will need HTML and CSS. The below explanation will guide you stepwise on how to create a search bars. This article contains 2 sections in the first section we will attach the CDN link for icon and will make a basic structure. The second section will design the navbar and the search bar in it.
The search bar connects people with websites, mobile apps, and the world. It’s a conversation window between the user and the app or website. In the face of complicated web content, users express their needs by searching keywords, expecting to obtain accurate information and a quick and smooth user experience.
A well-designed search bars can improve conversion rates and enhance user experience. In spite of its importance, the search bar is a simple element on a website or app and can very easily get ignored.
Like web design and application design, search bar design is worth studying by designers. Today, Mockplus will discuss excellent search bars design and where to get great search bars design inspiration from.
When it comes to website elements that are nice-to-have and must-have, search boxes fall squarely in the must-have camp. Pick any website that comes to mind — chances are it’s got a search box, likely at the very top of the page.
A search box, also known as a search bars, plays an important role on a website. It acts as the entryway to all the content available and lets visitors quickly find what they’re looking for.They are usually placed prominently on all pages as part of the website header or sidebar.
Because your website’s HTML search box is shown essentially everywhere to all visitors, it makes sense that you should spend some time making it look nice, right?
In this article by our team at wpDataTables, we’re going to check out some really neat and fancy search box designs you can implement right now with nothing more than some HTML, CSS, and maybe a little bit of JavaScript.
The Benefits of Good HTML Search Box Design
A search box connects people with everything that a website or app has to offer. It’s the first port of call for when a user needs extra assistance navigating a site, and it is a crucial point at which the conversation between the user and website happens.
In practice, HTML search boxes are simple to understand. Keywords are typed in by the user and in return, the search box helps them find the information that they want to know.
Here are some positives that you should expect to see when adding an HTML search box to your website:
Your website becomes more user-friendly
You increase the satisfaction of your visitors and customers
You can direct visitors to products and services quicker, improving conversion rates
It simplifies the search process by having the search function immediately accessible
You can discover what your users are searching for and gain valuable marketing data
HTML Search Box Designs You Can Use Right Now
All the CSS-based HTML search boxes that you are going to find in this collection are simple in code structure. This means that they can be customized easily and you can always switch to a different unique look by tweaking the CSS. Let’s get to the list and see what we find!
Design features:
HTML/CSS design
Search button animation
Traditional search box design is usually limited to a search box, a prompt and a delete button. But in fact, a simple search box can be smartly designed with pleasure. Such as the delete button, it not only deletes the search content, but also closes the search box quickly.
Searchbar Design
Now let’s talk guys. That’s how it’s designed to find out. Here’s how to find out. First of all get this which we css. Tomar. The code of css is written in that way. We do this in three ways.
1. Inline CSS
2. Internal CSS
3. External CSS
But we will use internal CSS in this article so that we can write all the code in a single html file. To write internal CSS, you have to go to the head section. And inside that you have to take the style tag and then write all the CSS code in it.
Inside style tag you have to take * tag and then you have to take open curly braces and close curly braces. Then inside it you have to give margin 0 then padding 0. After that you have to give the box sizing border box. Then you have to give the font Family Poppins then give the font weght 600.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’,sans-serif;
font-weight: 600;
}
Source Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Box</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
font-weight: 600;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #cfd1e1;
}
.searchbox{
position: relative;
width: 65px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.searchbox::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff,#fff,#e3e3e3);
z-index: 1;
filter: blur(1px);
}
.searchbox::after{
content: '';
position: absolute;
top: 0;
right: -1px;
width: 10px;
height: 100%;
background: #9d9d9d;
z-index: 1;
filter: blur(1px);
}
.shadow{
position: absolute;
top: 0;
left: -50px;
width: calc(100% + 50px);
height: 300px;
background: linear-gradient(180deg,rgba(0,0,0,0.1), transparent, transparent);
transform-origin: top;
transform: skew(45deg);
pointer-events: none;
}
.shadow::before{
content: '';
position: absolute;
width: 50px;
height: 50px;
background: #cfd1e1;
z-index: 1;
}
.searchbox input{
position: relative;
width: 100%;
height: 100%;
border: none;
padding: 10px 25px;
outline: none;
font-size: 1.1em;
color: #555;
background: linear-gradient(#dbdae1,#a3aaba);
box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
15px 15px 15px rgba(0,0,0,0.1),
20px 20px 15px rgba(0,0,0,0.1),
30px 30px 15px rgba(0,0,0,0.1),
inset 1px 1px 2px #fff;
}
.searchbox input::placeholder,
.searchbox input{
color: transparent;
letter-spacing: 1px;
}
.searchbox:hover input::placeholder,
.searchbox:hover input{
color: #555;
}
ion-icon{
position: absolute;
right: 20px;
color: #555;
font-size: 1.5em;
cursor: pointer;
}
.searchbox:hover{
width: 400px;
}
</style>
</head>
<body>
<div>
<div></div>
<input type="text" placeholder="Search Anything You Want...">
<ion-icon name="search-outline"></ion-icon>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Watch video related this article…
