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





پلتفرم رپورتاژ آگهی و بک لینک تسمینو
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

افکت نقطه‌نقطه روی تصاویر با 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
کلمات کلیدی پست :
مطالب مرتبط
12,335اکشن کاربردی تبدیل تصاویر به مجله تاریخ : 2013/10/26
9,306چندین ترفند کاربردی برای وردپرس تاریخ : 2014/01/11
8,395رفع بارگذاری API گوگل پلاس تاریخ : 2013/10/29
9,372دانلود PSD کیت آمار Infographic تاریخ : 2013/11/15
15,361آموزش ساخت تب بوسیله جی کوئری تاریخ : 2013/11/27
19,260دانلود مجموعه شیپ کاربردی برای فتوشاپ تاریخ : 2019/06/1
9,489کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 2014/10/17
13,475نحوه افزودن فهرست به پوسته وردپرس تاریخ : 2015/08/14
8,343نمایش پست مربوط در زمان جستجو در وردپرس تاریخ : 2015/08/6
37,357نحوه درون ریزی فایل xml دمو پوسته های وردپرس تاریخ : 2015/08/15
14,852آموزش ساخت بنر متحرک موزیک در فتوشاپ تاریخ : 2014/07/3
15,425غیر فعال کردن کلیک راست در وردپرس تاریخ : 2014/06/22
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file