نحوه استفاده از shape-inside در CSS3
استفاده از shape-inside:: از آنجایی که صفحات وب ساختار یافته میباشند، قرار دادن محتوای آنها درون شکلهای مختلف مانند کاری که در مجلات و روزنامهها صورت میگیرد، کار دشواری است. با این حال، تیم CSS3 در حال حاضر تلاش میکند تا با استفاده از shape-inside
، این امکان را برای محتوای وب فراهم کند.
این property هنوز خیلی جدید است و هنگام نوشتن این مقاله، فقط در Chrome (با استفاده از prefix) کار میکند و خصوصیاتی هستند که باید روی آن پیاده سازی شوند.
پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۶۹ هزار تومان
چگونگی استفاده از shape-inside
shape-inside به ما اجازه میدهد تا به چهار شکل حالت بدهیم: مستطیل، دایره، چندضلعی و بیضی. در ادامه برای مثال شکل چندضلعی، مثلث را امتحان خواهیم کرد:
.basic-shape { font-size: 12px; width: 300px; height: 300px; overflow: hidden; text-align: justify; -webkit-hyphens: manual; -webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px); }
نتیجه استایلدهی بالا به شکل زیر خواهد بود:
اگر میخواهید محتوای خود را درون شکل سفارشی قرار دهید، اما روش ست کردن مختصات را نمیدانید، میتوانید از این روش استفاده کنید. ابتدا شکل مورد نظر را با استفاده از یک vector editor مانند Adobe Illustrator یا Inkscape بسازید. سپس آنرا با فرمت SVG ذخیره کنید و آنرا در یک ادیتور متن مانند NotePad باز کنید.
به این ترتیب میتوانید مختصات را پیدا کنید و هرکدام را به یکی از واحدهای اندازهگیری (px یا %) اختصاص دهید و به سادگی آنها را کپی کنید و به عنوان value شکل polygon (چند ضلعی) پیست کنید. در این مثال من یک شکل شش ضلعی ایجاد کردم:
.svg-shape { -webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px); }
نتیجه استایلدهی بالا به شکل زیر خواهد بود:
در حقیقت، برای قرار دادن محتوا درون شکلها در صفحات وب، میتوان از فایلهای SVG استفاده کرد و محتوا را بطور مستقیم در آنها قرار داد، اما متاسفانه در هنگام نوشتن این مقاله، این قابلیت هنوز بدرستی کار نمیکند چراکه مرورگرها هنوز آن را پیاده سازی نکردند.
سخن پایانی
مطمئنا همه وبسایتها از این ویژگی استفاده نخواهند کرد، اما با وجود این پیشرفتها، در آینده کار طراحی وب پیچیدهتر خواهد بود.