آموزش طراحی فرم لاگین با HTML و CSS

آموزش طراحی فرم لاگین با HTML و CSS

جلسه 1

شما در حال مشاهده
جلسه 2 هستید

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

جلسه 2
آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

جلسه 3
نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

جلسه 4
ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت

جلسه 5
مینی وب اپلیکیشن پسورد ساز با جاوا اسکریپت

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

جلسه 6
ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

ساخت دکمه سوئیچ یا Toggle Button در جاوا اسکریپت

جلسه 7
ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

ساخت باکس جستجو یا سرچ بار در جاوا اسکریپت

جلسه 8
ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

ساخت انیمیشن کلیک روی دکمه در جاوا اسکریپت

جلسه 9
پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

پروفایل کارت با تغییر رنگ تم در جاوا اسکریپت

جلسه 10
آموزش ساخت لندینگ پیج با HTML و CSS و جاوا اسکریپت

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

جلسه 11
افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

افکت هاور دکمه با استفاده از HTML و CSS (دکمه انیمیشنی)

جلسه 12
آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

آموزش ویدیویی ساخت اکولایزر حرفه ای با HTML & CSS

جلسه 13
ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

جلسه 14
آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

آموزش ساخت هاور 3 بعدی برای دکمه ها با HTML و CSS

جلسه 15
آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

جلسه 16
ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

ویدیوی آموزش ساخت ۴ افکت هاور آیکون تنها با HTML & CSS

جلسه 17
آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

آموزش ساخت فرم ورود به سایت با افکت های زیبا با HTML و CSS

جلسه 18
آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

آموزش ساخت انیمیشن حرکت موس با جاوا اسکریپت

جلسه 19
آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

جلسه 20
ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

ساخت باکس اطلاعات تماس در HTML و CSS (با هاور زیبا)

جلسه 21
آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

آموزش ساخت فرم ثبت نام با html و css (فرم ثبت‌نام در سایت)

جلسه 22
آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

آموزش طراحی هاور تصویر با HTML و CSS 🤩طراحی های خلاقانه

جلسه 23
طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

طراحی یک صفحه ساده وبسایت با HTML و CSS ✅برای مبتدیان

جلسه 24
طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

طراحی صفحه تماس با ما ریسپانسیو با استفاده از HTML و CSS

جلسه 25
آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

آموزش طراحی فرم لوگین با HTML و CSS 🤩 طراحی های خلاقانه فرانت اند

جلسه 26
آموزش ساخت باکس قیمت گذاری با HTML و CSS

آموزش ساخت باکس قیمت گذاری با HTML و CSS

جلسه 27

مدرس دوره

نبی عبدی

زمان ویدیو

12:36 دقیقه

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

مینی پروژه HTML و CSS

برای دانلود ویدیو

وارد شوید

آموزش ساخت اسلایدر با HTML و CSS (عکس | بلاگ)

آخرین بروزرسانی در تاریخ : 4 خرداد 1403
باید لاگین کنید!

ساخت اسلایدر عکس در html یا به عبارتی ساخت اسلایدر در html و css برای افرادی که تازه یادگیری HTML و CSS را شروع کرده‌اند می‌تواند کمی چالش برانگیز باشد. اما امروز در این آموزش ویدیویی از سری آموزش HTML و CSS ساخت اسلایدر با html و css را یاد می‌گیرید. این انیمیشن اسلایدر به طور کامل بر اساس HTML CSS است. همچنین این پروژه به صورت کامل ریسپانسیو بوده و برای استفاده در موبایل و دستکتاپ نیز بهینه شده است.

اگر وب سایت وردپرسی دارید و می‌خواهید اسلایدرهای بسیار جذاب طراحی کنید، پیشنهاد می‌کنیم حتما از آموزش روولوشن اسلایدر رایگان وبکیما که به صورت ویدیویی منتشر شده دیدن کنید!

ساخت اسلایدر در html

اسلایدرهای بلاگ یا تصویر (همچنین به عنوان چرخ فلک تصویر یا نمایش اسلاید نیز شناخته می شود) می تواند راهی آسان برای نمایش چندین تصویر، ویدیو یا گرافیک در وب سایت شما باشد. ایده نمایش یک تصویر بزرگ، زیبا و پر زرق و برق می تواند بسیار جذاب باشد. تصاویر جذاب می توانند بازدیدکنندگان جدیدی را وارد سایت شما کنند و فوراً توجه آنها را به خود جلب کنند.

در این پروژه (کارت بلاگ اسلایدر متحرک)، ابتدا در صفحه وب، یک پس زمینه گرادیان با جعبه ظرف سفید وجود دارد. و این کادر یک تصویر در سمت چپ و تعدادی متن، یک دکمه و کنترل های اسلایدری در سمت پایین وجود دارد. از این دکمه ها برای اسلاید کردن کارت های پیش نمایش استفاده می شود. سه کارت مختلف با یک تصویر متفاوت وجود دارد و هنگامی که روی دکمه کلیک می کنید، هر کارت به آرامی اسلاید میشود و کارت دیگری را نشان می دهد.

ساخت اسلایدر با html و css

شما می توانید از این مینی پروژه در وب سایت ها، پروژه ها و صفحات HTML خود استفاده کنید. امروزه هر وب سایتی دارای کارت یا نمایش اسلاید تصویری برای نمایش محصولات، چندین تصویر، ویدیو یا گرافیک در وب سایت خود است. اگر این پروژه (کارت بلاگ اسلایدر متحرک) را دوست دارید و می خواهید کدهای منبع را دریافت کنید. به راحتی می توانید کدهای منبع این پروژه را از زیر برای خود کپی کنید.

سورس کد اسلایدر html

در زیر می‌توانید کدهای Html مورد نیاز این پروژه را مشاهده کنید، همان طور که در ویدیو مشاهده کردید برای استفاده از این کدها باید ابتدا یک پوشه ساخته و آن را در ادیتور VS CODE باز کنید، سپس یک فایل با نام index.html ساخته و کدهای زیر را در آن کپی و پیس کنید.

کد اسلایدر در html

دقت کنید که اگر می‌خواهید کدنویسی HTML و CSS را یاد بگیرید کدها را همراه با ویدیوی آموزشی خودتان تایپ کنید، فقط در این صورت است که مطالب این آموزش را به صورت کامل درک خواهید کرد.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Navid Dev - Slider Blog Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="blog-card">
      <input type="radio" name="select" id="tap-1" checked />
      <input type="radio" name="select" id="tap-2" />
      <input type="radio" name="select" id="tap-3" />
      <input type="checkbox" id="imgTap" />
      <div class="sliders">
        <label for="tap-1" class="tap tap-1"></label>
        <label for="tap-2" class="tap tap-2"></label>
        <label for="tap-3" class="tap tap-3"></label>
      </div>
      <!-- Slide 1 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1642427749670-f20e2e76ed8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
            alt=""
            class="img-1"
          />
        </label>
        <div class="content content-1">
          <span>28 May 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">1Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>

        <!-- Slide 2 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1635492491273-455af7728453?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=960&q=80"
            alt=""
            class="img-2"
          />
        </label>
        <div class="content content-2">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">2Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate!</p>
<button>Read More</button>
        </div>
        <!-- Slide 3 -->
      <div class="inner-part">
        <label for="imgTap" class="img">
          <img
            src="https://images.unsplash.com/photo-1621360841013-c7683c659ec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
            alt=""
            class="img-3"
          />
        </label>
        <div class="content content-3">
          <span>28 Jul 2022</span>
          <h3 class="title">Lorem ipsum dolor</h3>
<p class="text">3Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, labore cupiditate! </p>
<button>Read More</button>
        </div>
      </div>
    </div>
  </body>
</html>

کد اسلایدر در CSS

در ادامه در همان پروژه خود یک فایل style.css ساخته و کدهای زیر را درون آن تایپ کنید، یادتان باشد که برای استفاده از فونت های رایگان انگلیسی می‌توانید از سایت عالی گوگل فونت استفاده کنید.

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Fira Sans', sans-serif;
  background: linear-gradient(147deg, #f6b323 0%, #f23b26 74%);
}
img {
  max-width: 100%;
}
.blog-card {
  position: absolute;
  height: 370px;
  width: 95%;
  max-width: 850px;
  margin: auto;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 10px 50px rgba(252, 56, 56, 0.3);
}
.inner-part {
  position: absolute;
  display: flex;
  height: 360px;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
}
#imgTap:checked ~ .inner-part {
  padding: 0;
  transition: 0.1s ease-in;
}
.inner-part .img {
  height: 260px;
  width: 260px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
}

#imgTap:checked ~ .inner-part .img {
  height: 370px;
  width: 850px;
  z-index: 99;
  margin-top: 10px;
  transition: 0.3s 0.2s ease-in;
}
.img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0;
  transition: 0.6s;
}
#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 {
  opacity: 1;
  transition-delay: 0.2s;
}
.content {
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: 0.6s;
}

#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 {
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: 0.3s;
}
.content span {
  display: block;
  color: #7b7992;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 500;
}
.content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}
.content .text {
  color: #4e4a67;
  font-size: 19px;
  margin-bottom: 30px;
  line-height: 1.5em;
  text-align: justify;
}
.content button {
  display: inline-flex;
  padding: 15px 20px;
  border: none;
  font-size: 16px;
  text-transform: uppercase;
  color: #fff0e6;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  cursor: pointer;
  border-radius: 50px;
  border: 1px solid #fd3838;
}
.sliders {
  position: absolute;
  bottom: 25px;
  left: 65%;
  transform: translateX(-50%);
  z-index: 12;
}
#imgTap:checked ~ .sliders {
  display: none;
}
.sliders .tap {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}
.sliders .tap:hover {
  background: #ccc;
}
.sliders .tap::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform 0.6s;
  transform-origin: left;
}
input {
  display: none;
}
#tap-1:checked ~ .sliders .tap-1::before,
#tap-2:checked ~ .sliders .tap-2::before,
#tap-3:checked ~ .sliders .tap-3::before {
  transform: scaleX(1);
  width: 100%;
}
#imgTap:checked ~ .inner-part .content {
  display: none;
}
/* Responsive */
@media screen and (max-width: 50rem) {
  .inner-part {
    flex-direction: column;
  }
  .blog-card {
    height: 560px;
  }
  .sliders {
    left: 50%;
  }
  .content {
    margin-left: 0;
    width: auto;
    margin-top: 1rem;
  }
  .text {
    text-align: left !important;
  }
  #imgTap:checked ~ .inner-part .img {
    height: 560px;
    width: 100%;
    top: 95px;
    position: relative;
  }
}

نحوه استفاده از سورس کد اسلایدر html

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

جمع بندی

در انتها امیدواریم که آموزش طراحی اسلایدر کارت وبلاگ متحرک با HTML و CSS برای شما عزیزان مفید و کاربردی بوده باشد، اگر سوالی در رابطه با این آموزش دارید، در بخش کامنت‌ها با ما در ارتباط باشید.

5/5 - (3 امتیاز)

دیدگاه و پرسش

  1. Hedieh میگوید:

    سلام وقتتون بخیر من پروژه ام طوری هستش که صفحه ی ایندکس من php هستش و من وقتی کدارو داخلش قرار میدم برای من نمایش نمیده ولی داخل سند html امتحان کردم اوکیه
    کاری هست که من بکنم تا داخل php هم کد ها کار کنه؟

    • پشتیبانی میگوید:

      سلام، بله باید تگ PHP را ببندید سپس این کدها را داخل صفحه خود قرار دهید، سپس مجددا تک PHP را باز کنید. این از اولین مواردی هست که در کار کردن با زبان PHP باید یاد بگیرید.

  2. aa.mohammad00 میگوید:

    سلام استاد چجوری میشه بهش زمان داد؟

    • پشتیبانی میگوید:

      درود، اگر بخواهید زمان را اضافه کنید باید توسط کدهای جاوا اسکریپت این کار را انجام دهید.

آموزش‌های ویدیویی جدید فقط در یوتیوب منتشر می‌شود!

بزن بریــم!