طراحی سرچ باکس سه بعدی با Html و Css
اکثر کاربران از فرم جستجو به عنوان آخرین تلاش برای یافتن چیزی قبل از ترک یک وب سایت استفاده می کنند. به عنوان یک عنصر سودمند، فرآیند طراحی و سبک یک نوار جستجو ضروری است. با این حال بسیاری از طراحان طراحی جلویی را نادیده می گیرند. با این حال، این ویژگی کوچک نقش مهمی در یک تجربه کاربری خوب دارد و باید شامل سبک باشد. این مقاله نحوه طراحی یک سرچ باکس سه بعدی جذاب با استفاده از کدهای Html و Css را ارائه می دهد.
آموزش طراحی سرچ باکس سه بعدی با Html و Css
در ادامه با کدهای html و Css یک سرچ باکس جذاب و انیمیشن دار همراه ما باشید.
خروجی پروژه پایانی ما به شکل زیر خواهد بود :
در ابتدا فایل index.htm خود را با استفاده از کدهای زیر ایجاد می کنیم . مقداری رشته کد جاوا اسکریپت هم در این صفحه جایگذاری شده است.
<!DOCTYPE html> <html lang="fa" dir="rtl"> <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" /> <link rel="stylesheet" href="style.css" /> <script src="./main.js" defer></script> <title>Cool Search Box</title> </head> <body> <div class="header"><h1>جستجو کنید</h1></div> <div class="searchBox"> <div class="shadow"></div> <input type="text" name="" id="" placeholder="دنبال چی می‌گردی؟" /> <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>
حالا نوبت به استایل دهی به فرم جستجو با کدهای CSS می رسد :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #cfd1e1;
overflow: hidden;
}
.header {
position: absolute;
top: 65px;
font-size: 3em;
}
h1 {
color: #e9e8ee;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.63);
}
.searchBox {
position: relative;
width: 65px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.searchBox:hover {
width: 400px;
}
.searchBox::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff, #fff, #e3e3e3);
z-index: 1;
filter: blur(1px);
}
.searchBox::after {
content: "";
position: absolute;
top: 0;
left: -1px;
width: 10px;
height: 100%;
background: #9d9d9d;
z-index: 1;
filter: blur(1px);
}
.searchBox input {
position: relative;
width: 100%;
height: 100%;
border: none;
padding: 10px 25px;
outline: none;
font-size: 1.4em;
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;
cursor: pointer;
}
.searchBox input::placeholder,
.searchBox input {
color: transparent;
}
.searchBox:hover input::placeholder,
.searchBox:hover input {
color: #555;
}
.shadow {
position: absolute;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.1),
transparent,
transparent
);
top: 0;
right: -50px;
width: calc(100% + 50px);
height: 300px;
transform-origin: top;
transform: skewX(-45deg);
pointer-events: none;
}
.shadow::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
background-color: #cfd1e1;
}
ion-icon {
position: absolute;
left: 20px;
color: #555;
font-size: 1.5em;
cursor: pointer;
}
همانطور که در بالا ذکر شد، کادر جستجو نقش مهمی را به عنوان یک عنصر کاربردی وب ایفا می کند. این کادر به صرفه جویی در وقت و انرژی بینندگان هنگام جستجو در یک وب سایت کمک می کند. با این حال، بخشی از کل تجربه وب سایت است و بنابراین نباید در طول فرآیند طراحی نادیده گرفته شود.
جنبه های کمی برای باکس جستجو وجود دارد، اما با کمی خلاقیت، می توانند سبک خاص خود را داشته باشند و برای بازدیدکنندگان جذاب باشند. البته، هر سایت فرم جستجوی متفاوتی خواهد داشت تا سناریوهای مختلف را در خود جای دهد. برخی نیاز به یک طرح اولیه دارند، در حالی که برخی دیگر نیاز به ارائه گزینه های جستجوی سفارشی برای بهبود تجربه جستجو دارند. در هر سناریو، امکان ایجاد یک نوار جستجوی جذاب و قابل استفاده وجود دارد.
- مطالب مرتبط : طراحی منو راست چین فارسی با html ، CSS و jQuery
نمونه باکس جستجوی CSS در بالا شامل طراحی کاربردی و شیک است که برای همه انواع وب‌سایت‌ها مفید است.
دیدگاه ها