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

هاست

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

CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند

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

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

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

 

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

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

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

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

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

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

 

لطفا به این مطلب امتیاز بدید


دانلود


هاست مناسب برای تمامی اسکریپت های 20script MyHBD.net >

هاست
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,144چگونه آدرس ایمیل را در وردپرس لینک کنیم تاریخ : 2017/01/2
7,823نحوه افزودن فهرست به پوسته وردپرس تاریخ : 2015/08/14
1,736دانلود مجموعه شیپ کاربردی برای فتوشاپ تاریخ : 2019/06/1
3,638نمایش اطلاعات تنها برای کاربران عضو تاریخ : 2013/10/31
4,292دانلود PSD کیت آمار Infographic تاریخ : 2013/11/15
4,103رفع بارگذاری API گوگل پلاس تاریخ : 2013/10/29
5,526پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری تاریخ : 2014/02/25
3,816شمارش تعداد رکوردهای یک کلید در پست متا در وردپرس تاریخ : 2014/08/17
6,637فایل لایه باز کارت ویزیت شماره 1 تاریخ : 2014/02/2
4,597صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
7,404آموزش ساخت بنر متحرک موزیک در فتوشاپ تاریخ : 2014/07/3
4,354چندین ترفند کاربردی برای وردپرس تاریخ : 2014/01/11
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب