هاستینگ آسمان هاستمروا هاست
i-whost
گیفت کارت آیتونز و گوگل پلی
صفحه 2 از 2 نخستنخست 12
نمایش نتایج: از 11 به 16 از 16

موضوع: کادر زیبای دور تصاویر

    1. توضیحات کادر زیبای دور تصاویر »»

      کادر زیبای دور تصاویر

      نگارش: 1 ، توسط (کاربر سایت)

      آخرین زمان حضور: Jan 2013 پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان
      نگارش: تمامی ورژن ها امتیاز:  نصب شده: 1 بار
      زمان انتشار: 2011/11/08 بروزرسانی: هرگز دریافت شده: 0 بار
      پشتیبانی نمی شود تغییرات دستی در قالب

      درود

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

      کد بسیار زیبایی کادر دور تصویر cssیکی از بهترین کد های css همان کد کادر دور تصاویرهستش رو براتون قرار میدم.این کد در حال حاظر سایت های بزرگ دارند استفاده می کنند و برای عموم قرار نمی دهند- این کد در مرورگر های مختلف به صورت های مختلف نشان داده می شود که زیبا ترین آن فایرفاکس هستش که تصاویر را به صورت زیبا گرد می کند.







      این کد رو از یه سایت که برای وبلاگ دهی ها (بلاگفا پارسی کیوت و....) گذاشته بود پیدا کردم و برای شما آموزشش رو میذارم که بتونید برای انجمنتون استفاده کنید

      اول دمو (سایت خودم) :
      http://www.20forum.ir/showthread.php?t=1806
      با بردن موس روی عکس ها میتونید تغییرات رو ببینید


      حالا آموزش


      admin cp >>> استایل ها و قالب ها >>> جستجو در قالب ها >>>

      postbit_legacy رو جستجو کنید

      در این قالب کد زیر رو پیدا کنید

      کد:
      {vb:raw post.message}
      و به کد زیر تغییرش بدید

      کد:
      <div class="main-center2"> {vb:raw post.message} </div>
      حالا در همان قسمت جستجوی قالب ها قالب postbit.css رو جستجو کنید

      قالب رو ویرایش کنید

      کد زیر رو بعد از /*post bit*/ قرار دهید

      کد:
      .main-center2 img { background-position: center; margin:8px 4px; border:1px solid #E5E5E5; padding:5px; filter:alpha(opacity=50);
       opacity:0.8;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       text-align: center;
       float: center;
       box-shadow:1px 0px 3px #888; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-repeat:no-repeat; background-attachment:scroll
      }
      .main-center2 img:hover {
       margin:8px 4px; border:1px solid #FFA994; padding:5px; filter:alpha(opacity=100);
       opacity:1.0;
       -moz-border-radius: 25px;
       -webkit-border-radius: 15px;
       background-color: #FFDDD5;
       text-align: center;
       float: center;
       background-repeat: no-repeat;
       background-position:   center 50%;
       box-shadow: 1px 0px 6px #888;
              -webkit-transition:all 0.3s ease-in;
       -moz-transition:all 0.3s ease-in;
       -o-transition:all 0.3s ease-in;
       transition:all 0.3s ease-in     
      }
      کار تمام است

      حالا میتونید تغییرات رو توی پست های تالارتون مشاهده کنید



      رنگ هاشو خودتون میتونید تغییر بدید

      main-center2 img:hover
      وقتی هستش ماوس روی عکس ها میاد رنگ رو می تونید تغییر بدید


      background-color: #FFDDD5;

      رنگ مورد نظربه جای این#FFDDD5

      margin:8px 4px; border:1px solid #FFA994

      solid #FFA994 این هم کنار رنگ یا همون بوردر هستش

      main-center2 img هم همین طور اون ها هم می تونی تغییر بدید


      نمونه:

      زمانی که موس بر روی تصویر نیست
      http://up.vbiran.ir/images/28sl2d72g4p76az4rcyn.png



      زمانی که موس بر روی تصویر هست
      http://up.vbiran.ir/images/awdohmzyvd07ceuiajll.png



      امید وارم راضی باشید

      پشتیبانی شما از نویسنده ( تشکر ، اعلام نصب ، رعایت کپی رایت و پسورد )


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

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

    تاریخ عضویت
    Nov 2011
    ورژن ویبولتین
    3
    آدرس سایت
    کلیک کنید
    نوشته ها
    4
    موضوع ها
    1
    پسندیده
    0
    موردپسند
    9 بار
    اطلاعات
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط ATROAN نمایش پست ها
    شما هر پست بیتیو می تونی شبیه اون کنی مثلا پست بیت همین وی بی ایران یا اینوwww.vbiran.ir/thread11859.html

    فقط باید css ویرایش بشه

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

  3. Top | #13
    کاندیدای مدیریت

    تاریخ عضویت
    Jan 2011
    ورژن ویبولتین
    آخرین نسخه
    نوشته ها
    414
    موضوع ها
    114
    پسندیده
    81
    مورد پسند
    326 بار
    اطلاعات
    میزان امتیاز
    51

    پیش فرض

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

    چند مشکل داشت

    یک وقتی میرفتیم روش یکم ابعاد تغییر میکرد که جالب نبود

    چند پیکسل بزرگ و کوچیک میشد

    و یکم رنگ نارنجی داشت به درد فرم های نمیخورد

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

    چون اگر رنگ پس زمینه روشن باشه و با این پس زمینه برای کلید ها دانلود که در انجمن هست مثل انجمن پشت دکمه را به رنگی در میاورد که از کارای کد می افتد

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

    http://www.fileiran.com/thread4740.html

    کد دوم که تغییرش دادم

    کد:
    .main-center2 img { background-position: center; margin:10px 4px; border:1px solid #c7c7c7; padding:10px; filter:alpha(opacity=50); opacity:0.8;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     text-align: center;
     float: center;
     box-shadow:1px 0px 3px #888; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-repeat:no-repeat; background-attachment:scroll
    }
    .main-center2 img:hover {
     margin:10px 4px; border:1px solid #c7c7c7; padding:10px; filter:alpha(opacity=100);
     opacity:1.0;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     text-align: center;
     float: center;
     background-repeat: no-repeat;
     background-position:   center 50%;
     box-shadow: 1px 0px 6px #888;
            -webkit-transition:all 0.3s ease-in;
     -moz-transition:all 0.3s ease-in;
     -o-transition:all 0.3s ease-in;
     transition:all 0.3s ease-in     
    }

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

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

    تاریخ عضویت
    Dec 2011
    ورژن ویبولتین
    4.1.9
    نوشته ها
    129
    موضوع ها
    10
    پسندیده
    375
    مورد پسند
    74 بار
    اطلاعات
    میزان امتیاز
    16

    پیش فرض

    دوستان یه سئوال؛ میشه کاری کرد عکسها از قبل این افکت رو مثلا با یه کادر آبی داشته باشن وقتی میری روش کم کم بشه قرمز، آخه اینجوری یه خورده عکسا جا به جا میشه، اگه میشه دوستان توضیح بدید

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

    تاریخ عضویت
    May 2011
    ورژن ویبولتین
    4.1.9
    سن
    26
    نوشته ها
    2,930
    موضوع ها
    51
    پسندیده
    1,153
    مورد پسند
    2,823 بار
    نوشته های وبلاگ
    3
    اطلاعات
    میزان امتیاز
    354

    پیش فرض

    نقل قول نوشته اصلی توسط MATADOR نمایش پست ها
    دوستان یه سئوال؛ میشه کاری کرد عکسها از قبل این افکت رو مثلا با یه کادر آبی داشته باشن وقتی میری روش کم کم بشه قرمز، آخه اینجوری یه خورده عکسا جا به جا میشه، اگه میشه دوستان توضیح بدید
    اینو تست کن:
    کد:
    @charset "utf-8";
    /* CSS Document */
    
    .main-center2 img { background-position: center; margin:8px 4px; border:1px solid #E5E5E5; padding:5px; :alpha(opacity=50);
     opacity:0.8;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     text-align: center;
     float: center;
     box-shadow:1px 0px 3px blue; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-repeat:no-repeat; background-attachment:scroll
    }
    .main-center2 img:hover {
     margin:8px 4px; border:1px solid #FFA994; padding:5px; :alpha(opacity=100);
     opacity:1.0;
     -moz-border-radius: 25px;
     -webkit-border-radius: 15px;
     background-color: #FFDDD5;
     text-align: center;
     float: center;
     background-repeat: no-repeat;
     background-position:   center 50%;
     box-shadow: 1px 0px 6px red;
            -webkit-transition:all 0.3s ease-in;
     -moz-transition:all 0.3s ease-in;
     -o-transition:all 0.3s ease-in;
     transition:all 0.3s ease-in     
    }

    2 تشکر توسط:


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

    تاریخ عضویت
    Dec 2011
    ورژن ویبولتین
    4.1.9
    نوشته ها
    129
    موضوع ها
    10
    پسندیده
    375
    مورد پسند
    74 بار
    اطلاعات
    میزان امتیاز
    16

    پیش فرض

    ممنون، کار کرد!

  7. Top | #17
    کاربر سایت

    تاریخ عضویت
    Feb 2012
    ورژن ویبولتین
    4.10
    آدرس سایت
    کلیک کنید
    نوشته ها
    25
    موضوع ها
    4
    پسندیده
    20
    مورد پسند
    3 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 13.0.1
    میزان امتیاز
    0

    پیش فرض

    من این کارو انجام دادم ولی انجمن خراب شد postbit ها دراز شدن و هیچی مغلوم نبود

صفحه 2 از 2 نخستنخست 12

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

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

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

موضوعات مشابه

  1. پاسخ: 43
    آخرين نوشته: 2014/04/29, 09:58 AM
  2. پاسخ: 5
    آخرين نوشته: 2012/04/25, 05:43 PM
  3. پلاس وان (بسیار زیبا متحرک) اختصاصی پرشین دان
    توسط Amir Lord در انجمن آموزش های وی بولتین
    پاسخ: 44
    آخرين نوشته: 2011/12/12, 11:15 AM
  4. پاسخ: 5
    آخرين نوشته: 2011/11/11, 01:33 PM
  5. پاسخ: 8
    آخرين نوشته: 2011/01/18, 04:53 PM

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

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

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

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

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