برش متن یک یا چند خطی در ارتفاع با اضافه کردن بیضی. چگونه یک رشته طولانی را با تعداد کاراکترهای css و js برش دهیم راه حل مسئله راه حل برای متن چند خطی

اضافه کردن یک بیضی در انتهای متن می تواند به روش های مختلفی انجام شود، در اختیار ما css و js.

ابتدا بیایید نگاهی به مشکل بیندازیم. یک طرح بلوک وجود دارد

بسیاری از متن های جالب در مورد سبک ها، طرح بندی، برنامه نویسی و خیلی چیزهای جالب دیگر در مورد سایت ها

اما اگر نتوانیم اندازه بلوک را محدود کنیم چگونه می توانیم بیضی قرار دهیم؟

اسکریپت js چطور؟ او واقعاً می تواند این کار را انجام دهد.

هوم، قطعا می تواند. این کد است، کاراکترهای یونیکد را می شمارد و در صورت لزوم قطع می کند

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

برش متن css

برای این کار یک استایل برای کلاس tit ایجاد کنید
.tit(
فضای سفید: nowrap; /* لغو بسته بندی متن */
سرریز: پنهان; /* برش محتوا */
padding: 5px /* زمینه های */
متن سرریز: بیضی; /* بیضی */
}

ویژگی این راه حل این است که اگر متن در اندازه بلوک قرار گیرد، بیضی اضافه نخواهد شد. که همیشه راه حل مشکل نیست.

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

متن را بر اساس تعداد کاراکترها کوتاه کنید و بدون در نظر گرفتن طول، بیضی اضافه کنید

ما چه کار می کنیم؟

ما به اسکریپت می گوییم که کدام عناصر را پردازش کند.
برای انجام این کار، در خط var elem = document.getElementsByClassName("tit"); کلاس عنصر را مشخص کنید (باید یکسان باشد).

سپس باید اندازه متن را قبل از برش دادن تنظیم کنید. اینها رشته های کوتاه ما هستند که یک بیضی به آنها اضافه می شود. متغیر var size = 75 مسئول این است.

حالا اسکریپت باید تمام عناصر را با کلاس مورد نظر مرور کند و بیضی را بگذارد.
اسکریپت طول هر خط را بررسی می کند و در صورتی که متن بیشتر از 75 کاراکتر باشد کوتاه می شود. اگر طول کمتر باشد، یک بیضی به سادگی اضافه می شود (خط if(elem[i].innerHTML.length > اندازه)).

می توانید نحوه کار اسکریپت را در صفحه نمایشی مشاهده کنید. این همه است، اکنون می دانید چگونه برش دهید متن طولانیبا روش های مختلف

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

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

راه حل برای متن تک خطی:

Box-text ( متن سرریز: بیضی؛ //تصویر کادرهای طولانی با سرریز متن: پنهان؛ //پنهان کردن عرض متن سرریز شده: 100٪؛ //عرض کادر با فضای سفید متن: nowrap؛ //ممنوع کردن بسته بندی متن)

همه وسایل و ابزار آنها به هر شکلی زنده بود.

راه حل برای متن چند خطی:

اما برای برش متن چند خطی در CSS، باید به شبه عناصر متوسل شوید :قبل از و :بعد از .

متن جعبه (سرریز: پنهان؛ ارتفاع: 200 پیکسل؛ ارتفاع خط: 25 پیکسل؛ ) .box-text:before ( محتوا: ""؛ شناور: سمت چپ؛ عرض: 5 پیکسل؛ ارتفاع: 200 پیکسل؛ ) .box-text > * :first-child ( شناور: راست؛ عرض: 100%؛ حاشیه-چپ: -5 پیکسل؛ ) .box-text:after ( محتوا: "\02026"؛ اندازه جعبه: محتوا-باکس؛ شناور: راست؛ موقعیت: نسبی؛ بالا: -25px؛ سمت چپ: 100%؛ عرض: 3em؛ حاشیه-چپ: -3em؛ بالشتک-راست: 5px؛ تراز متن: راست؛ اندازه پس‌زمینه: 100% 100%؛ پس‌زمینه: خطی-gradient( به سمت راست، rgba (255، 255، 255، 0)، سفید 50٪، سفید)؛

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

مسئله

برش گوشه ها تنها نیست راه سریعدستیابی به یک هدف، بلکه یک گزینه استایل محبوب هم در چاپ و هم در طراحی وب است. بیشتر اوقات، شامل بریدن یک یا چند گوشه ظرف با زاویه 45 درجه است. اخیراً به دلیل این واقعیت که اسکئومورفیسم شروع به از دست دادن زمین کرده است طراحی مسطح، این اثر محبوبیت خاصی دارد. هنگامی که گوشه ها فقط از یک طرف بریده می شوند و هر گوشه 50٪ از ارتفاع عنصر را اشغال می کند، این یک شکل فلش شکل ایجاد می کند که اغلب در طراحی دکمه ها و عناصر ناوبری پودر سوخاری استفاده می شود.

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

نمونه‌ای از وب‌سایتی که در آن گوشه بریده شده (پایین سمت چپ قسمت نیمه شفاف Find & Book) کاملاً با طراحی مطابقت دارد.

راه حل

یکی راه حل ممکنشیب های CSS را به ما ارائه دهید. فرض کنید ما فقط یک گوشه برش می خواهیم، گوشه پایین سمت راست. ترفند این است که از توانایی گرادیان برای گرفتن جهت زاویه (به عنوان مثال 45 درجه) و موقعیت مرزهای انتقال رنگ در مقادیر مطلق استفاده کنید، که با تغییر ابعاد کلی عنصری که پس‌زمینه به آن تعلق دارد، تغییر نمی‌کند. . از موارد فوق نتیجه می گیرد که یک گرادیان خطی برای ما کافی خواهد بود.

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

پس زمینه: #58a;
پس زمینه: خطی- گرادیان (-45 درجه، شفاف 15 پیکسل، #58a 0)؛

ساده است، درست است؟ نتیجه را در تصویر می بینید.

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

پس زمینه: #58a;
پس زمینه: خطی گرادیان (-45 درجه، شفاف 15 پیکسل، #58a 0)، گرادیان خطی (45 درجه، شفاف 15 پیکسل، #655 0)؛

با این حال، این کار نمی کند. به طور پیش فرض، هر دو گرادیان کل منطقه عنصر را می گیرند، بنابراین یکدیگر را مبهم می کنند. ما باید آنها را با محدود کردن هر یک به نیمی از عنصر با اندازه پس زمینه کوچکتر کنیم:
پس زمینه: #58a;

اندازه پس زمینه: 50% 100%

نتیجه را در تصویر می بینید.

حتی اگر ما یک اندازه پس‌زمینه اعمال کردیم، شیب‌ها همچنان روی یکدیگر همپوشانی دارند. دلیلش این است که فراموش کرده‌ایم پس‌زمینه-repeat را خاموش کنیم، بنابراین هر یک از پس‌زمینه‌ها دو بار تکرار می‌شوند. در نتیجه یکی از زمینه ها همچنان دیگری را مبهم می کند، اما این بار به دلیل تکرار. یک نسخه جدیدکد شبیه این است:
پس زمینه: #58a;
پس زمینه: خطی گرادیان (-45 درجه، شفاف 15 پیکسل، #58a 0) سمت راست، گرادیان خطی (45 درجه، شفاف 15 پیکسل، #655 0) سمت چپ؛
اندازه پس زمینه: 50% 100%

شما می توانید نتیجه را در تصویر ببینید و مطمئن شوید که - در نهایت! - آثار! احتمالاً قبلاً حدس زده اید که چگونه این افکت را در هر چهار گوشه اعمال کنید. شما به چهار شیب و کد مانند زیر نیاز دارید:

پس زمینه: #58a;
پس زمینه: گرادیان خطی (135 درجه، شفاف 15 پیکسل، #58a 0) بالا سمت چپ،

خطی گرادیان (-135 درجه، شفاف 15 پیکسل، #655 0) بالا سمت راست،

خطی گرادیان (-45 درجه، شفاف 15 پیکسل، #58a 0) پایین سمت راست،

خطی گرادیان (45 درجه، شفاف 15 پیکسل، #655 0) پایین سمت چپ؛
اندازه پس زمینه: 50% 50%;
background-repeat: no-repeat;

مشاوره
ما از رنگ‌های مختلف (#58a و #655) برای آسان‌تر کردن اشکال‌زدایی استفاده کردیم. در عمل، هر دو شیب یک رنگ خواهند بود.
اما مشکل کد قبلی این است که نگهداری آن سخت است. پنج ویرایش برای تغییر رنگ پس‌زمینه و چهار ویرایش برای تغییر مقدار زاویه نیاز دارد. میکسی که با پیش پردازنده ایجاد می شود می تواند تعداد تکرارها را کاهش دهد. این کد در SCSS چگونه به نظر می رسد:
SCSS
@mixin beveled-corners($bg,
$tl:0، $tr:$tl، $br:$tl، $bl:$tr) (
پس زمینه: $bg;
زمینه:
خطی گرادیان (135 درجه، شفاف $tl، $bg 0)
بالا سمت چپ،
خطی گرادیان (225 درجه، شفاف $tr، $bg 0)
بالا سمت راست،
خطی گرادیان (-45 درجه، شفاف $br، $bg 0)
سمت راست پایین،
خطی گرادیان (45 درجه، شفاف $bl، $bg 0)
پایین سمت چپ؛
اندازه پس زمینه: 50% 50%;
background-repeat: no-repeat;
}

سپس، در صورت لزوم، می توان آن را، همانطور که در زیر نشان داده شده است، با 2-5 آرگومان فراخوانی کرد:
SCSS
@include beveled-corners (#58a, 15px, 5px);
در این مثال، به عنصری خواهیم رسید که گوشه‌های بالا سمت چپ و پایین سمت راست آن با 15 پیکسل و گوشه‌های بالا سمت راست و پایین چپ آن با 5 پیکسل بریده شده است، مشابه نحوه عملکرد شعاع مرزی زمانی که کمتر مشخص می‌کنیم. از چهار مقدار این امکان پذیر است زیرا ما همچنین از مقادیر پیش فرض آرگومان ها در میکس SCSS خود مراقبت می کنیم - و بله، این مقادیر پیش فرض می توانند به آرگومان های دیگر نیز اشاره کنند.
خودت را امتحان کن
http://play.csssecrets.io/bevel-corners-gradients

گوشه های برش منحنی

نمونه ای عالی از استفاده از گوشه های برش منحنی در یک وب سایت http://g2geogeske.comطراح آنها را به یک عنصر اصلی طراحی تبدیل کرده است: آنها در مسیریابی، در محتوا و حتی در فوتر حضور دارند.
تغییر روش گرادیان به شما امکان می دهد گوشه های برش منحنی ایجاد کنید، افکتی که بسیاری از مردم آن را "شعاع مرز داخلی" می نامند زیرا شبیه یک نسخه وارونه از گوشه های گرد است. تنها تفاوت استفاده از گرادیان های شعاعی به جای شیب های خطی است:
پس زمینه: #58a;
پس زمینه: گرادیان شعاعی (دایره در بالا سمت چپ، شفاف 15 پیکسل، #58a 0) بالا سمت چپ،

گرادیان شعاعی (دایره در بالا سمت راست، شفاف 15 پیکسل، #58a 0) بالا سمت راست،

گرادیان شعاعی (دایره در پایین سمت راست، شفاف 15 پیکسل، #58a 0) پایین سمت راست،

گرادیان شعاعی (دایره در پایین سمت چپ، شفاف 15 پیکسل، #58a 0) پایین سمت چپ؛
اندازه پس زمینه: 50% 50%;
background-repeat: no-repeat;

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

خودت را امتحان کن
http://play.csssecrets.io/scoop-corners

راه حل با SVG درون خطی و تصویر حاشیه

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

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

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

از آنجایی که ابعاد کلی برای ما مهم نیستند (تصویر حاشیه از مقیاس بندی مراقبت می کند و نقشه های SVG بدون در نظر گرفتن ابعاد کاملاً مقیاس می شوند - مبارک باد. گرافیک برداری!)، همه اندازه ها را می توان با یک برابر کرد تا با مقادیر راحت تر و کوتاه تر عمل کند. مقدار زاویه برش برابر با یک و اضلاع مستقیم نیز برابر با یک خواهد بود. نتیجه (بزرگ شده برای خوانایی). کد مورد نیاز برای این کار در زیر نشان داده شده است:
حاشیه: 15 پیکسل جامد شفاف.

width="3" height="3" fill="%2358a">\
\
’);

توجه داشته باشید که اندازه مرحله برش 1 است. این به معنای 1 پیکسل نیست. اندازه واقعی توسط سیستم مختصات فایل SVG تعیین می شود (به همین دلیل ما واحد نداریم). اگر از درصد استفاده می‌کردیم، باید 1/3 تصویر را با مقدار کسری، مانند 33.34% تقریبی کنیم. توسل به مقادیر تقریبی همیشه خطرناک است، زیرا در مرورگرهای مختلفمقادیر ممکن است به درجات مختلف دقت گرد شوند. و با چسبیدن به واحدهای سیستم مختصات فایل SVG، از سردرد ناشی از آن همه گرد کردن نجات می‌دهیم.

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

علاوه بر این، احتمالاً متوجه شده اید که اکنون گوشه های بریده شده کوچکتر از تکنیک قبلی هستند و این می تواند گیج کننده باشد. پس از همه، ما عرض حاشیه را 15 پیکسل قرار می دهیم! دلیل آن این است که در حل گرادیان، این 15 پیکسل در امتداد خط گرادیان که عمود بر جهت گرادیان است اندازه گیری شد. با این حال، عرض فریم به صورت مورب اندازه گیری نمی شود، بلکه به صورت افقی/عمودی اندازه گیری می شود.

احساس می کنید به چه چیزی منجر می شوم؟ بله، بله، دوباره قضیه فیثاغورثی همه جا حاضر، که ما فعالانه از آن استفاده کردیم. نمودار در شکل باید وضعیت را روشن کند.

به طور خلاصه، برای رسیدن به نتیجه بصری یکسان، به عرض حاشیه ای نیاز داریم که 2 برابر اندازه ای باشد که در روش گرادیان استفاده می کنیم. در این حالت، یک پیکسل خواهد بود که تقریباً منطقی‌تر از 20 پیکسل است، مگر اینکه با وظیفه نزدیک کردن اندازه مورب تا حد ممکن به 15 پیکسل مورد نظر روبرو شویم:

border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0.2 اینچ/>\
’);
پس زمینه: #58a;
با این حال، همانطور که می بینید، نتیجه آن چیزی نیست که ما انتظار داشتیم.

گوشه های پر زحمت ما کجا رفت؟ نترس، پاداوان جوان، گوشه ها هنوز آنجاست. اگر رنگ پس‌زمینه متفاوتی را تنظیم کنید، برای مثال #655، بلافاصله متوجه خواهید شد که چه اتفاقی افتاده است.
همانطور که شکل زیر نشان می دهد، دلیل ناپدید شدن گوشه های ما در پس زمینه نهفته است: پس زمینه ای که در بالا تعریف کردیم به سادگی آنها را مبهم می کند. تنها کاری که برای رفع این ناراحتی باید انجام دهیم این است که از گیره پس‌زمینه برای جلوگیری از خزیدن پس‌زمینه در قسمت فریم استفاده کنیم:
حاشیه: 20 پیکسل جامد شفاف.
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0.2 اینچ/>\
’);
پس زمینه: #58a;

اکنون مشکل حل شده است و رشته ما دقیقاً مانند قبل به نظر می رسد. به علاوه، این بار می‌توانیم به راحتی اندازه گوشه‌ها را تنها با یک ویرایش تغییر دهیم: فقط عرض حاشیه را تنظیم کنید. ما حتی می‌توانیم این افکت را متحرک کنیم زیرا عرض مرزی از انیمیشن پشتیبانی می‌کند!

و تغییر پس زمینه اکنون به دو ویرایش به جای پنج مورد نیاز دارد. همچنین، از آنجایی که پس‌زمینه ما مستقل از افکت گوشه‌ها است، می‌توانیم یک گرادیان یا هر الگوی دیگری برای آن تعریف کنیم، تا زمانی که لبه‌ها هنوز #58a باشند.

مثلا استفاده می کنیم گرادیان شعاعیاز رنگ hsla (0,0%, 100%,.2) تا شفاف. فقط یک مشکل کوچک برای حل باقی مانده است. اگر تصویر حاشیه پشتیبانی نمی شود، راه حل بازگشتی به عدم وجود گوشه های برش محدود نمی شود. از آنجایی که پس‌زمینه بریده شده است، فضای بین لبه فیلد و محتوای آن کاهش می‌یابد. برای رفع این مشکل، باید قاب را به همان رنگی که برای پس‌زمینه استفاده می‌کنیم تنظیم کنیم:
حاشیه: 20 پیکسل جامد #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
پس زمینه: #58a;
پس زمینه-کلیپ: padding-box;

در مرورگرهایی که تعریف ماست تصویر مرزیپشتیبانی می‌شود، این رنگ نادیده گرفته می‌شود، اما در جایی که تصویر حاشیه کار نمی‌کند، رنگ حاشیه اضافی راه‌حل بازگشتی ظریف‌تری ارائه می‌دهد. تنها اشکال آن افزایش تعداد ویرایش های مورد نیاز برای تغییر رنگ پس زمینه به سه است.
خودت را امتحان کن
http://play.csssecrets.io/bevel-corners

راه حل مسیر برش

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

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

اموال را به خاطر بسپارید مسیر کلیپاز راز "چگونه یک لوزی بسازیم"؟ مسیرهای برش CSS یک ویژگی شگفت انگیز دارند: آنها به شما اجازه می دهند که ترکیب کنید مقادیر درصد(که با آن ابعاد کلی عنصر را نشان می دهیم) با ابعاد مطلق، انعطاف پذیری باورنکردنی را ارائه می دهد. به عنوان مثال، کد یک مسیر برش که یک عنصر را به شکل یک مستطیل اریب 20 پیکسلی (اندازه گیری افقی) برش می دهد، به این صورت است:
پس زمینه: #58a;
مسیر کلیپ: چند ضلعی(
20 پیکسل 0، محاسبه (100٪ - 20 پیکسل) 0، 100٪ 20 پیکسل،
100٪ کالک (100٪ - 20 پیکسل)، کالک (100٪ - 20 پیکسل) 100٪
20px 100%, 0 calc(100% - 20px)، 0 20px)؛
اگرچه مختصر است، اما این قطعه کد از اصول DRY پیروی نمی کند و اگر از پیش پردازنده استفاده نکنید، این به یکی از بزرگترین مشکلات تبدیل می شود. در واقع، این کد بهترین تصویر از اصل WET از همه راه حل های موجود است CSS خالصدر این کتاب ارائه شده است، زیرا برای تغییر اندازه گوشه در اینجا باید هشت ویرایش (!) انجام دهید.

از طرف دیگر، پس زمینه را می توان تنها با یک ویرایش تغییر داد، بنابراین حداقل آن را داریم. یکی از مزایای این روش این است که می‌توانیم مطلقاً از هر پس‌زمینه یا حتی عناصر جایگزین کراپ مانند تصاویر استفاده کنیم. شکل تصویری استایل شده با گوشه های برش خورده را نشان می دهد. هیچ یک از روش های قبلی نمی تواند چنین اثری را به دست آورد. علاوه بر این، ویژگی clip-path از انیمیشن پشتیبانی می کند و ما می توانیم نه تنها تغییر اندازه گوشه، بلکه انتقال بین اشکال مختلف را نیز متحرک کنیم.

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

خودت را امتحان کن
http://play.csssecrets.io/bevel-corners-clipped

گوشه های برش آینده
در آینده، برای دستیابی به افکت برش گوشه‌ها، نیازی به استفاده از گرادیان‌های CSS، برش یا SVG نخواهیم بود. ملک جدید شکل گوشه،گنجانده شده است پس زمینه و مرزهای CSS سطح 4 برای ایجاد افکت گوشه های برش خورده به اشکال مختلف در ترکیب با خاصیت border-radius که برای تعیین میزان برش لازم است، از آن سردرد نجات می یابد. به عنوان مثال، برای توصیف گوشه های برش 15 پیکسلی در تمام طرف های یک تصویر، این کد ساده کافی است:
حاشیه شعاع: 15 پیکسل.
گوشه شکل: اریب.

همچنین بخوانید

سلام به همه، نام من آنا بلوک است و امروز در مورد نحوه برش تصاویر بدون استفاده از برنامه های گرافیکی صحبت خواهیم کرد.

کجا می تواند مفید باشد؟

اول از همه، در سایت‌هایی که به احتمال زیاد محتوای دارای تصاویر برش داده نمی‌شوند تا متناسب با هر بلوک خاصی باشد.

یک مثال قابل توجه: وبلاگ در وردپرس.

فرض کنید می خواهید جلد مقاله شما نسبت تصویر (مربع) 1:1 داشته باشد. فعالیت های شما:

دانلود عکس مناسب از اینترنت;

آن را در فتوشاپ به نسبت دلخواه برش دهید.

یک مقاله منتشر کنید.

با بازدید از سایت، نتیجه ای را که انتظارش را داشتید خواهید دید.

اما، فرض کنید فراموش کرده اید تصویر را در فتوشاپ برش دهید و یک تصویر تصادفی را به عنوان کاور از اینترنت آپلود کرده اید، آن وقت چه اتفاقی می افتد؟! درست است، طرح خراب می شود. و اگر اصلاً از CSS استفاده نکرده‌اید، یک تصویر با وضوح HD می‌تواند به طور کامل نمای متن را مسدود کند. بنابراین، مهم است که بتوانیم تصاویر را در زمان برش دهیم کمک CSSسبک ها

بیایید به موقعیت‌های مختلف نگاه کنیم که چگونه می‌توان این کار را نه تنها با CSS، بلکه با SVG نیز پیاده‌سازی کرد.

مثال 1

بیایید سعی کنیم تصویری را که با استفاده از تصویر پس‌زمینه قرار داده شده است برش دهیم. بیایید مقداری نشانه گذاری HTML ایجاد کنیم

بیایید به سبک CSS برویم. یک تصویر را از طریق تصویر پس‌زمینه اضافه می‌کنیم، فریم‌های تصویر خود را مشخص می‌کنیم، تصویر را با استفاده از موقعیت پس‌زمینه وسط می‌کنیم و اندازه پس‌زمینه را تنظیم می‌کنیم:
jpg)؛ background-position:center-center; background-size:cover; عرض: 300 پیکسل ارتفاع: 300 پیکسل )

این اولین و ساده ترین روش برای برش تصویر بود. حال بیایید به مثال دوم نگاه کنیم.

مثال 2

فرض کنید ما همان جعبه جعبه را داریم که داخل آن یک تگ img با یک تصویر است که اکنون به آن استایل می دهیم.

همچنین تصویر خود را نسبت به شیئی که ایجاد می کنیم در مرکز قرار می دهیم. و ما از خاصیتی استفاده می کنیم که به ندرت استفاده می شود: object-fit .
کادر ( موقعیت: نسبی؛ سرریز: پنهان؛ عرض: 300 پیکسل؛ ارتفاع: 300 پیکسل؛ ) .box img ( موقعیت: مطلق؛ بالا: 50%؛ سمت چپ: 50%؛ تبدیل: ترجمه (-50%, -50%)؛ عرض: 300 پیکسل؛ ارتفاع: 300 پیکسل؛ شیء مناسب: جلد؛ )
به نظر من این بهترین روش است. اگر از تصاویر برای پست هایی با نسبت های کاملاً متفاوت استفاده می کنید، برای وبلاگ ها ایده آل است.
در اینجا درباره HTML و CSS بیشتر بدانید:

مثال 3

همچنین اگر تصاویر را در عناصر SVG قرار دهیم، می‌توانیم در لحظه برش ایجاد کنیم. بیایید یک دایره را به عنوان مثال در نظر بگیریم. ما می توانیم SVG را با استفاده از تگ ها ایجاد کنیم. یک تگ بسته بندی svg ایجاد کنید که داخل آن یک تگ دایره و یک تگ الگو باشد. در تگ الگو تگ تصویر را می نویسیم. در آن ویژگی xlink:href را مشخص کرده و یک تصویر اضافه می کنیم. ویژگی های عرض و ارتفاع را نیز اضافه می کنیم. اما این همه ماجرا نیست. ما باید یک مقدار پر اضافه کنیم. برای اینکه کارمان کامل شود، یک صفت کمکی saveAspectRatio را به تگ تصویر اضافه می کنیم که به ما امکان می دهد تصویر خود را "از و به" در اطراف دایره پر کنیم.

من نمی توانم این روش را عمومی بنامم. اما در موارد استثنایی می توان از آن استفاده کرد. به عنوان مثال، اگر موضوع یک وبلاگ را لمس کنیم، در حالت ایده آل چنین روشی می تواند در آواتار نویسنده ای که مقاله را می نویسد قرار بگیرد.
در اینجا درباره HTML و CSS بیشتر بدانید:
نتایج:
ما 3 روش را برای برش تصاویر در وب‌سایت‌ها پوشش داده‌ایم: استفاده از تصویر پس‌زمینه، استفاده از تگ img، و svg مرتبط با الگو با تعبیه بیت مپ با استفاده از تگ تصویر. اگر روش دیگری برای برش تصویر با استفاده از SVG می دانید، آن را در نظرات به اشتراک بگذارید. نه تنها برای من، بلکه برای دیگران نیز، یادگیری در مورد آنها مفید خواهد بود.

فراموش نکنید که سوالات خود را در مورد چیدمان یا توسعه front-end از متخصصان در FrontendHelp به صورت آنلاین بپرسید.