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

هاست

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

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

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

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

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

 

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

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

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

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

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

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

 


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

دانلود
.

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
4,171حذف کردن فیلد آدرس سایت از فرم نظرات وردپرس تاریخ : 1393/02/15
2,019نمایش مطالب نویسنده در مدیریت تاریخ : 1392/10/20
5,611دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 1393/10/11
2,251چندین ترفند کاربردی برای وردپرس تاریخ : 1392/10/21
2,101دانلود PSD کیت آمار Infographic تاریخ : 1392/08/24
3,998غیر فعال کردن کلیک راست در وردپرس تاریخ : 1393/04/1
1,838افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML تاریخ : 1392/12/23
5,454۳ طرح لایه باز کیف پول چرم تاریخ : 1392/08/1
5,062آموزش ساخت تب بوسیله جی کوئری تاریخ : 1392/09/6
2,085طرح لایه باز دکمه های رادیویی روشن / خاموش تاریخ : 1393/04/22
2,185کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 1393/07/25
1,553نمایش پست مربوط در زمان جستجو در وردپرس تاریخ : 1394/05/15
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب