وب معمولاً محل جعبه‌ها و مستطیل‌ها بوده است، اما مشخصات CSS در حال ظهور آن را تغییر می‌دهد. در این مقاله شما را با شکل‌های CSS آشنا می‌کنم و توضیح می‌دهیم که چه هستند و مفاهیم اصلی مورد نیاز برای شروع استفاده از آنها.

همه نمونه ها به هم مرتبط هستند روی Github، بنابراین می توانید کد منبع را به عنوان نقطه شروع آزمایش خود مشاهده و دانلود کنید.

اشکال CSS چیست؟

این مشخصات CSS Shapes اشکال هندسی را برای ما در CSS توصیف می کند. در سطح 1 مشخصات، اکنون در وضعیت پیشنهادی کاندید، اشکال را می توان فقط برای عناصر شناور اعمال کرد. یک مثال ساده ترین راه برای شروع است.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

در مثال بالا این کلاس را به یک تصویر اضافه می کنیم. تصویر را به سمت چپ شناور می کنیم، به آن عرض، ارتفاع و حاشیه می دهیم و سپس از ویژگی استفاده می کنیم شکل بیرونی برای منحنی کردن متن در اطراف دایره.

را ببینید مثال

قبل از ادامه، از Chrome head استفاده کنید روی بیش از به http://betravis.github.io/shape-tools/ و نشانک نشانک Show Shapes را به نوار نشانک های خود بکشید. اگر به مثال من بروید page و روی بوکمارکت کلیک کنید، می توانید ببینید که شکل دایره چگونه ترسیم شده است:

اشکال اساسی

این شکل بیرونی ویژگی مورد استفاده در مثال ساده ما می تواند مقادیر مختلفی داشته باشد. اولین احتمالات به عنوان “اشکال اساسی” در مشخصات ذکر شده است. این اشکال اساسی توابع هستند:

• inset()
• دایره()
• ellipse()
• چند ضلعی()

inset()

این inset() تابع برای تعریف اشکال است روی عناصر مستطیلی، که شناور برای ما انجام می دهد و در بیشتر موارد کافی است. ممکن است مواقعی وجود داشته باشد که کنترل اضافی مفید واقع شود. این inset() تابع را می توان چهار آرگومان موقعیتی ارسال کرد که از لبه های عنصر به سمت داخل خارج می شوند، به اضافه یک شعاع مرزی برای شکل مستطیلی، که قبل از آن کلمه کلیدی ’round’ قرار دارد. inset (بالا سمت راست پایین سمت چپ دور حاشیه-شعاع)؛ مثلا:

inset(10px 20px 10px 20px round 50%);

آرگومان‌های inset از همان خلاصه حاشیه پیروی می‌کنند، بنابراین اگر می‌خواهید 20 پیکسل در اطراف عنصر وجود داشته باشد، می‌توانید از آن استفاده کنید:

inset(10px round 50%);

در مثالم از تصویری استفاده کردم که فضای سفید زیادی در زیر آن وجود دارد. اگر من فقط تصویر را شناور کنم، یک شکاف بزرگ زیر آن دارم. با استفاده از مقدار inset می توانم قسمت پایین شکل را درج کنم و به متن اجازه بدهم تا به آن نزدیک تر شود.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

مثال را ببینیدو از نشانک نمایش شکل ها برای دیدن شکل استفاده کنید.

دایره()

در ابتدای این مقاله با شکل پایه دایره آشنا شدیم. این دایره() مقدار شکل به طور کامل در مشخصات به شرح زیر است:

circle(r at cx cy);

مقدار r شعاع دایره است که 50 درصد آن نصف عرض عنصر است. دو مقدار دیگر مختصات x و y برای مرکز دایره هستند، این اساساً به شما امکان می دهد دایره را به اطراف فشار دهید. در مثالم استفاده کردم:

circle(50%);

من همچنین می توانستم این را اینگونه توصیف کنم:

circle(50% at 50% 50%);

در مثال من page روی Github من یک آیکون دارم، یک پس‌زمینه شفاف دارد و برای واضح‌تر شدن مثال‌ها، به تصویر یک رنگ پس‌زمینه خاکستری، بالشتک، حاشیه و حاشیه داده‌ام:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

به سمت چپ شناور تنظیم شده است، و اگر هیچ شکلی را روی این تصویر اعمال نکنیم، مانند تصویر زیر است.

من می توانم یک شکل دایره ساده ایجاد کنم:

.circle { shape-outside: circle(50%); }

اگر از مقدار دایره شکل-inside استفاده کنم و این بار مختصات را تغییر دهم. دایره به سمت بالا و سمت چپ فشار داده می شود.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

می‌توانید از مقادیر مطلق یا نسبی برای مختصات یا کلمات کلیدی مانند موقعیت‌یابی تصاویر پس‌زمینه استفاده کنید. در این مرحله ارزش نگاهی به مفهوم جعبه های مرجع را دارد. چهار جعبه مرجع ممکن وجود دارد که می توانیم از آنها استفاده کنیم:

• جعبه محتوا
• padding-box
• جعبه مرزی
• حاشیه جعبه

جعبه مرجع پیش فرض برای دایره، کادر حاشیه است.

shape-outside: circle(50%) margin-box;

همان نوشتن است:

shape-outside: circle(50%);

همانطور که انتظار دارید margin-box توسط حاشیه عنصر محدود می شود، border-box توسط حاشیه، padding-box توسط padding و content-box توسط محتوای واقعی محدود می شود. خواندن این مقاله برای توضیح کامل روش عملکرد جعبه های مرجع در زمینه CSS Shapes. اگر به مثال من نگاهی بیندازیم page با استفاده از نشانک‌های Show Shapes می‌توانید به وضوح ببینید که چگونه این کار می‌کند.

آخرین چیزی که با دایره به شما نشان خواهم داد این است که چگونه محتوا را برش دهید تا شکلی را که ایجاد کرده اید دنبال کنید. همانطور که من بالشتک و حاشیه های قابل مشاهده را به عنصر خود اضافه کردم، به نظر می رسد متن ما با آن همپوشانی دارد. ما در واقع می توانیم محتوای شکل را با استفاده از ویژگی clip-path از مشخصات CSS Masking Level 1 برش دهیم. در حال حاضر به پیشوند نیاز دارد (به (آیا می توانم استفاده کنم) (7) را ببینید).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

همانطور که در اسکرین شات بالا می بینید، عنصر ما اکنون برای پیروی از منحنی بریده شده است. این برای تصاویر بسیار خوب عمل می کند و به شما امکان می دهد آنها را برش دهید تا متن در امتداد منحنی ها جریان یابد.

ellipse()

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

shape-outside(rx ry at cx cy);

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

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

من می توانم از کلمات کلیدی radius استفاده کنم:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

که یک دایره ایجاد می کند روی این عنصر به عنوان ابعاد واقعی تصویر مربع است.

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

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

برای جابجایی بیضی روی مختصات را تغییر می دهم:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

چند ضلعی()

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

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

با استفاده از نشانک‌های Show Shapes می‌توانید شکل را ببینید.

اشکال از یک تصویر

راه دیگر برای ایجاد یک شکل، دادن یک تصویر به عنوان مقدار شکل بیرون است. آن تصویر باید یک کانال آلفا داشته باشد. (در صورت استفاده از فتوشاپ می توانید در مورد روش ذخیره تصاویر خود اطلاعات بیشتری کسب کنید روی را وبلاگ Adobe Web Platform.) از قبل می توانید از یک تصویر استفاده کنید روی شما page یا در یک تصویر از جای دیگر عبور کنید.

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

مثال من page شامل سه کاربرد مختلف از این تکنیک است. در مثال اول من یک تصویر دارم روی من page و همچنین آن تصویر را به عنوان URL برای ایجاد شکل از آن ارسال می کنم.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

این شکل-تصویر-آستانه آستانه کدورت را که باید استفاده کنیم، از 0 که کاملاً شفاف است تا 1 که کاملاً مات است را تعریف می کند.

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

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

شما نیازی به ایجاد یک شکل بر اساس آن ندارید روی چیزی روی را page. در این مثال آخر من یک تصویر در فتوشاپ ایجاد کرده ام که شبیه این است.

من می خواهم از آن استفاده کنم و یک شکل ایجاد کنم روی برخی از محتوای تولید شده به منظور شکل دادن به متن من در امتداد یک خط مورب.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

این بدان معنی است که شما می توانید یک تصویر پوشاننده ایجاد کنید و از آن مستقل از آنچه هست استفاده کنید روی شما page.

اشکال از جعبه مرجع

شما همچنین می توانید مقداری به ویژگی shape-outside بدهید که همان کادر مرجعی است که قبلاً هنگام نگاه کردن به مقدار circle() در مورد آن صحبت کردیم. مثلا:

.circle-margin-box { shape-outside: margin-box; }

این در جایی مفید است که از مرز-شعاع برای اضافه کردن یک حاشیه گرد به یک عنصر استفاده کرده اید و به سادگی می خواهید محتوا در اطراف آن حاشیه منحنی شود. مانند این مثال.

پشتیبانی از مرورگر

یکی از چیزهای خوب در مورد CSS Shapes این است که، از آنجایی که باید روی یک شناور اعمال شوند، می‌توانند به راحتی به عنوان یک پیشرفت پیشرونده برای سایت شما استفاده شوند. مرورگرهایی که Shapes را پشتیبانی نمی کنند، شناور را همانطور که انتظار دارید با کادر مربعی دور عنصر نمایش می دهند. مرورگرهایی که Shapes را پشتیبانی می کنند، شکلی را خواهند داشت که شما مشخص کرده اید. شما می توانید یک نمونه عالی از این را ببینید روی سایت جدید برای وب پیش رو پادکست در صفحات پادکست، از شکل‌های CSS برای منحنی کردن متن در اطراف تصویر دایره‌ای مهمان استفاده می‌شود. شما می توانید ببینید که چگونه این در کروم به نظر می رسد روی چپ. فایرفاکس (روی سمت راست) هنوز از Shapes پشتیبانی نمی کند و بنابراین مربع مربع دور تصویر را می گیریم.

یک کاربر فایرفاکس نمی‌دانست که از دست داده است روی این لمس کوچک، و به تجربه سایت که نداشتن آن آسیب نمی رساند – فقط در پشتیبانی از مرورگرها بسیار خوب است. می توانید اطلاعات کامل و به روز پشتیبانی مرورگر را ببینید روی را می توانم استفاده کنم سایت اینترنتی. در زمان نوشتن سافاری به پیشوند -webkit نیاز دارد روی ویژگی های CSS Shapes. نمونه های من از Lea Verou استفاده می کنند پیشوند رایگان اسکریپت با Shapes Level 1 در وضعیت پیشنهادی کاندید، امیدواریم به زودی آن را در همه مرورگرهای مدرن ببینیم. دلیلی وجود ندارد که استفاده از آن را برای افزودن نکات تکمیلی به طرح های خود شروع نکنید. فقط مطمئن شوید که در یک مرورگر بدون پشتیبانی تست کنید، به خصوص اگر متن را روی هم قرار می دهید روی تصاویری که عدم پشتیبانی ممکن است خواندن محتوا را سخت کند. اگر می‌خواهید Shapes را در مرورگرهایی که پشتیبانی نمی‌کنند امتحان کنید، تیم Adobe Web Platform یک polyfill ایجاد کرده است که در دسترس است. روی Github.

منابع و مطالعه بیشتر

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

• مشخصات CSS Shapes
• شروع کار با CSS Shapes روی سنگ های HTML5
• CSS Shapes 101 روی یک لیست جدا
• چرا باید در مورد اشکال CSS هیجان زده باشید

نمادها از پروژه اسم. نماد روباه اثر لورا اولیوارس است، نماد مبل توسط آقای پیکسل