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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 15 از 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 | #11
    کاربر سایت

    ورژن ویبولتین
    4.2.0 Pl3
    نوشته ها
    302
    میزان امتیاز
    38

    پیش فرض

    خیلی خوبه میشه به مثال "مشتریان ما " یا دوستان ما هم ازش استفاده کرد و لوگو به جای متن گذاشت ممنون دوست عزیز

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





  2. گیفت کارت آیتونز

  3. Top | #12
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    656
    میزان امتیاز
    71

    پیش فرض

    ممنون زیبا شده
    فقط کد های دو تا باکس رو هم به
    additional.css اضافه کنیم ؟

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

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

    پیش فرض

    خیر
    اگر میخواید فقط در صفحه اول نشون داده بشه
    FORUMHOME
    اگر میخواید فقط در پست ها نشون بده
    postbit_legacy
    اگر میخواید در تمامی صفحه ها نشون بده به
    header یا footer اضافه کنید

    ــــــــــــــ
    پست اول ویرایش شد

    2 تشکر توسط:


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

    ورژن ویبولتین
    4.2
    نوشته ها
    1,439
    میزان امتیاز
    164

    پیش فرض

    بسیار زیبا " لطفا اگه امکانش هست لوگین کردن به همین صورت قرار دهید

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

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

    پیش فرض

    چشم به زودی ایجاد میشه

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


صفحه 2 از 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)

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

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