تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 15

مقاله: باکس متحرک Fixed در دو طرف صفحه

    1. باکس متحرک Fixed در دو طرف صفحه »

      باکس متحرک Fixed در دو طرف صفحه

      نگارش: , by (مدیر بازنشسته)
      2013/06/07 07:15 PM
      امتیاز: 

      درود به دوستان عزیز
      تازگیا Keyframes توی سی اس اس یاد گرفتیم گفتم یه کار ابتکاری کنم
      با این کدا میتونید دو باکس که وقتی موس میاد روشون میان داخل صفحه به سایتتون اضافه کنید
      و باکس ها هم برای جلب توجه یه تحرک کوچکی دارن
      به additional.css اضافه کنید
      کد:
      .leftal{
      background: url('http://up.vbiran.ir/uploads/137061598411575_bg.jpg');
      position:fixed;
      top: 200px;
      left:-300px;
      border-top: red solid 1px;
      border-bottom: red solid 1px;
      border-right: red solid 4px;
      border-radius: 0px 10px 10px 0px;
      width: 350px;
      height:200px;
      transition: all 2s ease 0s;
      -moz-transition: all 2s ease 0s;
      -o-transition: all 2s ease 0s;
      -webkit-transition: all 2s ease 0s;
      z-index:9938845;
      animation:leftmove 1s infinite linear alternate;
      }
      @keyframes leftmove{
      from {left:-300px;}
      to {left:-290px;}
      }
      
      .leftal:hover{
      left:0px;
      box-shadow: inset #9d9d9d 0px 0px 40px;
      opacity:0.7;
      animation:leftmove 0;
      }
      .leftal img{
      float:right;
      margin-top:10px;
      margin-right:5px;
      }
      .leftal span{
      background:#fff;
      width:250px;
      height:30px;
      margin-left:20px;
      margin-top:12px;
      border: #c40000 solid 2px;
      border-radius: 8px;
      text-align:center;
      float:left;
      transition: all 1s ease 0s;
      -moz-transition: all 1s ease 0s;
      -o-transition: all 1s ease 0s;
      -webkit-transition: all 1s ease 0s;
      }
      .leftal span:hover{
      box-shadow: red 0px 0px 10px;
      }
      .leftal span a{
      padding:5px;
      }
      .rightal{
      background: url('http://up.vbiran.ir/uploads/137061598411575_bg.jpg');
      position:fixed;
      top: 200px;
      right:-300px;
      border-top: red solid 1px;
      border-bottom: red solid 1px;
      border-left: red solid 4px;
      border-radius: 10px 0px 0px 10px;
      width: 350px;
      height:200px;
      transition: all 2s ease 0s;
      -moz-transition: all 2s ease 0s;
      -o-transition: all 2s ease 0s;
      -webkit-transition: all 2s ease 0s;
      z-index:9938845;
      animation:rightmove 1s infinite linear alternate;
      }
      @keyframes rightmove{
      from {right:-300px;}
      to {right:-290px;}
      }
      .rightal:hover{
      right:0px;
      box-shadow: inset #9d9d9d 0px 0px 40px;
      opacity:0.7;
      animation:rightmove 0;
      }
      .rightal img{
      float:left;
      margin-top:3px;
      margin-left:5px;
      }
      .rightal span{
      background:#fff;
      width:250px;
      height:30px;
      margin-right:20px;
      margin-top:12px;
      border: #c40000 solid 2px;
      border-radius: 8px;
      text-align:center;
      float:right;
      transition: all 1s ease 0s;
      -moz-transition: all 1s ease 0s;
      -o-transition: all 1s ease 0s;
      -webkit-transition: all 1s ease 0s;
      }
      .rightal span:hover{
      box-shadow: red 0px 0px 10px;
      }
      .rightal span a{
      padding:5px;
      }
      حالا کد باکس ها رو اضافه کنید
      اگر میخواید فقط در صفحه اول نشون داده بشه
      FORUMHOME
      اگر میخواید فقط در پست ها نشون بده
      postbit_legacy
      اگر میخواید در تمامی صفحه ها نشون بده به
      header یا footer اضافه کنید
      باکس سمت چپ :
      کد:
      <div class="leftal">
      <img src="http://up.vbiran.ir/uploads/137061598823595_left.png"/>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      </div>
      باکس سمت راست :
      کد:
      <div class="rightal">
      <img src="http://up.vbiran.ir/uploads/137061597821906_right.png"/>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      <span><a href="your link" target="_blank">your text goes here</a></span>
      </div>
      دمو :http://up-assassinsorder.ir/lightb.html
      شات :

      فایل های پیوست شده
      ویرایش توسط Roach : 2013/06/08 در ساعت 10:42 AM
  1. Top | #2
    مدیر بازنشته

    ورژن ویبولتین
    4
    نوشته ها
    2,571
    میزان امتیاز
    304

    پیش فرض

    دوستان اگر انتقاد و پیشنهادی هستش بگید

    کاربر مقابل از Roach بابت این پست مفید تشکر کرده است:


  2. Top | #3
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    146
    میزان امتیاز
    0

    پیش فرض

    عالی
    ایا برای html هم وجود داره؟

    کاربر مقابل از flasher بابت این پست مفید تشکر کرده است:


  3. Top | #4
    مدیر بازنشته

    ورژن ویبولتین
    4
    نوشته ها
    2,571
    میزان امتیاز
    304

    پیش فرض

    منظورتون واسه صفحه معمولیه؟
    بله
    کافیه کذ های سی ای ای رو در تگ style و بقیه رو در body قرار بدید

    2 تشکر توسط:


  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    4.1.4
    نوشته ها
    15
    میزان امتیاز
    0

    پیش فرض

    اگه بخوایم با اسکرول بیاد پایین دستوری بهش اضافه می شه ؟ ( تو صفحه اصلی سایت منظورمه نه تو خود باکس )

    کاربر مقابل از dj-big بابت این پست مفید تشکر کرده است:


  5. Top | #6
    کاربر سایت

    ورژن ویبولتین
    v4.2.0.Patch.Level.3
    نوشته ها
    543
    میزان امتیاز
    65

    پیش فرض

    جالبه انجمنم که درست شد حتما امتحان میکنماخه منتظرم دسوتان رسیدگی کنن

    کاربر مقابل از VBlord بابت این پست مفید تشکر کرده است:


  6. Top | #7
    مدیر بازنشته

    ورژن ویبولتین
    4
    نوشته ها
    2,571
    میزان امتیاز
    304

    پیش فرض

    فیکس هستش و با اسکرول پایین میاد

    2 تشکر توسط:


  7. Top | #8
    کاربر اخراجی

    ورژن ویبولتین
    4.2
    نوشته ها
    146
    میزان امتیاز
    0

    پیش فرض

    میشه خودتون کدش رو برای ht بزارید؟
    ممنون میشم

    کاربر مقابل از flasher بابت این پست مفید تشکر کرده است:


  8. Top | #9
    کاربر سایت

    ورژن ویبولتین
    4
    نوشته ها
    71
    میزان امتیاز
    13

    پیش فرض

    کار فوق العاده اییه

    کاربر مقابل از kaktos بابت این پست مفید تشکر کرده است:


  9. Top | #10
    مدیر بازنشته

    ورژن ویبولتین
    4
    نوشته ها
    2,571
    میزان امتیاز
    304

    پیش فرض

    به درخواست دوستان فایل اچ تی ام الش هم ضمیمه شد

    کاربر مقابل از Roach بابت این پست مفید تشکر کرده است:


صفحه 1 از 2 12 آخرینآخرین

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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. Pink Fluid and Fixed Style 4.1.10
    توسط Dante در انجمن استایل انگلیسی 4.1 | English Style
    پاسخ: 0
    آخرين نوشته: 2012/10/21, 11:46 PM
  2. xFDefault Fluid and Fixed Style 4 1.1.11
    توسط Dante در انجمن استایل انگلیسی 4.1 | English Style
    پاسخ: 0
    آخرين نوشته: 2012/10/21, 11:33 PM
  3. hello (fluid to fixed)
    توسط dioll در انجمن درخواست قالب های پولی و رایگان
    پاسخ: 11
    آخرين نوشته: 2012/05/01, 02:59 PM
  4. پاسخ: 20
    آخرين نوشته: 2011/09/21, 04:02 PM
  5. دانلود استایل Movara (fluid+fixed) + psd فارسی
    توسط R00t در انجمن استایل 4.1.x
    پاسخ: 5
    آخرين نوشته: 2011/07/20, 12:30 AM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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