طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن
  • درخواست قالب سایت معرفی 2 پاسخ 19 بازدید
  • انتقال سایت 6 پاسخ 172 بازدید
  • پیشنهاد دامین دات کام 2 پاسخ 23 بازدید
  • درخواست افزونه گالری تصویر همراه ویجیت 4 پاسخ 26 بازدید
  • مشکل ارسال ایمیل وردپرس 7 پاسخ 40 بازدید
  • بهترین رستوران های پوکت 0 پاسخ 8 بازدید
  • بهترین رستوران های روسیه 0 پاسخ 5 بازدید
  • فلسفه تور لحظه آخری 0 پاسخ 10 بازدید
  • پیش فروش افزونه بازی تخته نرد وردپرس 4 پاسخ 31 بازدید
  • مشکل در نصب اسکریپت ewallet 6 پاسخ 95 بازدید


  • درگاه پرداخت

    افکت نقطه‌نقطه روی تصاویر با CSS

    CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
    افکت نقطه‌نقطه روی تصاویر با CSSReviewed by جواد on Oct 29Rating: 4.5افکت نقطه‌نقطه روی تصاویر با CSSبرای گذاشتن افکت روی تصاویر خود کار های متفاوتی میتوان کرد و یکی از زیبا ترین افکت ها نفطه نقطه گذاشتن روی تصویر است.

    برای گذاشتن افکت روی تصاویر خود کار های متفاوتی میتوان کرد و یکی از زیبا ترین افکت ها نفطه نقطه گذاشتن روی تصویر است.

    ابتدا در پرونده‌ی اچ‌تی‌ام‌ال‌مان یک همچین‌چیزی می‌نویسیم:

     

    سپس فتوشاپ‌مان را آتیش می‌کنیم و یک سند جدید با طول و عرض مثلا ۳ پیکسل ایجاد می‌کنیم و دقیقا در وسط ِ آن یک نقطه‌ی ریز با طول و عرض ۱ پیکسل و رنگ ِ مشکی قرار می‌دهیم. به‌تر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی ۶۰ درصد بگذاریم! البته این نقطه را من قبلا درست کرده‌ام و در فایلی که دریافت می‌کنید، موجود است، و می‌توانید از همان استفاده کنید.

    خب، حالا این نقطه‌ای که طراحی کرده‌ایم را با پسوند ِ پی‌ان‌جی (png) ذخیره می‌کنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.

    حالا نوبت به دستورات ِ سی‌اس‌اس می‌رسد:

    قطه‌ای که درست کرده بودیم را در زمینه‌ی dot-effect قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

    تمام شد. به همین راحتی یک جلوه‌ی زیبا برای تصاویرمان درست کردیم. از این افکت به‌نظرم به‌تر هست که در نمایش‌های اسلایدی یا چیزهایی شبیه آن استفاده شود.

    نمونه فایل پیوست شد.

     


    به کانال تلگرام بیست اسکریپت بپیوندید !

    دانلود

    اخبارتاپ - اخبار جدید لحظه ای ایران و جهان


    مطلب مفیدی بود ؟
    نویسنده : admin تاریخ : 1392/08/7 1 CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند

    لینک کوتاه مطلب : http://www.20script.ir/?p=1010

    کلمات کلیدی پست :
    میهن وب هاست هاست
    مطالب مرتبط
    245فایل لایه باز کارت ویزیت شماره 5 تاریخ : 1395/12/12
    1,776نمایش مطالب نویسنده در مدیریت تاریخ : 1392/10/20
    1,928رفع بارگذاری API گوگل پلاس تاریخ : 1392/08/7
    3,504غیر فعال کردن کلیک راست در وردپرس تاریخ : 1393/04/1
    1,675شمارش تعداد رکوردهای یک کلید در پست متا در وردپرس تاریخ : 1393/05/26
    2,599آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3 تاریخ : 1394/04/22
    3,659برچسب های کاربری انجمن به صورت لایه باز PSD تاریخ : 1393/03/7
    1,714انتشار اولین شماره ماهنامه مدرسه مجازی ایرانیان تاریخ : 1393/01/17
    2,546پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری تاریخ : 1392/12/6
    4,787دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 1393/10/11
    3,712حذف کردن فیلد آدرس سایت از فرم نظرات وردپرس تاریخ : 1393/02/15
    1,839دانلود PSD کیت آمار Infographic تاریخ : 1392/08/24
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب