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

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumکسی قالب گود نیوز رو داره ؟ا04H A S A N
iconforumسفارش پلاگین وردپرس08yosef67
iconforumاسکریپت و افزونه بانک پاسارگاد222H A S A N
iconforumهشدار درباره ادامه حملات سایبری به بانکها030AynaZ
iconforumقالب های ایرانی وردپرس * مارکت مجمع طراحان وب و گرافیک ایران012wwwha
iconforumلوگو سایت تفریحی561AynaZ
iconforumاسکریپت ptciran8106AynaZ
iconforumافزونه کوتاه کننده489AynaZ
iconforumلایک وردپرس117AynaZ
iconforumدرخواست اسکریپت کوتاه کننده لینک115AynaZ
iconforumدوزبانه کردن سایت114AynaZ
درگاه پرداخت
درگاه پرداخت

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

CSS , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
افکت نقطه‌نقطه روی تصاویر با CSSReviewed by جواد on Oct 29Rating: 4.5افکت نقطه‌نقطه روی تصاویر با CSSبرای گذاشتن افکت روی تصاویر خود کار های متفاوتی میتوان کرد و یکی از زیبا ترین افکت ها نفطه نقطه گذاشتن روی تصویر است.

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

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

 

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

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

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

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

حتما بخوانید  صفحه عضویت و ورود زیبا CSS3

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

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

 


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

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,603رفع بارگذاری API گوگل پلاس تاریخ : 1392/08/7
1,589طرح لایه باز دکمه های رادیویی روشن / خاموش تاریخ : 1393/04/22
4,162۳ طرح لایه باز کیف پول چرم تاریخ : 1392/08/1
2,107آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3 تاریخ : 1394/04/22
1,405شمارش تعداد رکوردهای یک کلید در پست متا در وردپرس تاریخ : 1393/05/26
1,832اکشن کاربردی تبدیل تصاویر به مجله تاریخ : 1392/08/4
2,397فایل لایه باز کارت ویزیت شماره 1 تاریخ : 1392/11/13
1,306افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML تاریخ : 1392/12/23
1,441انتشار اولین شماره ماهنامه مدرسه مجازی ایرانیان تاریخ : 1393/01/17
2,027پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری تاریخ : 1392/12/6
2,920غیر فعال کردن کلیک راست در وردپرس تاریخ : 1393/04/1
1,775صفحه اختصاصی برای خطای پایگاه داده تاریخ : 1392/08/5
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب