مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

13:22 دقیقه

دیگر جلسات دوره

برو به دیگر جلسات

آموزش روولوشن اسلایدر

دانلود ویدیو

دانلود ویدیو

دانلود ویدیو

آموزش ساخت باکس جستجو در روولوشن اسلایدر

منتشر شده در تاریخ : 22, فروردین, 1400

با یکی دیگر از جلسات پروژه محور آموزش روولوشن اسلایدر در خدمت شما همراهان عزیز آکادمی وبکیما هستیم، در این جلسه می‌خواهیم نحوه طراحی و ساخت یک باکس جستجو در اسلایدر روولوشن را به صورت کامل آموزش دهیم، پس اگر می‌خواهید یاد بگیرید که چگونه یک باکس جستجو داخل یک اسلایدر طراحی کنید به صورتی که بخش جستجو به صورت کامل کار کند، این جلسه را با دقت دنبال کنید.

کدهای HTML برای ساخت باکس جستجو

<form role="search" method="get" id="searchform" class="webkima-searchform" action="https://webkima.com">
<input type="text" value="" name="s" id="s" placeholder="دنبال چی می‌گردی؟" />
<input type="submit" id="searchsubmit" value="جستجو" />
</form>

کدهای CSS برای ساخت باکس جستجو

.webkima-searchform input#s {
    font-family: 'dana';
    font-size: 14px;
    background-color: #ffffff85;
    line-height: 45px !important;
    padding: 0 20px;
    cursor: text;
    border: 0;
    width: 400px;
    margin-bottom: 0px;
    transition: background-color 0.5s;
    border-radius: 0px;
    text-align: right !important;
}
.webkima-searchform input#s::placeholder {
	color: #fff !important;
}
 
.webkima-searchform input#s[type="text"]:focus {
	background-color: #f5f5f5; 
}
.webkima-searchform input#searchsubmit, .webkima-searchform input#searchsubmit:focus {
    font-family: 'dana';
    line-height: 45px !important;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 300 !important;
    padding: 0 20px;
    border: 0;
    background: #0028eea6;
    color: #fff;
    border-radius: 0px;
	margin-right: -11px;
}
.webkima-searchform input#searchsubmit:hover {
    background: #0028ee;
}

دیگر جلسات دوره روولوشن اسلایدر

  1. اسلایدر رولوشن چیست؟ افزونه Revolution Slider
  2. دانلود رایگان روولوشن اسلایدر (به همراه اددان‌‌ها) + نصب و پیکربندی
  3. آموزش کار با قسمت پس‌زمینه‌ها در اسلایدر روولوشن
  4. افزودن فونت فارسی در اسلایدر رولوشن
  5. آموزش طراحی یک اسلایدر ساده با روولوشن اسلایدر
  6. تنظیم سایز اسلایدر در دیوایس‌های مختلف در روولوشن اسلایدر
  7. آموزش طراحی اسلایدر‌های ریسپانسیو با روولوشن اسلایدر
  8. کار با انیمیشن‌ها در طراحی اسلایدر با روولوشن اسلایدر
  9. آموزش کار با لایه‌های عمومی (لایه استاتیک) در رولوشن اسلایدر
  10. آموزش تکرار یک انیمیشن روی یک لایه در روولوشن اسلایدر
  11. آموزش افزودن دکمه و لینک دادن به آن در اسلایدر رولوشن
  12. آموزش کار با بگراند‌های گرادینت در رولوشن اسلایدر
  13. طراحی پروژه محور اسلایدر شماره یک با روولوشن اسلایدر
  14. طراحی پروژه محور اسلایدر شماره دو با روولوشن اسلایدر
  15. طراحی پروژه محور اسلایدر شماره 3 با رولوشن اسلایدر
  16. آموزش طراحی یک اسلایدر برای نمایش اعضای تیم
  17. آموزش قراردادن ویدیو برای پس‌زمینه اسلایدر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جشنواره عید فطـــر آغاز شد! از 30 تا 65٪ تخفیف ویژه...!بزن بریم!
+