خانه / وردپرس / آموزش وردپرس / نحوه ایجاد محو شدگی در تصاویر در هنگام قرار گرفتن موس

تاریخ انتشار: مرداد 28, 1394 تعداد بازدید: 354 بازدید تعداد دیدگاه ها: 0

نحوه ایجاد محو شدگی در تصاویر در هنگام قرار گرفتن موس

سلام دوستان.روز بخیر

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

همانطور که میدانید برای اعمال این مورد به قالب وردپرس باید فایل های CSS قالب وردپرس خود را سفارشی سازی نمائید.پس برای این منظور وارد فایل Style.css شده و ان را در حالت ویرایش باز کنید سپس کد زیر را در آن و در مکان مناسب درج نمائید:

</pre>
post img:hover {opacity:0.6;filter:alpha(opacity=60);  }
<pre>

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

</pre>
.post img {opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */}.post img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */-webkit-transition: all 2s ease;-moz-transition: all 2s ease;-ms-transition: all 2s ease;-o-transition: all 2s ease;transition: all 2s ease;}
<pre>

این هم از آموزش هک وردپرس و کار با تصاویر در وردپرس.دوستان همیشه در هنگام تغییر کد های وردپرس پشتیبان گیری از آن ها را فراموش نکنید

منبع : فریش تم

کانال تلگرام فریش تم
  • دیدگاه شما پس از تایید در سایت نمایش داده می شود.
  • از ارسال متن بصورت فینگلیش خودداری نموده و فارسی تایپ کنید.
  • دیدگاه و سوالات شما توسط کارشناسان ما بین 1 تا 12 ساعت پاسخ داده خواهد شد.
  • از ارسال دیگاه جهت پشتیبانی محصولات تجاری پرهیز و برای پشتیبانی از بخش پشتیبانی سایت اقدام فرمائید

هنوز دیدگاهی ثبت نشده است.