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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای حرفه ای و پیشرفته Front End (جلسه 10) : استایل دهی به تصاویر مشکل دار یا broken images - قسمت 2

0 161 ۱ آبان ۹۵

در این جلسه با ادامه مبحث استایل دهی به تصاویر مشکل دار یا broken images در خدمتتون هستیم.broken-images

در انتهای جلسه قبل به چنین مثالی رسیدیم و نحوه درست کردن اون رو یاد گرفتیم.

style broken images 3

در این جلسه قصد داریم استایل این مورد رو زیباتر و حرفه ای تر کنیم.

جایگزین کردن متن alt پیش فرض

راه دیگه ای که وجود داره اینه که بیایم و با استفاده از کلاسهای کاذب یا Pseudo Element متن پیش فرض یا ابتدایی رو جایگزین کنیم. روش کلی به این صورت هست که کلاس کاذبمون رو میسازیم و بعد اون رو بر روی متن پیش فرض قرار میدیم و اون رو از دید مخفی میکنیم. برای اینکه بجای آیکون نامناسب تصویر مشکل دار، آیکون بهتری رو قرار بدیم از Font Awesome و آیکونهای اون استفاده میکنیم. این ابزار رو بصورت CDN در قسمت بالای Head سایت قرار میدیم، بصورت زیر:

حالا استایلهای زیر رو برای img در نظر میگیریم:

میبینید که استایلهای مربوط به img ثابت مونده و استایلهای مربوط به img:after تغییر پیدا کرده است. برای این کلاس کاذب، از فونت Font Awesome بهره برده شده و درون ویژگی content از یکی از آیکونهای اون استفاده کرده. برای اینکار عبارت \f1c5 رو قرار داده که آیکون مربوط به تصویر هست. بعد از این آیکون یک فضای خالی یا Space قرار داده شده و با استفاده از attr، به مقدار متن alt دسترسی پیدا کردیم. در نهایت با استفاده از دستورات position و z-index و ... کاری کردیم که این کلاس کاذب بر روی خود img قرار بگیره و اون رو بپوشونه. خروجی در مرورگر بصورت زیر خواهد شد:style broken images 4

میبینید که چقد زیباتر شده و از حالت اولیش خیلی خیلی بهتر شده.

استایل دهی بیشتر و حرفه ای تر

علاوه بر جایگزین کردن متن پیام، ما میتونیم از کلاسهای کاذب برای اضافه کردن استایلهای دیگه هم بهره ببریم. کدهای زیر رو در نظر بگیرید:

میبینید که برای img ویژگی min-height رو برابر با 50 پیکسل قرار دادیم. با استفاده از کلاس کاذب before یک border بصورت نقطه ای برای اون قرار دادیم و با استفاده از after هم یک آیکون و متن رو قرار دادیم. خروجی بصورت زیر میشه:style broken images 5

همونطور که دیدید استایل زیبایی برای اون قرار دادیم. همونطور که قبلا گفتیم، این استایلها فقط زمانی که برای تصویر مشکلی به وجود بیاد اعمال میشه و وقتی که تصویر مشکلی نداشته باشه، هیچ کدوم از این موارد اعمال نمیشن.

پشتیبانی در مرورگرها

متاسفانه همه مرورگرها بصورت یکسان تصاویر مشکل دار رو مدیریت نمیکنن. در بعضی از مرورگرها حتی زمانی که تصویر با مشکل برخورد میکنه، امکان نمایش کلاسهای کاذب وجود نداره. در اینجا یک جدول رو خدمتتون قرار میدم:style broken images 6

اون قسمتهایی که x داره، به معنای اینه که پشتیبانی نمیشه. اونایی که * دارن، دارای شرایطی هستن:

* متن alt فقط زمانی نمایش داده میشود که width تصویر به اندازه ای بزرگ باشه که بخوبی بتونه در اون جا داده بشه. اگر ویژگی width برای img تعریف نشده باشه، ممکنه بصورت کلی متن نمایش داده نشه.

** استایل دهی فونت به متن در Opera mini پشتیبانی نمیشه

برای مرورگرهایی که پشتیبانی نمیکنن، همه استایلها صرف نظر میشن و حالت طبیعی خودشون نمایش داده میشه.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram