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

افکت نقطه‌نقطه روی تصاویر با 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
کلمات کلیدی پست :
مطالب مرتبط
10,621فایل لایه باز کارت ویزیت شماره 1 تاریخ : 2014/02/2
7,435دانلود کیت عناصر مهم طراحی PSD تاریخ : 2013/11/18
8,034پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری تاریخ : 2014/02/25
6,760دانلود PSD کیت آمار Infographic تاریخ : 2013/11/15
8,171اکشن کاربردی تبدیل تصاویر به مجله تاریخ : 2013/10/26
5,939نمایش مطالب نویسنده در مدیریت تاریخ : 2014/01/10
5,936انتشار اولین شماره ماهنامه مدرسه مجازی ایرانیان تاریخ : 2014/04/6
7,279خطای رایج Memory Exhausted و روش حل آن تاریخ : 2014/01/12
6,003رفع بارگذاری API گوگل پلاس تاریخ : 2013/10/29
10,589برچسب های کاربری انجمن به صورت لایه باز PSD تاریخ : 2014/05/28
6,725کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 2014/10/17
33,841نحوه درون ریزی فایل xml دمو پوسته های وردپرس تاریخ : 2015/08/15
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات