آموزش افتر افکت

آموزش فتوشاپ

مدرسه گرافیک

باکس جستجو html

شروع موضوع توسط HAMIDRB ‏6/12/18 در 11:11 در انجمن سایر نرم افزار های گرافیکی

  1. HAMIDRB
    karbar Rank

    تاریخ عضویت:
    ‏29/8/18
    ارسال ها:
    46
    تشکر شده:
    4
    امتیاز دستاورد:
    8
    جنسیت:
    مرد
    سلام
    من طبق آموزش هایی که گذاشتید و با استفاده از منابع دیگر،یک باکس جستجو برای سایتم ساختم.یه باکس ساده و کمی هم css زدم که زیبا بشه.
    همه چیز کامله ولی وقتی توی باکس چیزی تایپ می کنم،و enter رو می زنم هیچ چیزی نمی یاره.
    لطفا کمکم کنید.
     
  2. soheilaflatoni
    admin Rank

    تاریخ عضویت:
    ‏16/1/16
    ارسال ها:
    657
    تشکر شده:
    245
    امتیاز دستاورد:
    43
    جنسیت:
    مرد
    شغل:
    جلوه های ویژه
    محل سکونت:
    تهران
    درود نیا به برنامه نویسی سمت سرور داره
     
  3. HAMIDRB
    karbar Rank

    تاریخ عضویت:
    ‏29/8/18
    ارسال ها:
    46
    تشکر شده:
    4
    امتیاز دستاورد:
    8
    جنسیت:
    مرد
    چی؟
    نفهمیدم!!
     
  4. HAMIDRB
    karbar Rank

    تاریخ عضویت:
    ‏29/8/18
    ارسال ها:
    46
    تشکر شده:
    4
    امتیاز دستاورد:
    8
    جنسیت:
    مرد
    این کد کدی هستش که من از یک سایت گیر اوردم.یک باکس سرچ گرافیکی هستش.به نظرم خودتون هم امتحانش کنید...
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <!DOCTYPE html>
    <html>
    <head>
    <title>Awesome Search Box</title>
    <link rel="stylesheet" href="برای دانلود و دیدن لینک ها با ید عضویت داشته باشید در صورت که عضو نیستید همین حالا اقدام کنید" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="برای دانلود و دیدن لینک ها با ید عضویت داشته باشید در صورت که عضو نیستید همین حالا اقدام کنید" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    </head>
    <!-- Coded with love by Mutiullah Samim-->
    <body>
    <div class="container h-100">
    <div class="d-flex justify-content-center h-100">
    <div class="searchbar">
    <input class="search_input" type="text" name="" placeholder="Search...">
    <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
    </div>
    </div>
    </div>
    <style>

    body,html{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #e74c3c !important;
    }

    .searchbar{
    margin-bottom: auto;
    margin-top: auto;
    height: 60px;
    background-color: #353b48;
    border-radius: 30px;
    padding: 10px;
    }

    .search_input{
    color: white;
    border: 0;
    outline: 0;
    background: none;
    width: 0;
    line-height: 40px;
    transition: width 0.4s linear;
    }

    .searchbar:hover > .search_input{
    padding: 0 10px;
    width: 450px;
    transition: width 0.4s linear;
    }

    .searchbar:hover > .search_icon{
    background: white;
    color: #e74c3c;
    }

    .search_icon{
    height: 40px;
    width: 40px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color:white;
    }
    </style>
    </body>
    </html>