خرید هاست ارزان ایران / آلمان

متنوع ترین سرویس های هاستینگ با CPANEL افزودن دامنه - ایمیل - mysql نامحدود پرداخت بصورت ماهانه / سه ماهه / شش ماهه / سالانه SSL رایگان حتی برای دامنه های IR راه اندازی آنی پشتیبانی 24 ساعته ، یکماه ضمانت بازگشت وجه امکان استفاده از شتابدهنده و پکیج تضمین امنیت وردپرس مشاوره آنلاین روی سایت | 02154109999 | talashnet.com

اپلیکیشن ساز آنلاین اپتو

ساخت اپلیکیشن بدون کدنویسی دریافت خروجی برای اندروید و آی او اس امکان ساخت اپلکیشن فروشگاهی، خبری، آموزشی، وردپرس، ووکامرس، موزیک و....تلفن تماس و پشتیبانی 03136626049 از ساعت 10 الی 17 خودت اپتو بساز و.. ..

کابین وب

100 قالب وردپرس کاملا اورجینال و فارسی همراه با بسته نصبی + آپدیت و پشتیبانی مادام العمر 75 افزونه پرکاربرد و پرفروش تماما فارسی و اورجینال با 99 درصد تخفیف ویژه برای کاربران قالب های 100 هزارتومانی را 1000 تومان خرید کنید و...

خانه » اسکریپت ها » CSS » افکت نقطه‌نقطه روی تصاویر با CSS

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

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

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

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

</div>

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

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

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

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

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

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

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

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

حجم ، تعداد و فرمت فايل ها :56 کیلوبایت ، — فايل با فرمت Zip

رمز فايل :www.20script.ir

دمو :demo

دانلود فايل از سرور بيست اسکريپت