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




 

آموزش وردپرس WordPressآموزش وردپرس WordPress سایت

آموزش جی کوئری jQueryآموزش جی کوئری jQuery جاوا اسکریپت

آموزش انگولار جی اس Angular JS آموزش انگولار جی اس 2 AngularJS 

آموزش اچ تی ام ال HTML5 CSS3آموزش HTML5 و CSS3 اچ تی ام ال 5

آموزش پی اچ پی PHPآموزش پی اچ پی PHP پک 1 برنامه نویسی وب

آموزش سئو SEO آموزش سئو سایت و وردپرس SEO گوگل 

آموزش هک قانونی آموزش هک قانونی - نفوذ و امنیت - پک1

آموزش برنامه نویسی اندروید استودیو  آموزش برنامه نویسی اندروید استودیو  

آموزش زامارین Xamarinآموزش زامارین Xamarin برنامه نویسی موبایل

اسلایدر رولوشن فارسی
هاست

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

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

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

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

 

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

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

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

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

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

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

 


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

دانلود

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
2,571غیر فعال کردن رونوشت ها در نوشته های وردپرس تاریخ : 1392/12/10
1,894شمارش تعداد رکوردهای یک کلید در پست متا در وردپرس تاریخ : 1393/05/26
4,910آموزش ساخت تب بوسیله جی کوئری تاریخ : 1392/09/6
1,764افزودن تصاویر شاخص با استفاده از کدهای ایستا در HTML تاریخ : 1392/12/23
20,742نحوه درون ریزی فایل xml دمو پوسته های وردپرس تاریخ : 1394/05/24
4,011برچسب های کاربری انجمن به صورت لایه باز PSD تاریخ : 1393/03/7
856فایل لایه باز کارت ویزیت شماره 5 تاریخ : 1395/12/12
3,894غیر فعال کردن کلیک راست در وردپرس تاریخ : 1393/04/1
2,510اکشن کاربردی تبدیل تصاویر به مجله تاریخ : 1392/08/4
2,337صفحه اختصاصی برای خطای پایگاه داده تاریخ : 1392/08/5
2,029طرح لایه باز دکمه های رادیویی روشن / خاموش تاریخ : 1393/04/22
2,090کتاب آموزشی HTML و XHTML به زبان فارسی تاریخ : 1393/07/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب