آموزش ساخت اسلایدر با استفاده از سی اس اس

زمان انتشار: در تاریخ 1396/05/18 ساعت 14:56 | آموزش وب . بلاگ
آموزش ساخت اسلایدر با استفاده از سی اس اس

قرار دادن یک اسلایدر عکس در قسمت های مختلف سایت باعت افزایش زیبایی و کارایی سایت میشد. با آموزش اسلایدر با استفاده از سی اس اس میتوانید در فضای کم مطالب زیادی را قرار دهید.

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

آموزش ساخت اسلایدر با استفاده از CSS از ابتدا و به صورت کامل یک فایل خالی را به یک اسلایدر تبدیل میکند. تمام قسمت ها و کد های استفاده شده به صورت کامل توضیح داده میشود و سرعت آموزش نیز مناسب برای تمام افراد میباشد.

کد HTML نهایی:

<div class="tcSlider">
        <div class="slider">
            <a class="slide" href="#">
                <div class="slider_img" style="background-image:url(img/1.jpg)"></div>
                <a class="slider_link" href="#">متن اسلایدر اول</a>
            </a>
            <div class="slide">
                <div class="slider_img" style="background-image:url(img/2.jpg)"></div>
                <a class="slider_link" href="#">متن اسلایدر دوم</a>
            </div>
            <div class="slide">
                <div class="slider_img" style="background-image:url(img/3.jpg)"></div>
                <a class="slider_link" href="#">متن اسلایدر سوم</a>
            </div>
        </div>
    </div>

کد CSS نهایی:


@keyframes tc_slider {
  ۰% {
    margin-top: 0;
  }
  ۳۱% {
    margin-top: 0;
  }
  ۳۶% {
    margin-top: -300px;
  }
  ۶۴% {
    margin-top: -300px;
  }
  ۶۹% {
    margin-top: -600px;
  }
  ۹۷% {
    margin-top: -600px;
  }
}

.tcSlider {
  width: 800px;
  height: 300px;
  margin: auto;
  background-color: #000;
  overflow: hidden;
}
.slider {
  animation: tc_slider 15s infinite;
}
.slider_img {
  float: right;
  width: 800px;
  height: 300px;
  background-position: center center;
  background-size: cover;
}
.slider_link {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: tahoma;
  font-size: 11px;
  text-decoration: none;
  padding: 5px 15px;
  float: left;
  margin: -50px 0 0 20px;
}

۱۴ Responses to “آموزش ساخت اسلایدر با استفاده از سی اس اس”

  1. رامین گفت:

    سلام وقتتون بخیر من یه طرح اسلایدر دارم میخوام کد کنم و این که میخواستم بدونم شما می تونید کمک کنید تا طرح رو کد کنم و کار کنه طرح یه اسلایدر بزرگ فول وید هست که درواقع یه اسلایدر کوچیک مطالب هست و اون بخشی که برای اسلایدر در نظر گرفته شده بزرگ هست و بک گراند داره که وقتی مطلب عوض میشه باید بک گراند هم عوض بشه

  2. رامین گفت:

    با سلام. درخواست سه آموزش رو دارم

    اولین اموزش : درباره نحوه کد نویسی پست های سایت در صفحه باشه و اینکه چند طرح رو اموزش بدید مثلا همین طرح مطالب سایت طوسی (هم پست های زیر منو و هم پست های سه ستونتون) طرح مطالب سایت های نمونه کارتون مثل گروه تبلیغاتی راز چه مدل صفحه ی اصلیش چه مدلی که رو موارد بیشتر میزنی. طرح پست های سایت همیار وردپرس و این سایتم مدل پستاش قشنگه منظورم اون قسمتیه که نوشته رویداد های شهر

    دوم ساخت منویی ابشاری رسپانسیوی هست که وقتی در موبایل سایت رو باز می کنیم ایکن سه خط برای منو بیاد و با کلیک رو اون منو باز باز بشه و بعد باز شدن علامت ضربدر بیاد تا با کلیک روی اون بتونیم ببندیمش.(ایکن سه خط و ضربدر اسکرول هم بشن تو موبایل) دقیقا مثل منوی سایت دکتر سلام زیر منوها عکسم داشته باشه چه در نسخه کامپیوتر و موبایل (آموزش منوهای خودتون رو هم دیدم با اونا نمیشه مثل این منوی دکتر سلام زد برای همین درخواستشو دادم)

    سومین آموزش : که توسط اون دسته بندی ها رنگ های مختلفی داشته باشند برای مثال در سایت طوسی بالای تصویر شاخص دسته بندی ها هستن که همه بک گراند مشکی دارند اما بهتره هر دسته بندی یک رنگ جدا داشته باشیم.
    و اینکه هزینشم مهم نیست فقط آموزش هارو بذارید لطفا.

    ببخشید یکم زیاد بود ممنون.

    • علی گفت:

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

  3. رامین گفت:

    خیلی ممنون اقای همایونی واقعا خوشحال شدم راستش اشنایی با مای دیزاین و تو سی زاویه دید منو نسبت به طراحی تغییر داد و فهمیدم نیازی نیست دنبال طرح های پیچیده باشیم زیبایی در سادگی و شیک بودنه. سایت اسب بخار هم عالی طراحی کردین. خیلی دوست دارم یک دوره طراحی قالب وردپرس پیشرفته رو برگذار کنید که در اون قالبی مثل اسب بخار یا سایت دیجیاتو رو از ۰ تا صد طراحی کد نویسی و تبدیل به وردپرس کنید.(از ووکامرسم پشتیبانی کنه. متاسفانه همه آموزش طراحی سایت شرکتی رو میدن که اونقدر واسه آدم نمونه کار اعتبار داری نیست. طراحی سایت های مجله خبری خیلی اعتبار میدن به طراح و بطبع طراحیشونم سخت تره.) و ما هم از دانسته های شما استفاده کنیم. (دوره مقدماتی تونم خوب بود چیزهای جالبی ازش یادگرفتم) الان تشنه ی یه دوره پیشرفته هستم از خودتون… لطفا اگر مقدوره براتون این کارو انجام بدید. با سپاس فراوان

  4. فرناز گفت:

    سلام
    آموزش خیلی خوبی بود.ممنون
    فقط اگر موقع ضبط زوم میکردید خیلی بهتر بود چون واقعا ریز بود و دیدن تصویر و کدها سخت بود.

  5. علی دلیر گفت:

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

  6. ؟ گفت:

    اینقدر ریزه که قابل دیدن نیست این اموزش اصلا خوب نیست چون کد ها به هیچ وجه پیدا نیست

  7. کاربر گفت:

    سلام
    خیلی خوبه اما بعضی از کد ها پیدا نیست
    اگر میشه لطف کنید سورس کد رو هم قرار بدین

  8. نرگس گفت:

    چه کاری کنم تا منو و اسلایدر بهم نچسبن؟

  9. علی احمدی گفت:

    پس کد کجاس

Leave a Reply

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