• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

قرار دادن پترن روی عکس ها توسط CSS و jQuery

4935 ۲۵ بهمن ۹۲

به نام خدا

با سلام خدمت همه ی سون لرنی های عزیز.امروز هم با آموزشی دیگر با شما همراه هستم.امروز می خواهیم بدونیم که چطور میشه روی تصاویر یه پترنی بندازیم تا تصاویرمون زیبا تر بشه یا یکم کلاسشون بره بالا! اگه گذرتون به پیوندها خورده باشه حتما تصاویرشو که روش پترن هست دیدید.

ابتدا دمو رو ببینید.

demo

 

پترنی که روی عکس هامون انداختیم ، یه تصویر 2*2 هست که تنها یک پیکسل اون رنگش سیاهه و شفافیتش(opacity) هم 50% هست که تکرارش کردیم.به تصویر زیر نگاه کنید.

demo_pattern

 

خب حالا بریم سراغ کدهامون.

HTML:

میبینید که سه عکس با کلاس pattern فراخوانی کردیم.خب حالا با جی کوئری هر یک از این تگ های img رو داخل یک دایو با کلاس pattern-img قرار میدهیم.به کد زیر توجه کنید.

jQuery:

توضیح:در خط اول گفتیم که وقتی صفحه تماماً لود شد، کد های خط 2 تا 7 اجرا بشه.در خط 2 گفتیم که هر تگ img که کلاس pattern داره ، داخل divی با کلاس pattern-img قرار بگیره.در خط سوم گفتیم به ازای هر چندتا دایو با کلاس pattern-img داریم، کد های خط 4 تا 6 اجرا بشه.

خط 4 جایگزین ('div.pattern-img')$ هست.در خط 5 ، ارتفاع دایو را، همان ارتفاع تگ img داخلش قرار دادیم(یعنی ارتفاعش برابر ارتفاع تصویر داخل خودش هست) ؛ در خط ششم هم مانند خط پنجم ،عرض دایو را تعیین کردیم.

نکته : میتونید به آموزش های جی کوئری که آقا وحید قرار میدن هم سر بزنید.(آموزش استفاده از تابع find() )

وقتی که کد jQuery اجرا شد، کد های HTML به صورت زیر خواهند بود:

نکته :  اگر دوست ندارید از جی کوئری استفاده کنید و فقط میخواهید با CSS روی تصاویر پترن بندازید، خودتون تگ های img را مانند کد بالا داخل دایوی با کلاس pattern-img قرار دهید.

خب میریم سراغ قسمت اصلی یعنی CSS.

CSS:

همونطور که دیدید حالا به همون دایوی که عکس ها داخلش قرار دارند، استایل بالا رو  دادیم.همنطور که دیدید به دایو پترن(div.pattern-img) پوزیشن relative دادیم.بعد هم از شبه عنصر after استفاده کردیم.

در خط هفتم، ::after را نمایان کردیم(یعنی اگر این خط رو ننویسیم ، ::after پنهان هست).در خط هشتم بکگراند ::after را همان پترن 2*2 گذاشتیم(شما میتونید به سلیقه ی خودتون یه پترن دیگه ای طراحی کنید و از اون استفاده کنید.) و گفتیم که تکرار بشه.در خط 9 تا 13 هم اندازه ی ::after رو مشخص کردیم.

دیدید که خیلی ساده بود.امیدوارم مفید باشه.اگه سوالی هم داشتید بپرسید.

موفق باشید؛ یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید. نظردهی برای این مطلب بسته شده است .

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram