پروژه css : جعبه جست و جو

سلام رفقا امروز می خوام آموزش یه سرچ باکس رو براتون بذارم که مطمئنم خیلی جاها میتونید ازش استفاده کنید.


https://aparat.com/v/TCRVh

خوب خیلی سریع بریم سراغ کارمونو وقت هدر ندیم.

اول از همه یه فایل Html میسازیم و کدای زیر و توش مینویسیم.

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
<meta charset=&quotUTF-8&quot>
<meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
<link rel=&quotstylesheet&quot href=&quotstyle.css&quot>
<link rel=&quotstylesheet&quot href=&quothttps://pro.fontawesome.com/releases/v5.10.0/css/all.css&quot
integrity=&quotsha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p&quot crossorigin=&quotanonymous&quot />
<title>Document</title>
</head>
<body>
    <div class=&quotsearch-box&quot>
        <input type=&quottext&quot class=&quotsearch-text&quot placeholder=&quotجست و جو&quot>
        <a class=&quotsearch-btn&quot>
            <i class=&quotfa fa-search&quot></i>
        </a>
    </div>
</body>
</html>

خوب تا اینجا خوب بود کارمون.

حالا باید بریم سراغ اضافه کرد فایل Css تا ظاهر کارمونو درست کنیم.

اول از همه مییریم سراغ بدنه. که اگه دوست داشتین می تونید تغییرش بدین خیلی هم نیست این قسمت: 

body {
    padding: 0;
    margin: 0;
    background: #3fd2e6;
}

خوب حالا می ریم سراغ این که جعبه Search box مونو درست کنیم.

.search-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
    border-radius: 40px;
    padding: 10px;
    background: #2f3640;
}

بریم سراغ اینکه دکمه رو عوض کنیم

.search-btn {
    color: #3fd2e6;
    float: left;
    background: #2f3640;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

بعدشم یه استایل کوچیک به Input میدیم:

.search-text {
    border: 0;
    background: none;
    outline: none;
    text-align: right;
    line-height: 30px;
    color: #fff;
    padding: 0;
    width: 0;
    transition: all .5s;
}

حالا بریم سراغ اصل مطلب اینجا واسه باز و بسته شدن باکسمون یه تیکه کد بنوسیم که مثل جاوا اسکریپت بتونه ز بسته شدنش جلوگیری کنه:

.search-box:hover>.search-text,
.search-text:focus,
.search-text:not(:placeholder-shown) {
    width: 250px;
    padding: 0 10px;
}

خوب خیلی راحت تونستیم یه فرم باحال برای سرچ توی سایتمون بنویسیم.

اگه کد این پروژه و پروژه های بیشتری رو میخواید می تونید به گیت هاب من بیاید.

منتظر پروژه های بیشتر باشید.