/ آموزش ساخت اسلایدر زیبای سی اس اس برای ویبولتین - اختصاصی ویکی وی بی
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 8 از 8

مقاله: آموزش ساخت اسلایدر زیبای سی اس اس برای ویبولتین - اختصاصی ویکی وی بی

    1. آموزش ساخت اسلایدر زیبای سی اس اس برای ویبولتین - اختصاصی ویکی وی بی

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

      درود به همه ی عزیزان
      ماه مبارک رمضان بر همگی مبارکمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      امروز قصد داریم که با سی اس اس و بدون استفاده از جی کوئری و جاوا اسکریپت دو نوع اسلایدر زیبای عکس بسازیم.
      آموزش خیلی خیلی ساده هست.
      تو این آموزش ما یه اسلایدر در ابعاد 463*173 در هدر میسازیم که تغییر مکان و سایز اسلایدر خیلی خیلی ساده هست.

      اسلایدر سری 1 با تصاویر متحرک

      1-قبل از هرچیزی باید بیس کار که همون کدهای اچ تی ام ال ما هستنو به هدر اضافه کنیم.برای این کار کافیه به قالب header برید و کد هارو بعد از خط زیر وارد کنید :
      این خط :
      کد:
      <div id="header" class="floatcontainer doc_header">
      کد های اسلایدر :
      کد:
      <div class="slider"><div class="slider-img">
      <img src="images/slider/slide1.jpg" class="sslide" height="179" width="1389"/>
      </div>
      </div>
      خب حالا همون طور که میبینید مایه عکس داریم تو پوشه ی تصاویر/اسلایدر
      اون عکسو هم آپلود میکنیم.
      فرضا این عکس :

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      توجه کنید که ارتفاق تصویر باید 173 پیکسل و عرض اون باید 1389 پیکسل باشه و عکس ها 463 پیکسلی از عرض جدا شده باشن همونطوری که تو عکس کاملا پیداس.

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

      کد های زیر رو در آخر کد های ادیشنال سی اس استون کپی کنید :
      کد:
      .slider {
      position:absolute;
      border-radius:5px;
      left:65px;
      top:75px;
      height:auto !important;
      width:auto !important;
      border:10px solid rgba(0,0,0,0.45);
      }
      .slider-img {
      wdith:463px;
      height:179px;
      overflow:hidden;
      width:463px;
      height:179px;
      }
      .sslide {
      align:right;
      animation:slider 15s infinite;
      -webkit-animation:slider 15s infinite;
      -moz-animation:slider 15s infinite;
      -o-animation:slider 15s infinite;
      wdith:1389px;
      height:179px;
      }
      ذخیره کنید و به صفحه ی اصلی سایتتون بریدمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      میبینید که همه چی درسته.بر خلاف مرحله ی قبل تصاویر ازکادر بیرون نزدن اما اسلایدر هیچ کاری نمیکنه
      حالا باید چیکار کنیم؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      حالا نوبت به ساخت انیمیشنون هستمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      برای این کار کد های زیر رو زیر کد های قبلی اضافه کنید.

      کد:
      @-webkit-keyframes slider 
      {
      	0%{margin-rgiht:0px;}
      	10%{margin-right:0px;}
      	20%{margin-right:0px;}
      	30%{margin-right:-463px;}
      	40%{margin-right:-463px;}
      	50%{margin-right:-463px;}
      	60%{margin-right:-926px;}
      	70%{margin-right:-926px;}
      	80%{margin-right:-926px;}
      	100%{margin-right:0px;}
      }
      @-moz-keyframes slider 
      {
      	0%{margin-rgiht:0px;}
      	10%{margin-right:0px;}
      	20%{margin-right:0px;}
      	30%{margin-right:-463px;}
      	40%{margin-right:-463px;}
      	50%{margin-right:-463px;}
      	60%{margin-right:-926px;}
      	70%{margin-right:-926px;}
      	80%{margin-right:-926px;}
      	100%{margin-right:0px;}
      }
      @-o-keyframes slider 
      {
      	0%{margin-rgiht:0px;}
      	10%{margin-right:0px;}
      	20%{margin-right:0px;}
      	30%{margin-right:-463px;}
      	40%{margin-right:-463px;}
      	50%{margin-right:-463px;}
      	60%{margin-right:-926px;}
      	70%{margin-right:-926px;}
      	80%{margin-right:-926px;}
      	100%{margin-right:-463px;}
      }
      این کد ها همگی یکی هستن و پیشوند های moz و webkit برای مرورگر های مختلف هستن تا اسلایدر با اونا سازگار باشه.
      توجه کنید برای جابجایی اسلایدر و تنظیم پوزیشن در استایلتون باید مقادیر left و top رو تغییر بدید متناسب با استایلتون.



      اسلایدر نوع دوم به صورت تصاویر محو شونده

      کلیه ی مراحل این نوع اسلایدر تقریبا شبیه اسلایدر نوع قبله
      به این صورت که :

      ابتدا بیس کار یا کد های اچ تی ام ال رو اضافه میکنیم درقالب هدر زیر خطی که در سری قبل توضیح داده شد
      کد های این اسلایدر :
      کد:
      <div class="slider">
      <div class="slider-img">
      </div>
      </div>
      و حالا این کد هارو آخر ادیشنال دات سی اس اس اضافه میکنیم :

      کد:
      .slider {
      position:absolute;
      border-radius:5px;
      left:65px;
      top:75px;
      height:auto !important;
      width:auto !important;
      border:10px solid rgba(0,0,0,0.45);
      }
      .slider-img {
      wdith:463px;
      height:179px;
      overflow:hidden;
      width:463px;
      height:179px;
      animation:slider 15s infinite;
      -webkit-animation:slider 15s infinite;
      -moz-animation:slider 15s infinite;
      -o-animation:slider 15s infinite;
      }
      @-webkit-keyframes slider 
      {
      	0%{background:url('images/slider/1.jpg');}
      	10%{background:url('images/slider/1.jpg');}
      	20%{background:url('images/slider/1.jpg');}
      	30%{background:url('images/slider/2.jpg');}
      	40%{background:url('images/slider/2.jpg');}
      	50%{background:url('images/slider/2.jpg');}
      	60%{background:url('images/slider/3.jpg');}
      	70%{background:url('images/slider/3.jpg');}
              80%{background:url('images/slider/3.jpg');}
      	100%{background:url('images/slider/1.jpg');}
      }
      @-moz-keyframes slider 
      {
      	0%{background:url('images/slider/1.jpg');}
      	10%{background:url('images/slider/1.jpg');}
      	20%{background:url('images/slider/1.jpg');}
      	30%{background:url('images/slider/2.jpg');}
      	40%{background:url('images/slider/2.jpg');}
      	50%{background:url('images/slider/2.jpg');}
      	60%{background:url('images/slider/3.jpg');}
      	70%{background:url('images/slider/3.jpg');}
              80%{background:url('images/slider/3.jpg');}
      	100%{background:url('images/slider/1.jpg');}
      }
      @-o-keyframes slider 
      {
      	0%{background:url('images/slider/1.jpg');}
      	10%{background:url('images/slider/1.jpg');}
      	20%{background:url('images/slider/1.jpg');}
      	30%{background:url('images/slider/2.jpg');}
      	40%{background:url('images/slider/2.jpg');}
      	50%{background:url('images/slider/2.jpg');}
      	60%{background:url('images/slider/3.jpg');}
      	70%{background:url('images/slider/3.jpg');}
              80%{background:url('images/slider/3.jpg');}
      	100%{background:url('images/slider/1.jpg');}
      }
      عکس هارو هم لازمه تو آدرس داده شده آپلود کنید و هر عکس باید ابعادش 463*173 پیکسل باشه

      پایانمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

      توضیحات:

      در این اسلایدر بر خلاف اسلایدر سری قبل از بکگراند ایمیج استفاده کردیم.البته میشه که اسلایدر نوع قبل رو هم با بک گراند ایمیج و یک تصویر اسپرایت شده دقیقا مثل تصویر نمونه ساخت ولی ما بنا به دلایلی این کار رو نکردیم.
      همچنین میتونید برای لینک دار کردن تصاویر در اسلایدر سری 1 تصویر بزرگ رو به سه تصویر کوچک مثل سری دو تقسیم کنید و جدا جدا از تگ img استفاده کنید و با استفاده از تگ a هم لینک دار کنید تصاویر رو.

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

      14 نفر از اعضا پست PinkPen را پسندیده اند


  1. #2
    N[I]MA آنلاین نیست.
    N[I]MA
    گرافيست
    1,244نوشته2,054مورد پسند

    تاریخ عضویت
    May 2013
    شماره عضویت
    1752
    پسندیده است
    2,365 پست
    بلاگ
    پست
    میزان امتیاز
    2064
    No Set
    خیلی عالی فرزین , ممنون

    خسته نباشی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست N[I]MA را پسندیده است:



  2. #3
    Danial آنلاین نیست.
    Danial
    کانديد مديريت
    625نوشته1,060مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    64
    پسندیده است
    692 پست
    بلاگ
    0 پست
    میزان امتیاز
    1070
    www.delgia.ir
    درود
    بسیار زیبا فرزین جان!
    فقط از این که نظر نمی دیم ناراحت نشو!
    می ترسیم بگن اسپم دادیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست Danial را پسندیده اند



  3. #4
    PinkPen آنلاین نیست.
    PinkPen
    مدير بازنشسته
    929نوشته1,760مورد پسند

    تاریخ عضویت
    Oct 2013
    شماره عضویت
    3202
    پسندیده است
    2,068 پست
    بلاگ
    پست
    میزان امتیاز
    1769
    http://celebiran.ir/
    مرسی از لایکا و نظرامرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    باور کنین ما دلمون به همینا خوشه نظر که میدین دلگرم میشیممرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی کارای بعدی بهتر میشه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    وگرنه سود دیگه ای که نداره برای ما
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست PinkPen را پسندیده است:


    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #5
    MR.OMID آنلاین نیست.
    MR.OMID
    پاسخگو و راهنما
    3,058نوشته3,198مورد پسند

    تاریخ عضویت
    Dec 2013
    شماره عضویت
    3759
    پسندیده است
    4,006 پست
    بلاگ
    4 پست
    میزان امتیاز
    3204
    مسئول 2 ستاره
    WiKiVb
    فرزین جان عالیهمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    خسته نباشیمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست MR.OMID را پسندیده اند


    برای کسی که ریشه داره...
    .
    .
    .
    .
    .
    شاخ و برگ مهم نیست...!!!مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی


    en sevdiğim diziler

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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


  5. #6
    TORNADO آنلاین نیست.
    TORNADO
    کاربر سايت
    31نوشته8مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1484
    پسندیده است
    36 پست
    بلاگ
    پست
    میزان امتیاز
    18
    No Set
    از لوگو میزنه بالا!
    میخوام همه رده/ردیف تصویر لوگو باشه، چیکار کنم؟!

  6. #7
    Ali.shafaey آنلاین نیست.
    Ali.shafaey
    کاربر برتر فصل
    مدير ارشد
    6,425نوشته8,292مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1571
    پسندیده است
    4,628 پست
    بلاگ
    پست
    میزان امتیاز
    8298
    مسئول 7 ستاره
    king-design.ir
    نقل قول نوشته اصلی توسط TORNADO نمایش پست ها
    از لوگو میزنه بالا!
    میخوام همه رده/ردیف تصویر لوگو باشه، چیکار کنم؟!
    درود
    آدرس انجمنتون رو بزارید

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  7. #8
    ali006 آنلاین نیست.
    ali006
    کاربر سايت
    52نوشته13مورد پسند

    تاریخ عضویت
    Jul 2015
    شماره عضویت
    9186
    پسندیده است
    2 پست
    بلاگ
    پست
    میزان امتیاز
    23
    www.gigafilm.tk
    من این رو برای بک گران هدرم گذاشتم ولی فقط تو کروم کار میکنه و با موزیلا و اکسپلورر که تست کردم چیزی نشون نمیداد
    www.gigafilm.in

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی