تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده


تبلیغات
تبلیغات تبلیغات

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

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

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

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

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

<div id="content">
    <div id="dot-effect"></div>
    <img src="img.jpg" />
    </div>

 

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

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

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

#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}

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

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

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

 

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=1010
کلمات کلیدی پست :
مطالب مرتبط
8,763خطای رایج Memory Exhausted و روش حل آن تاریخ : 2014/01/12
8,020دانلود طرح لایه باز پرچم 195 کشور به صورت صاف (flat) تاریخ : 2018/06/9
12,001باز نشدن دسته های وردپرس تاریخ : 2015/08/8
6,108چگونه آدرس ایمیل را در وردپرس لینک کنیم تاریخ : 2017/01/2
11,876دانلود مجموعه شیپ کاربردی برای فتوشاپ تاریخ : 2019/06/1
12,304آموزش ساخت بنر متحرک موزیک در فتوشاپ تاریخ : 2014/07/3
7,288انتشار اولین شماره ماهنامه مدرسه مجازی ایرانیان تاریخ : 2014/04/6
6,939رفع بارگذاری API گوگل پلاس تاریخ : 2013/10/29
7,617افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML تاریخ : 2014/03/14
16,460دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 2015/01/1
16,928فایل لایه باز کارت ویزیت شماره 5 تاریخ : 2017/03/2
12,629فایل لایه باز کارت ویزیت شماره 1 تاریخ : 2014/02/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات