خانه / آموزشی / رشته های دانشگاهی / دروس رشته کامپیوتر / دروس اختیاری / طراحی صفحات وب / CSS / آموزش قرار دادن متن ها داخل اشکال به کمک CSS3

آموزش قرار دادن متن ها داخل اشکال به کمک CSS3

اگر از دوستداران مجلات باشید، حتماً با قرار گرفتن متن ها داخل اشکال گرافیکی آشنا هستید. به تازگی و به لطف CSS3 این امکان به دنیای وب هم اضافه شده است. تنظیمات مربوط به قرار دادن متن داخل اشکال گرافیکی بسیار جدید هستند و بسیاری از قسمت های آن در حال به روز رسانی می باشد. در حال حاضر تنها نسخه های جدید گوگل کروم (با قراردادن پیشوند سی اس اس) قادر به نمایش آن ها هستند.

shape-inside

به کمک دستور shape-inside می توانیم شکل های مستطیل، دایره، چندضلعی و بیضی را ایجاد کنیم. در مثال زیر قصد داریم یک چند ضلعی (مثلث) تولید کنیم:

خروجی دستورات فوق روی تگ های HTML به صورت زیر خواهد بود:

یکی از مشکلاتی که ممکن است با آن رو به رو شویم، به دست آوردن مختصات نقاط است. برای این منظور می توانیم از نرم افزارهایی که سیستم آن ها وکتور است کمک بگیریم (ادوبی ایلاستریتور، کورل دراو و …). کافی است شکل مورد نظر را در این نرم افزارها اجرا و از آن یک خروجی SVG تهیه کنیم. سپس با باز کردن فایل در محیط ویرایشگر متن، می توانیم مختصات تمامی نقاط شکل را مشاهده کنیم.

خروجی کدهای زیر یک شش ضلعی خواهد بود:

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

منبع : نردبان



همچنین می توانید از مطالب زیر دیدن فرمایید:

کتاب آموزش HTML و CSS با سبکی سریع و آسان از متخصصان W3Schools ، نوشته حمید شجاع

این کتاب برای کاربرانی که می خواهند صفحه وبشان را به کمک HTML و CSS …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *