تبلیغات

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

آخرین ارسال های تالار مشاهده انجمن
  • مشکل افزودن بازی اسکریپت AV Arcade 7 پاسخ 59 بازدید
  • مشکل در روولوشن اسلایدر 2 پاسخ 20 بازدید
  • قالب صحیفه 3 پاسخ 18 بازدید
  • اسکریپت GramEasy 9 پاسخ 123 بازدید
  • شمسی کردن اسکریپت 0 پاسخ 12 بازدید
  • فروش عمده -راهکار 1 پاسخ 18 بازدید
  • فعال سازی اسکریپت 1 پاسخ 34 بازدید
  • قابلیت های gravty form 1 پاسخ 19 بازدید
  • خطای Turning standard Bootstrap alerts هنگام افزودن اکانت 23 پاسخ 318 بازدید
  • مشکل در لاگین Gramyeasey نیازمند راهنمایی 1 پاسخ 52 بازدید
  • هاست

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

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

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

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

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

     

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

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

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

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

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

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

     


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

    دانلود
    .

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

    مطلب مفیدی بود ؟
    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    2,250نمایش اطلاعات تنها برای کاربران عضو تاریخ : 2013/10/31
    5,549آموزش ساخت تب بوسیله جی کوئری تاریخ : 2013/11/27
    2,641صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
    2,510چندین ترفند کاربردی برای وردپرس تاریخ : 2014/01/11
    2,373کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 2014/10/17
    2,204انتشار اولین شماره ماهنامه مدرسه مجازی ایرانیان تاریخ : 2014/04/6
    7,316دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 2015/01/1
    4,129فایل لایه باز کارت ویزیت شماره 4 تاریخ : 2014/07/13
    2,191نمایش مطالب نویسنده در مدیریت تاریخ : 2014/01/10
    4,517برچسب های کاربری انجمن به صورت لایه باز PSD تاریخ : 2014/05/28
    3,384آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3 تاریخ : 2015/07/13
    3,593فایل لایه باز کارت ویزیت شماره 1 تاریخ : 2014/02/2
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب