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

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



  آیا می دانید تا کنون 7070 نفر در 15 دوره آموزشی سون لرن ثبت نام کرده اند !

نکاتی کاربردی در مورد CSS (جلسه 12) : نکاتی در مورد outline-offset و first-letter

0 242 ۴ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم.
css-style

ویژگی بنام outline-offset نیز وجود دارد

همونطور که میدونین یک ویژگی بنام Outline وجود داره که بیشتر وقتا از اون استفاده میکنیم و تقریبا برای همه آشنا هست. با استفاده از این ویژگی میتونیم خیلی کارا انجام بدیم و یکی از اون کارا Debugging هست. این ویژگی تاثیری بر جریان صفحه ندارد. Spec همراه با این ویژگی، ویژگی دیگه ای بنام outline-offset قرار داده که با استفاده از اون میتونین مشخص کنید که outline نسبت به المنت چقد فاصله و حاشیه داشته باشه. دموی زیر رو مشاهده کنید:

در دموی بالا، اسلایدر رو به سمت راست و چپ ببرید تا تاثیر outline-offset رو ببینید. حداقل این اسلایدر 0 و حداکثر اون 30 پیکسل هست و این برای نمونه هست و شما خودتون میتونین تا هر مقداری که دلتون بخواد اون رو زیاد کنید. دقت داشته باشید که با وجود اینکه ویژگی outline بصورت خلاصه نویسی شده قابل تعریف شدن هست، ویژگی outline-offset رو درون خودش تعریف نمیکنه و شما باید بصورت جداگانه اون رو تعریف کرده و مقدار دهی کنید. یکی از مشکلات این ویژگی اینه که در همه مرورگرها بجز Internet Explorer از اون پشتیبانی میشه. حتی درون IE11 هم پشتیبانی نمیشه. شاید ابزارها و Polyfill هایی وجود داشته باشه که بتونه این ویژگی رو درون IE هم شبیه سازی کنه.

المنت کاذب ::first-letter هوشمندتر از چیزی هست که فکر میکنید

المنت کاذب ::first-letter به شما اجازه میده که اولین حرف المنت مورد نظرتونو استایل دهی کنید. این کار به شما اجازه میده که افکت Drop cap رو بوجود بیارید. Drop Cap همون چیزی هست که حرف اول پاراگراف رو بصورت بزرگ مینویسن و بیشتر برای پرینت کردن و ... مورد استفاده قرار میگیره. شاید شما فکر کنید که مرورگر کار ساده ای داره و میره و اولین کاراکتر اون المنت رو انتخاب میکنه و استایل متفاوت رو براش اعمال میکنه. ولی اینطور نیست. نمونه زیر رو مشاهده کنید:

چیزی که در بالا مشاهده میکنید در 4 مرورگر معروف به یک صورت نمایش داده میشه و رفتار یکسانی داره و اگر به اون دقت کنید خواهید دید که رفتار منطقی و درستی هست. فرض کنید که شما یک پرانتز در ابتدای متن داشته باشید. بنظرتون جالبه که اون پرانتز بعنوان اولین کاراکتر استایل دهی بشه. بهتر نیس که اولین حرف انتخاب و استایل دهی بشه؟ همونطور که میبینید این المنت کاذب خیلی هوشمندانه حرف اول رو پیدا و استایل دهی میکند.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

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

موفق و پیروز باشید.

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram