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

shape-inside

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

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

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

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

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

منبع : نردبان


<-- این مطلب را با دوستان خود به اشتراک بگذارید
Facebook stumbleupon Digg Delicious Email Twitter