Div برای برش محتوا. کوتاه کردن متن تک یا چند خطی به ارتفاع با اضافه کردن یک بیضی

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

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

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

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

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

1. دانلود تصویر مناسب از اینترنت;
2. آن را در فتوشاپ به نسبت دلخواه برش دهید.
3. یک مقاله منتشر کنید.

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

اما، فرض کنید فراموش کرده اید تصویر را در فتوشاپ برش دهید و یک تصویر تصادفی را به عنوان کاور از اینترنت دانلود کرده اید، آن وقت چه اتفاقی می افتد؟! درست است، طرح خراب می شود. و اگر اصلاً از 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 را مشخص کرده و یک تصویر اضافه می کنیم. ما همچنین ویژگی های عرض و ارتفاع را اضافه خواهیم کرد. اما این همه ماجرا نیست. ما باید مقدار fill را اضافه کنیم. برای اینکه کار ما کامل در نظر گرفته شود، ویژگی کمکی saveAspectRatio را به تگ تصویر اضافه می کنیم، که به ما امکان می دهد تصویر خود را از ابتدا تا انتها در کل دایره پر کنیم.

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

در اینجا می توانید درباره HTML و CSS اطلاعات بیشتری کسب کنید:

نتایج:
ما به 3 روش برای برش تصاویر در وب سایت ها نگاه کردیم: استفاده از تصویر پس زمینه، استفاده از تگ img و مرتبط با الگوی svg با جاسازی تصاویر بیت مپ با استفاده از تگ تصویر. اگر روش دیگری برای برش تصویر با استفاده از SVG می دانید، آن را در نظرات به اشتراک بگذارید. دانستن آنها نه تنها برای من، بلکه برای دیگران نیز مفید خواهد بود.

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

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

این کار بسیار رایج است، اما در عین حال آنقدرها هم که به نظر می رسد بی اهمیت نیست.

گزینه ای برای متن تک خطی در CSS

در این حالت می توانید از ویژگی text-overflow: ellipsis استفاده کنید. در این صورت ظرف باید دارای خاصیت باشد سرریزبرابر پنهان شده استیا کلیپ

بلوک (عرض: 250 پیکسل؛ فضای سفید: nowrap؛ سرریز: پنهان؛ سرریز متن: بیضی؛ )

گزینه ای برای متن چند خطی در CSS

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

و حالا خود خواص

جعبه (سرریز: پنهان؛ ارتفاع: 200 پیکسل؛ عرض: 300 پیکسل؛ ارتفاع خط: 25 پیکسل؛ ) .باکس: قبل (محتوا: ""؛ شناور: سمت چپ؛ عرض: 5 پیکسل؛ ارتفاع: 200 پیکسل؛ > *:ست. -child ( شناور: راست؛ عرض: 100%؛ حاشیه-چپ: -5 پیکسل؛ ) .box :after ( محتوا: "\02026"؛ اندازه جعبه: محتوای-باکس؛ شناور: سمت راست؛ موقعیت: نسبی؛ بالا: -25px : 3em padding-size : 100% 100% ;

راه دیگر استفاده از ویژگی column-width است که با آن عرض ستون را برای متن چند خطی تعیین می کنیم. اما هنگام استفاده از این روش امکان تنظیم بیضی در انتها وجود نخواهد داشت. HTML:

بلوک (سرریز: پنهان؛ ارتفاع: 200 پیکسل؛ عرض: 300 پیکسل؛ ) .block__inner ( -webkit-column-width : 150px; -moz-column-width: 150px; height:150px ; column-width ;

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

بلوک (سرریز: پنهان؛ متن-سرریز: بیضی؛ نمایش: -webkit-box؛ -webkit-line-clamp: 2؛ -webkit-box-orient: عمودی؛)

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

در اینجا یک بلوک نامرئی اضافی استفاده می شود که ابتدا متن ما در آن قرار می گیرد و پس از آن هر بار یک کاراکتر حذف می شود تا ارتفاع این بلوک کمتر یا مساوی ارتفاع بلوک مورد نظر شود. و در پایان متن به بلوک اصلی منتقل می شود.

var block = سند. querySelector(".block")، text = block. innerHTML، clone = سند. createElement("div"); شبیه سبک. موقعیت = "مطلق" ; شبیه سبک. visibility = "پنهان" ; شبیه سبک. عرض = بلوک . clientWidth + "px" ; شبیه innerHTML = متن ; سند بدن appendChild(clone); var l = متن . طول - 1 ; برای (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) (clone . innerHTML = text . substring (0 , l ) + "..." ; ) block . innerHTML = کلون innerHTML ;

این همان افزونه برای jQuery است:

(تابع ($) ( var truncate = تابع (el ) ( var text = el. text ()، height = el. height ()، clone = el. clone (); clone . css (( موقعیت : "مطلق" , قابلیت مشاهده: "مخفی"، ارتفاع: "خودکار") (کلون. متن (متن. زیر رشته (0، l) + "..."); هر (تابع () ( کوتاه کردن ($ (این)); )) (jQuery));

مسئله

بریدن گوشه ها نه تنها راهی سریع برای انجام کارها است، بلکه یک گزینه استایل محبوب هم در چاپ و هم در طراحی وب است. اغلب شامل بریدن یک یا چند گوشه ظرف با زاویه 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، از سردردی که با این همه گرد کردن به وجود می‌آید نجات می‌دهیم.

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

علاوه بر این، احتمالاً متوجه شده اید که برش گوشه ها اکنون کوچکتر از روش قبلی است که می تواند گیج کننده باشد. عرض فریم را 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

راه حل Clipping Path

اگرچه راه حل تصویر حاشیه بسیار فشرده است و از اصول 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 از انیمیشن پشتیبانی می کند و ما می توانیم نه تنها تغییر اندازه یک گوشه، بلکه انتقال بین اشکال مختلف را نیز متحرک کنیم.

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

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

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

شعاع مرزی: 15 پیکسل.
گوشه شکل: اریب.

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

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

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

اگر بخواهید یک تصویر را به اندازه مشخصی بیاورید، یعنی مثلاً یک پیش نمایش از آن (یک کپی کوچکتر از تصویر) در بخش اخبار یا چیزی شبیه به آن ایجاد کنید، این تکنیک ها می توانند بسیار مفید باشند.

تکنیک 1 - استفاده از حاشیه های منفی ( حاشیه های منفی)

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

HTMLمشابه کد تکنیک قبلی:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

برش ( شناور به سمت چپ؛ لبه: . 5em 10px. 5em 0 ; سرریز: پنهان; /* این مهم است */ موقعیت: نسبی; /* این هم مهم است */ حاشیه: 1px جامد #ccc; عرض: 200 پیکسل؛ ارتفاع: 120 پیکسل؛ برش img ( موقعیت: مطلق; بالا : - 40px ; سمت چپ: - 50 پیکسل

تکنیک 3 - استفاده از ویژگی Slicing ( ویژگی کلیپ)

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

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

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

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "قالب css" / > < / a > < / div >

ولاد مرژویچ

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

در واقعیت، همه چیز به استفاده از ویژگی سرریز با مقدار پنهان برمی‌گردد. تفاوت ها فقط در نمایش متفاوت متن ما نهفته است.

استفاده از سرریز

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

مثال 1. سرریز برای متن

HTML5 CSS3 IE Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 1.

برنج. 1. ظاهر متن پس از اعمال ویژگی overflow

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

افزودن گرادیان به متن

برای اینکه واضح تر شود که متن سمت راست به پایان نمی رسد، می توانید یک گرادیان از یک رنگ شفاف به رنگ پس زمینه در بالای آن قرار دهید (شکل 2). این باعث می شود اثر متن به تدریج حل شود.

برنج. 2. متن گرادیان

مثال 2 نحوه ایجاد این افکت را نشان می دهد. سبک خود عنصر عملاً یکسان خواهد ماند، اما ما خود شیب را با استفاده از عنصر ::after و CSS3 اضافه می کنیم. برای انجام این کار، یک شبه عنصر خالی را از طریق ویژگی content وارد می کنیم و یک گرادیان با پیشوندهای مختلف برای مرورگرهای اصلی روی آن اعمال می کنیم (مثال 2). عرض گرادیان را می توان به راحتی با استفاده از عرض تغییر داد، همچنین می توانید درجه شفافیت را با جایگزین کردن مقدار 0.2 با مقدار خود تنظیم کنید.

مثال 2: گرادیان بر متن

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

یک آرپژی درون گسسته یک سری پلی فونیک را تبدیل می کند.

این روش در اینترنت اکسپلورر تا نسخه 8.0 کار نمی کند، زیرا از گرادیان پشتیبانی نمی کند. اما می توانید CSS3 را رها کنید و از طریق یک تصویر با فرمت PNG-24 یک گرادیان به روش قدیمی ایجاد کنید.

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

بیضی در انتهای متن

همچنین می توانید از بیضی در انتهای متن برش خورده به جای گرادیان استفاده کنید. علاوه بر این، با استفاده از ویژگی text-overflow به طور خودکار اضافه خواهد شد. همه مرورگرها، از جمله نسخه های قدیمی IE، آن را درک می کنند و تنها اشکال این ویژگی این است که وضعیت آن در حال حاضر نامشخص است. به نظر می رسد که CSS3 شامل این ویژگی است، اما کد با آن اعتبار سنجی را پشت سر نمی گذارد.

مثال 3 استفاده از ویژگی text-overflow را با مقدار بیضی نشان می دهد که یک بیضی اضافه می کند. هنگامی که ماوس خود را روی متن قرار می دهید، به طور کامل نمایش داده می شود و با رنگ پس زمینه برجسته می شود.

مثال 3: استفاده از متن سرریز

HTML5 CSS3 IE Cr Op Sa Fx

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

نتیجه این مثال در شکل نشان داده شده است. 3.

برنج. 3. متن با بیضی

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