گیفت کارت آیتونز
نمایش نتایج: از 1 به 7 از 7

موضوع: افکت فول css سیاه و سفید کردن عکس ها

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

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    5.1.5
    سن
    23
    نوشته ها
    4,060
    مورد پسند
    2,645 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 28.0.1500.95
    میزان امتیاز
    465

    پیش فرض افکت فول css سیاه و سفید کردن عکس ها

    در کدی که امروز برای شما در وی بی ایران قرار میدهم ، با استفاده از آن میتوانید تصاویر داخل صفحه مورد نظر خود را به صورت سیاه و سفید درآورده و با رفتن موس روی آنها ، به صورت رنگی و اصلی نمایش داده بشن.این کد بسیار زیبا بوده و میتواند جذابیت خاصی به صفحات وب ببخشد!


    برای استفاده از این کد ، ابتدا کد زیر را در قالب خود بیابید :


    کد:
    کد:
    </head>
    کد:
     

    سپس کد زیر را در بالای آن قرار دهید :


    کد:
    کد:
    <style>img {######: url("data:image/svg+xml;utf8,&lt;svg  xmlns='http://www.w3.org/2000/svg'&gt;&lt;######  id='grayscale'&gt;&lt;feColorMatrix type='matrix' values='0.3333  0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0  0 1 0'/&gt;&lt;/######&gt;&lt;/svg&gt;#grayscale");######: gray;-webkit-######: grayscale(100%);######: grayscale(100%);-moz-######: grayscale(100%);-ms-######: grayscale(100%);-o-######: grayscale(100%);transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}img:hover{-webkit-######: grayscale(0%);-moz-######: grayscale(0%);-ms-######: grayscale(0%);-o-######: grayscale(0%);######: none;transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}</style>





    مرورگر های سازگار :Chrome +18, Firefox +4, IExplorer +6, Safari +5.2

    وبلاگ توتز
    ویرایش توسط Patch Master : 2013/09/28 در ساعت 06:34 PM

    3 تشکر توسط:

    .Everybody talks about the weather, we don't




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

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

    تاریخ عضویت
    Jun 2012
    ورژن ویبولتین
    All Versions
    نوشته ها
    3,123
    مورد پسند
    2,534 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.62
    میزان امتیاز
    0

    پیش فرض

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

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

    تاریخ عضویت
    Jan 2011
    ورژن ویبولتین
    4.1.11
    نوشته ها
    309
    مورد پسند
    84 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 24.0
    میزان امتیاز
    40

    پیش فرض

    اگه بخوایم یه سری عکس خاص سیاه و سفید بشن به نشونه اینکه اون لینک ها موقتا غیر فعال هستند چی؟؟


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

    تاریخ عضویت
    Aug 2012
    ورژن ویبولتین
    4
    نوشته ها
    1,252
    مورد پسند
    1,031 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.76
    میزان امتیاز
    156

    پیش فرض

    خب باید ای سی اس اس رو فقط روی اون عکس انجام بدین با استفاده از:

    style
    آموزش قرار دادن حالت من به صورت ثابت(زیباسازی حالت من)
    آموزش قدم وقدم نصب وراه اندازی vb(متن+تصویر=هاست لوکال+انتقال از لوکال)
    آموزش قرار دادن دکمه ی بالارونده(اختصاصی وی بی ایران)
    =-=-=-=-=-=-=-=-=-=-=
    وی بی ایران نوید موفقیت!!


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

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    5.1.5
    سن
    23
    نوشته ها
    4,060
    مورد پسند
    2,645 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.76
    میزان امتیاز
    465

    پیش فرض

    شما باید این رو به صورت Css در additional.css بریزید و تو جایی که میخواید فراخوانی کنید، اگه کدنویسی بلد باشید کار اسونیه
    .Everybody talks about the weather, we don't

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

    تاریخ عضویت
    Aug 2012
    ورژن ویبولتین
    4
    نوشته ها
    1,252
    مورد پسند
    1,031 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.76
    میزان امتیاز
    156

    پیش فرض

    میتونید به صورت زیر قرار بدید:
    کد:
    <img style="######: url("data:image/svg+xml;utf8,&lt;svg  xmlns='http://www.w3.org/2000/svg'&gt;&lt;######  id='grayscale'&gt;&lt;feColorMatrix type='matrix' values='0.3333  0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0  0 1 0'/&gt;&lt;/######&gt;&lt;/svg&gt;#grayscale");######: gray;-webkit-######: grayscale(100%);######: grayscale(100%);-moz-######: grayscale(100%);-ms-######: grayscale(100%);-o-######: grayscale(100%);transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}img:hover{-webkit-######: grayscale(0%);-moz-######: grayscale(0%);-ms-######: grayscale(0%);-o-######: grayscale(0%);######: none;transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;" src="" />
    ومیتونید در فایل
    additional.css یه کلاس با نام دلخواه مثلا:
    کد:
    .a{######: url("data:image/svg+xml;utf8,&lt;svg  xmlns='http://www.w3.org/2000/svg'&gt;&lt;######  id='grayscale'&gt;&lt;feColorMatrix type='matrix' values='0.3333  0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0  0 1 0'/&gt;&lt;/######&gt;&lt;/svg&gt;#grayscale");######: gray;-webkit-######: grayscale(100%);######: grayscale(100%);-moz-######: grayscale(100%);-ms-######: grayscale(100%);-o-######: grayscale(100%);transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}img:hover{-webkit-######: grayscale(0%);-moz-######: grayscale(0%);-ms-######: grayscale(0%);-o-######: grayscale(0%);######: none;transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}
    بسازید و بعد اونو توی تصویری که میخواین فراخوانی کنید:
    کد:
    <img class="a" src="" />
    البته این قسمت hover کلاس ساخته شده هست:
    کد:
    img:hover{-webkit-######: grayscale(0%);-moz-######: grayscale(0%);-ms-######: grayscale(0%);-o-######: grayscale(0%);######: none;transition: 1.5s;-webkit-transition: 1.5s;-moz-transition: 1.5s;-o-transition: 1.5s;-ms-transition: 1.5s;-khtml-transition: 1.5s;}
    باید اینطور وارد کنید:
    کد:
    a:hover:
    آموزش قرار دادن حالت من به صورت ثابت(زیباسازی حالت من)
    آموزش قدم وقدم نصب وراه اندازی vb(متن+تصویر=هاست لوکال+انتقال از لوکال)
    آموزش قرار دادن دکمه ی بالارونده(اختصاصی وی بی ایران)
    =-=-=-=-=-=-=-=-=-=-=
    وی بی ایران نوید موفقیت!!


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

    تاریخ عضویت
    Jul 2013
    ورژن ویبولتین
    20.415
    نوشته ها
    99
    مورد پسند
    9 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 26.0
    میزان امتیاز
    15

    پیش فرض


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

    </head>

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

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

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

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

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

  1. پاسخ: 3
    آخرين نوشته: 2017/05/31, 08:41 AM
  2. پست بیت بسیار ساده اما بسیار شیک
    توسط Danialskh در انجمن آموزش های وی بولتین
    پاسخ: 3
    آخرين نوشته: 2013/05/16, 10:59 AM
  3. پاسخ: 12
    آخرين نوشته: 2012/09/10, 11:55 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/06/01, 10:43 AM
  5. پاسخ: 5
    آخرين نوشته: 2012/03/21, 06:13 PM

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

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

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

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