Tăierea textului cu o singură linie sau pe mai multe rânduri în funcție de înălțime, cu adăugarea unor puncte de suspensie. Cum să tăiați o linie lungă după numărul de caractere css și js soluția problemei Aspectul unei umbre dacă conținutul blocului este tăiat

Vlad Merjevici

În ciuda faptului că monitoarele cu diagonală mare devin din ce în ce mai accesibile și rezoluția lor crește constant, uneori apare sarcina de a încadra mult text într-un spațiu limitat. De exemplu, acest lucru poate fi necesar pentru o versiune mobilă a site-ului sau pentru o interfață în care numărul de linii este important. În astfel de cazuri, este logic să tăiați rândurile lungi de text, lăsând doar începutul propoziției. Astfel vom aduce interfața într-o formă compactă și vom reduce cantitatea de informații afișate. Tăierea liniei în sine se poate face pe partea serverului folosind același PHP, dar este mai ușor prin CSS și puteți afișa întotdeauna întregul text, de exemplu, când treceți cursorul mouse-ului peste el. În continuare, ne vom uita la metodele de tăiere a textului cu foarfece imaginare.

În realitate, totul se rezumă la utilizarea proprietății overflow cu valoarea ascunsă . Diferențele constau doar în afișarea diferită a textului nostru.

Folosind overflow

Pentru ca proprietatea de overflow să se arate cu text în toată splendoarea sa, trebuie să desfaceți textul folosind spații albe cu valoarea nowrap . Dacă acest lucru nu se face, atunci efectul de care avem nevoie nu se va adăuga cratime la text și va fi afișat întregul text. Exemplul 1 arată cum să tăiați textul lung cu un set specificat de proprietăți de stil.

Exemplul 1. overflow pentru text

HTML5 CSS3 IE Cr Op Sa Fx

Dimensiune text (spațiu alb: nowrap; /* Anulați împachetarea textului */ overflow: ascuns; /* Decupați conținutul */ fundal: #fc0; /* Culoare fundal */ padding: 5px; /* Margini */ )

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Aspectul textului după aplicarea proprietății overflow

După cum se poate vedea din figură, există în general un dezavantaj - nu este evident că textul are o continuare, așa că utilizatorul trebuie să fie conștient de acest lucru. Acest lucru se face de obicei folosind un gradient sau elipse.

Adăugarea unui gradient la text

Pentru a fi mai clar că textul din dreapta nu se termină, puteți suprapune un gradient de la o culoare transparentă la culoarea de fundal deasupra acestuia (Fig. 2). Acest lucru va crea efectul de dizolvare treptată a textului.

Orez. 2. Text gradient

Exemplul 2 arată cum să creați acest efect. Stilul elementului în sine va rămâne practic același, dar vom adăuga gradientul în sine folosind pseudo-elementul ::after și CSS3. Pentru a face acest lucru, inserăm un pseudo-element gol prin proprietatea conținut și îi aplicăm un gradient cu prefixe diferite pentru browserele majore (exemplul 2). Lățimea gradientului poate fi modificată cu ușurință folosind lățimea , de asemenea, puteți ajusta gradul de transparență prin înlocuirea valorii 0,2 cu a dvs.

Exemplul 2: Gradient peste text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Dimensiune text ( spatiu alb: nowrap; /* Anulează împachetarea textului */ overflow: ascuns; /* Decupează conținut */ padding: 5px; /* Margini */ fundal: #fc0; /* Culoare de fundal */ poziție: relativă ; /* Poziționare relativă */ ) .size::after ( conținut: ""; /* Afișează elementul */ poziție: absolută; /* Poziționare absolută */ dreapta: 0; sus: 0; /* Poziția elementului */ width : 40px; /* Gradient width*/ height: 100% /* Parent height */ /* Gradient */ background: -moz-linear-gradient(stânga, rgba(255,204,0, 0,2); 100%) ; fundal: -webkit-linear-gradient(stânga, rgba(255,204,0, 0,2), #fc0 100%): -o-linear-gradient(stânga, rgba(255,204,0, 0,2); #fc0 100 %; fundal: -ms-linear-gradient(stânga, rgba(255,204,0, 0,2), #fc0 100%); #fc0 100 %);

Un arpegiu intra-discret transformă o poliserie, aceasta este o verticală unică într-o țesătură super polifonică.

Această metodă nu funcționează în Internet Explorer până la versiunea 8.0 inclusiv, deoarece nu acceptă gradienți. Dar puteți abandona CSS3 și faceți un gradient la modă veche, printr-o imagine în format PNG-24.

Această metodă poate fi combinată doar cu un fundal simplu, iar în cazul unei imagini de fundal, gradientul de deasupra textului va fi vizibil.

Puncte de suspensie la sfârșitul textului

De asemenea, puteți utiliza o elipsă la sfârșitul textului decupat în loc de un gradient. Mai mult, va fi adăugat automat folosind proprietatea text-overflow. Este înțeles de toate browserele, inclusiv versiunile mai vechi de IE, iar singurul dezavantaj al acestei proprietăți este că starea ei este în prezent neclară. CSS3 pare să includă această proprietate, dar codul cu ea nu trece validarea.

Exemplul 3 arată utilizarea proprietății text-overflow cu valoarea elipsei, care adaugă o elipsă. Când treceți mouse-ul peste text, acesta este afișat în întregime și evidențiat într-o culoare de fundal.

Exemplul 3: Utilizarea text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Dimensiune text (spațiu alb: nowrap; /* Anulați împachetarea textului */ overflow: ascuns; /* Decupați conținutul */ padding: 5px; /* Margini */ text-overflow: elipse; /* Elipse */ ) .size :hover ( background: #f0f0f0; /* Culoare de fundal */ white-space: normal; /* Normal text wrapping */ ) Inconștientul provoacă contrast, acest lucru este desemnat de Lee Ross ca o eroare fundamentală de atribuire, care poate fi văzută în multe experimente.

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Text cu puncte de suspensie

Marele avantaj al acestor metode este că gradientul și elipsele nu sunt afișate dacă textul este scurt și se încadrează în întregime într-o zonă dată. Deci textul va fi afișat ca de obicei atunci când este complet vizibil pe ecran și va fi tăiat atunci când lățimea elementului este redusă.

Adăugarea unor puncte suspensive la sfârșitul textului se poate realiza în mai multe moduri, la dispoziția noastră css și js.

În primul rând, să ne uităm la problemă. Există marcarea blocurilor

O mulțime de text interesant despre stiluri, aspect, programare și multe alte lucruri interesante despre site-uri web

Dar cum putem pune o elipsă dacă nu putem limita dimensiunea blocului?

Ce zici de un script js? El poate face asta, nu?

Hmm, cu siguranță se poate. Aici, păstrați codul, acesta va număra caracterele Unicode și va tăia dacă este necesar

Acum trebuie să obțineți efectul de tăiere a textului din fiecare element de listă, în plus trebuie să adăugați o elipsă.

Decuparea textului CSS

Pentru a face acest lucru, să creăm un stil pentru clasa tit
.tit (
spatiu alb: nowrap; /* Anulează împachetarea textului */
preaplin: ascuns; /* Tăiați conținutul */
umplutură: 5px; /* Câmpuri */
text-overflow: puncte de suspensie; /* Elipse */
}

Particularitatea acestei soluții este că, dacă textul se încadrează în dimensiunea blocului, atunci punctele de suspensie nu vor fi adăugate. Ceea ce nu este întotdeauna soluția problemei.

Cel mai adesea, trebuie să tăiați textul la lungimea sa și abia apoi să adăugați puncte.
Există și sarcini când este necesar să adăugați puncte în orice caz (indiferent cât de lung este textul, cel puțin 3 litere). Și dacă textul este mai lung decât o anumită dimensiune, atunci trebuie să fie tăiat. În acest caz, este necesar să folosiți scripturi.

Tăiem textul în funcție de numărul de caractere și adăugăm o elipsă indiferent de lungime

funcția title() (
var elem, dimensiune, text;
var elem = document.getElementsByClassName("tit");
var text = elem.innerHTML;
mărimea var = 75;
var n = 70;
pentru(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > dimensiune) (
text = elem[i].innerHTML.substr(0,n);
}
altfel(
text = elem[i].innerHTML;
}
elem[i].innerHTML = text + "...";
}
}
titlu();

ce facem?

Spunem scriptului ce elemente trebuie procesate.
Pentru a face acest lucru, în linia var elem = document.getElementsByClassName("tit"); indicați clasa elementului (trebuie să fie aceeași).

Apoi trebuie să setați dimensiunea textului înainte de a-l tăia. Acestea sunt liniile noastre scurte la care li se va adăuga o elipsă. Variabila var size = 75 este responsabilă pentru aceasta;

Acum scriptul ar trebui să treacă prin toate elementele cu clasa necesară și să adauge puncte suspensive.
Scriptul verifică lungimea fiecărei linii și trunchiază textul dacă depășește 75 de caractere. Dacă lungimea este mai mică, atunci se adaugă pur și simplu o elipsă (linia if(elem[i].innerHTML.length > size)).

Puteți vedea scriptul în acțiune pe pagina demo. Asta e tot, acum știi cum să tăiați textul lung folosind diverse metode.

Ne dorim întotdeauna ca totul să fie îngrijit pe site, dar de exemplu, aveți blocuri cu text care trebuie să se încadreze în anumite limite, acesta ar putea fi un anunț pentru un articol sau o descriere a unui produs. În acest caz, textul nostru are o lungime arbitrară. Desigur, puteți ajusta în mod constant textul la dimensiunea câmpului, astfel încât nimic să nu meargă greșit, sau puteți face astfel încât textul suplimentar să fie ascuns.

Există o soluție CSS simplă pentru aceasta. Folosind proprietatea text-overflow: puncte de suspensie, care vă permite să tăiați o linie cu un test lung. Pentru ca această soluție să funcționeze, trebuie să specificați lățimea blocului părinte și să aveți proprietatea preaplin egal ascuns sau clip.

Soluție text cu o singură linie:

Box-text ( text-overflow: elipse; //imagine cu blocuri lungi cu text overflow: ascuns; //ascunde lățimea textului depășit: 100%; //lățimea blocului cu text spatiu alb: nowrap; //interzicerea text de împachetare)

Toate echipamentele și uneltele lor erau vii, într-o formă sau alta.

Soluție pentru textul cu mai multe linii:

Dar pentru a tăia textul cu mai multe linii în CSS va trebui să recurgeți la pseudo-elemente :înainteŞi :după.

Box-text ( overflow: ascuns; înălțime: 200px; line-height: 25px; ) .box-text:before ( conținut: ""; float: stânga; lățime: 5px; înălțime: 200px; ) .box-text > * :first-child (float: dreapta; lățime: 100%; margin-left: -5px; ) .box-text:after ( conținut: „\02026”; box-sizing: content-box; float: dreapta; poziție: relativă: -25px lățime: 5px dimensiunea de fundal: rgba (255, 255, 0), alb;

Partea stângă a pădurii era întunecată, în umbră; cea dreaptă, udă, lucioasă, strălucea la soare, legănându-se ușor în vânt. Totul era în floare; privighetoarele vorbeau și se rostogoleau, când aproape, când departe.

Salutare tuturor, numele meu este Anna Blok și astăzi vom vorbi despre cum să decupăm imaginile fără a folosi programe de grafică.

Unde poate fi util acest lucru?

În primul rând, pe site-urile în care conținutul cu imagini, cel mai probabil, nu va fi decupat pentru un anumit bloc.

Un exemplu izbitor: un blog pe WordPress.

Să presupunem că doriți ca coperta articolului dvs. să aibă un raport de aspect de 1:1 (pătrat). Acțiunile tale:

Descărcați o imagine adecvată de pe Internet;

Decupați-l în Photoshop la proporțiile dorite;

Publicați un articol.

Când vizitați site-ul, veți vedea rezultatul pe care îl așteptați.

Dar, să presupunem că ați uitat să decupați imaginea în Photoshop și ați descărcat o imagine aleatorie ca copertă de pe Internet, ce se va întâmpla atunci?! Așa e, aspectul se va rupe. Și dacă nu ați folosit deloc CSS, atunci o imagine HD poate bloca complet întreaga vizualizare a textului. Prin urmare, este important să știți cum să decupați imaginile folosind stiluri CSS.

Să ne uităm la diferite situații în care acest lucru poate fi implementat nu numai folosind CSS, ci și SVG.

Exemplul 1

Să încercăm să decupăm imaginea care este plasată folosind imaginea de fundal. Să creăm un mic marcaj HTML

Să trecem la stilul CSS. Folosind background-image adăugăm o imagine, specificăm cadrele pentru imaginea noastră, centrem imaginea folosind background-position și setăm dimensiunea fundalului:

jpg);

fundal-poziție:centru centru;

dimensiunea fundalului:copertă;

Să presupunem că avem în continuare același container de cutie în interiorul căruia există o etichetă img cu o imagine pe care o vom stila acum.

De asemenea, ne vom centra imaginea în raport cu obiectul pe care îl vom crea. Și folosim o proprietate care este destul de rar folosită: object-fit .

Box ( poziție: relativ; overflow: ascuns; lățime:300px; înălțime:300px; ) .box img (poziție: absolut; sus:50%; stânga:50%; transform:translate(-50%,-50%)); lățime: 300px; înălțime: 300px;

După părerea mea, aceasta este cea mai bună metodă. Este ideal pentru bloguri dacă folosești imagini de proporții complet diferite pentru postări.

Puteți afla mai multe despre HTML și CSS aici:

Exemplul 3

De asemenea, putem crea decupări pentru imagini în acest moment dacă le inserăm în elemente SVG. Să luăm ca exemplu un cerc. Putem crea SVG folosind etichete. Creați o etichetă de chenar svg care va conține o etichetă de cerc și o etichetă de model în interior. În eticheta de model scriem eticheta de imagine. În el specificăm atributul xlink:href și adăugăm o imagine. Vom adăuga, de asemenea, atribute de lățime și înălțime. Dar asta nu este tot. Va trebui să adăugăm valoarea de umplere. Pentru ca munca noastră să fie considerată completă, vom adăuga un atribut auxiliar preserveAspectRatio la eticheta de imagine, care ne va permite să ne umplem imaginea „de la capăt la capăt” în jurul întregului cerc.

Nu pot numi această metodă universală. Dar poate fi folosit în cazuri excepționale. De exemplu, dacă am atins subiectul unui blog, atunci această metodă s-ar putea încadra în mod ideal în avatarul autorului care scrie articolul.

Puteți afla mai multe despre HTML și CSS aici:

Rezultate:
Am analizat 3 metode de tăiere a imaginilor pe site-uri web: folosind imaginea de fundal, folosind eticheta img și asociat cu modelul svg cu încorporarea imaginilor bitmap folosind eticheta imagine. Dacă cunoașteți alte metode pentru decuparea unei imagini folosind SVG, atunci distribuiți-le în comentarii. Va fi util nu numai pentru mine, ci și pentru alții să știe despre ei.

Nu uitați să vă adresați întrebărilor despre aspectul sau dezvoltarea front-end de la profesioniști din FrontendHelp online.

Problemă

Nu numai că tăierea colțurilor este o modalitate rapidă de a finaliza lucrurile, dar este și o opțiune de stil populară atât în tipărire, cât și în design web. Cel mai adesea implică tăierea unuia sau mai multor colțuri ale recipientului la un unghi de 45°. Recent, datorită faptului că skeuomorfismul a început să piardă teren în fața designului plat, acest efect este deosebit de popular. Când colțurile sunt tăiate doar pe o singură parte și fiecare colț ocupă 50% din înălțimea elementului, se creează o formă în formă de săgeată, care este adesea folosită și în proiectarea butoanelor și a elementelor de navigare pe firul de navigare.

Cu toate acestea, CSS încă nu are suficiente instrumente pentru a crea acest efect cu linii simple și curate. Din această cauză, mulți dezvoltatori tind să folosească imagini de fundal: fie acoperind colțurile tăiate cu triunghiuri (pe un fundal solid), fie creând întregul fundal folosind una sau mai multe imagini în care colțurile sunt deja tăiate. Evident, astfel de metode sunt complet inflexibile, greu de întreținut și cresc latența din cauza solicitărilor HTTP suplimentare și a dimensiunii totale a fișierelor site-ului.

Un exemplu de site web în care colțul tăiat (jos din stânga câmpului semi-transparent Find & Book) se potrivește perfect în design

Soluţie

O soluție posibilă vine din atotputernicii gradienți CSS. Să presupunem că vrem doar un colț tăiat, să spunem colțul din dreapta jos. Trucul este să profitați de capacitatea degradeurilor de a lua direcția unghiului (de exemplu, 45deg) și poziția limitelor de tranziție a culorii în valori absolute, care nu se schimbă atunci când dimensiunile totale ale elementului la care este fundalul aparține schimbării. Din cele de mai sus rezultă că un gradient liniar ne va fi suficient.

Vom adăuga un chenar de estompare transparent pentru a crea colțul tăiat și un alt chenar de estompare în aceeași poziție, dar cu o culoare care se potrivește cu fundalul. Codul CSS va fi după cum urmează (pentru un colț de 15 pixeli):

fundal: #58a;
fundal:linear-gradient(-45deg, transparent 15px, #58a 0);

Simplu, nu-i așa? Rezultatul îl puteți vedea în figură.

Din punct de vedere tehnic, nici măcar nu avem nevoie de primul anunț. L-am adăugat doar ca o soluție: dacă gradienții CSS nu sunt acceptați, atunci a doua declarație va fi ignorată, așa că vom obține cel puțin un fundal de culoare solidă. Acum să presupunem că avem nevoie de două colțuri tăiate, să spunem ambele colțuri de jos. Acest lucru nu se poate face cu un singur gradient, așa că vom avea nevoie de două. Primul tău gând ar putea fi ceva de genul acesta:

fundal: #58a;
fundal: liniar-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

Cu toate acestea, acest lucru nu funcționează. În mod implicit, ambele degrade ocupă întreaga zonă a elementului, astfel încât se întunecă reciproc. Trebuie să le facem mai mici limitând fiecare dintre ele la jumătate din element folosind dimensiunea fundalului:
fundal: #58a;

dimensiunea fundalului: 50% 100%;

Rezultatul îl puteți vedea în figură.

Chiar dacă am aplicat dimensiunea fundalului, gradienții încă se suprapun unul pe celălalt. Motivul este că am uitat să dezactivăm repetarea fundalului, astfel încât fiecare fundal se repetă de două ori. În consecință, unul dintre fundaluri îl întunecă încă pe celălalt, dar de data aceasta prin repetare. Noua versiune a codului arată astfel:
fundal: #58a;
fundal: liniar-gradient(-45deg, transparent 15px, #58a 0) dreapta, linear-gradient(45deg, transparent 15px, #655 0) stânga;
dimensiunea fundalului: 50% 100%;

Puteți vedea rezultatul în imagine și vă asigurați că în sfârșit este acolo! - funcționează! Probabil ați ghicit deja cum să aplicați acest efect în toate cele patru colțuri. Veți avea nevoie de patru gradienți și cod similar cu următorul:

fundal: #58a;
fundal: gradient liniar (135deg, transparent 15px, #58a 0) stânga sus,

gradient liniar (-135deg, transparent 15px, #655 0) dreapta sus,

gradient liniar (-45deg, transparent 15px, #58a 0) dreapta jos,

gradient liniar (45deg, transparent 15px, #655 0) stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;

SFATURI
Am folosit culori diferite (#58a și #655) pentru a face depanarea mai ușoară. În practică, ambele degrade vor fi de aceeași culoare.
Dar problema cu codul anterior este că este greu de întreținut. Este nevoie de cinci editări pentru a schimba culoarea de fundal și patru pentru a schimba valoarea unghiului. Un mixin creat folosind un preprocesor ar putea reduce numărul de repetări. Iată cum ar arăta acest cod în SCSS:
SCSS
@mixin colțuri teșite($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
fundal: $bg;
fundal:
gradient-liniar (135deg, transparent $tl, $bg 0)
stânga sus,
gradient-liniar(225deg, transparent $tr, $bg 0)
dreapta sus,
gradient-liniar(-45deg, transparent $br, $bg 0)
dreapta jos,
gradient-liniar(45deg, transparent $bl, $bg 0)
stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;
}

Poate fi apelat atunci când este necesar, așa cum se arată mai jos, cu 2-5 argumente:
SCSS
@include colțuri teșite (#58a, 15px, 5px);
În acest exemplu, vom ajunge cu un element care are colțurile din stânga sus și din dreapta jos tăiate cu 15 pixeli și colțurile din dreapta sus și din stânga jos tăiate cu 5 pixeli, similar cu modul în care funcționează raza chenarului când specificăm mai puțin de patru valori. Acest lucru este posibil deoarece ne-am ocupat și de valorile implicite pentru argumentele din mixul nostru SCSS - și da, acele valori implicite se pot referi și la alte argumente.
ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners-gradients

Colțuri tăiate curbat

Un exemplu excelent de utilizare a colțurilor tăiate curbe pe site-ul http://g2geogeske.com, designerul le-a făcut un element central de design: sunt prezente în navigare, în conținut și chiar în subsol.
O variație a metodei cu degrade vă permite să creați colțuri tăiate curbe - un efect pe care mulți îl numesc „raza de bordură interioară” deoarece arată ca o versiune inversată a colțurilor rotunjite. Singura diferență este utilizarea gradienților radiali în loc de cei liniari:
fundal: #58a;
fundal: gradient radial (cerc în stânga sus, transparent 15px, #58a 0) stânga sus,

gradient radial(cerc în dreapta sus, transparent 15px, #58a 0) dreapta sus,

gradient radial (cerc în dreapta jos, transparent 15px, #58a 0) dreapta jos,

radial-gradient(cerc în stânga jos, transparent 15px, #58a 0) stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;

Ca și în tehnica anterioară, dimensiunea unghiului poate fi controlată de pozițiile limitelor de tranziție a culorii, iar un mixin poate face acest cod mai potrivit pentru întreținerea ulterioară.

ÎNCERCAȚI VOI!
http://play.csssecrets.io/scoop-corners

Soluție cu șir SVG și imagine-chenar

În timp ce soluția bazată pe gradienți funcționează, are câteva dezavantaje:
Codul este foarte lung și plin de repetare. În cel mai obișnuit caz, când trebuie să tăiem toate cele patru colțuri cu aceeași cantitate, modificarea acestei valori implică patru modificări ale codului.

În mod similar, schimbarea culorii de fundal necesită și patru modificări, iar dacă țineți cont de soluția de rezervă, atunci toate cele cinci; Animarea modificărilor în dimensiunea unui colț tăiat este incredibil de dificilă, iar în unele browsere este complet imposibil. Din fericire, în funcție de rezultatul dorit, mai putem folosi câteva metode. Una dintre ele implică combinarea imaginii-chenar cu codul SVG șir, în care sunt generate colțurile.

Știind cum funcționează imaginea de margine (dacă aveți nevoie de o reîmprospătare, există un indiciu aici), vă puteți imagina deja cum ar trebui să arate codul SVG necesar?

Deoarece dimensiunile generale nu sunt importante pentru noi (border-image se ocupă de scalare, iar imaginile SVG se scalează perfect indiferent de dimensiune - grafica vectorială să fie binecuvântată!), toate dimensiunile pot fi echivalate cu una pentru a funcționa cu valori mai convenabile și mai scurte. Valoarea colțului tăiat va fi egală cu unu, iar laturile drepte vor fi, de asemenea, egale cu unu. Rezultat (mărit pentru o vizualizare mai ușoară). Codul necesar pentru aceasta este prezentat mai jos:
chenar: 15px solid transparent;

\
\
’);

Rețineți că dimensiunea pasului de feliere este 1. Aceasta nu înseamnă 1 pixel; dimensiunea reală este determinată de sistemul de coordonate al fișierului SVG (de aceea nu avem unități). Dacă am folosi procente, ar trebui să aproximăm 1/3 din imagine cu o valoare fracțională, ca 33,34% . Este întotdeauna riscant să folosiți aproximări, deoarece diferite browsere pot rotunji valorile la diferite grade de precizie. Și respectând unitățile de modificare din sistemul de coordonate al fișierului SVG, ne ferim de durerea de cap care vine cu toată această rotunjire.

După cum puteți vedea, colțurile tăiate sunt prezente, dar nu există fundal. Există două modalități de a rezolva această problemă: fie definiți un fundal, fie adăugați cuvântul cheie de umplere la declarația de margine a imaginii, astfel încât elementul de felie centrală să nu fie aruncat. În exemplul nostru, preferăm să definim un fundal separat, deoarece această definiție va servi și ca o soluție pentru browserele care nu acceptă această soluție.

În plus, probabil ați observat că colțurile tăiate sunt acum mai mici decât la tehnica anterioară, ceea ce poate fi confuz. Am stabilit lățimea cadrului la 15px! Motivul este că în soluția de gradient, acești 15 pixeli au fost măsurați de-a lungul liniei de gradient, care este perpendiculară pe direcția gradientului. Cu toate acestea, lățimea cadrului nu se măsoară în diagonală, ci pe orizontală/verticală.

Simți unde merg cu asta? Da, da, din nou omniprezenta teorema lui Pitagora, pe care am folosit-o în mod activ. Diagrama din figură ar trebui să clarifice lucrurile.

Pe scurt, pentru a obține același rezultat vizual, avem nevoie de o lățime a chenarului care să fie de 2 ori dimensiunea pe care am folosi-o în metoda gradientului. În acest caz, va fi un pixel, care este cel mai rezonabil să se aproximeze la 20px, cu excepția cazului în care ne confruntăm cu sarcina de a aduce dimensiunea diagonalei cât mai aproape posibil de prețuiții 15px:

imagine-chenar: 1 url(‘data:image/svg+xml,\
\
\
’);
fundal: #58a;
Cu toate acestea, după cum puteți vedea, rezultatul nu este exact ceea ce ne așteptam.

Unde s-au dus colțurile noastre tăiate cu grijă? Nu-ți fie teamă, tinere Padawan, colțurile sunt încă la locul lor. Veți înțelege imediat ce s-a întâmplat dacă setați o culoare de fundal diferită, cum ar fi #655.
După cum demonstrează imaginea de mai jos, motivul pentru care colțurile noastre au dispărut se află în fundal: fundalul pe care l-am definit mai sus le ascunde pur și simplu. Tot ce trebuie să facem pentru a elimina acest inconvenient este să folosim background-clip pentru a preveni strecurarea fundalului sub zona cadrului:
chenar: 20px solid transparent;
imagine-chenar: 1 url(‘data:image/svg+xml,\
\
\
’);
fundal: #58a;

Acum problema este rezolvată și domeniul nostru arată exact la fel ca înainte. În plus, de data aceasta putem schimba cu ușurință dimensiunea colțurilor cu o singură editare: pur și simplu reglați lățimea cadrului. Putem chiar anima acest efect, deoarece lățimea chenarului acceptă animația!

Și schimbarea fundalului necesită acum două editări în loc de cinci. În plus, deoarece fundalul nostru nu depinde de efectul aplicat colțurilor, putem defini un gradient sau orice alt model pentru acesta, cu condiția ca culoarea de la margini să fie încă #58a .

De exemplu, folosim un gradient radial de la hsla(0,0%,100%,.2) la transparent. Mai rămâne o singură mică problemă de rezolvat. Dacă imaginea de margine nu este acceptată, atunci soluția de rezervă nu se va limita la absența colțurilor tăiate. Deoarece fundalul este decupat, va exista mai puțin spațiu între marginea câmpului și conținutul acestuia. Pentru a remedia acest lucru, trebuie să definim aceeași culoare pentru cadru pe care o folosim pentru fundal:
chenar: 20px solid #58a;
imagine-chenar: 1 url(‘data:image/svg+xml,\
\
\
’);
fundal: #58a;
fundal-clip: padding-box;

În browserele în care este acceptată definiția imaginii de chenar, această culoare va fi ignorată, dar acolo unde imaginea de chenar nu funcționează, o culoare suplimentară a chenarului va oferi o soluție de rezervă mai elegantă. Singurul său dezavantaj este că crește numărul de editări necesare pentru a schimba culoarea de fundal la trei.
ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners

Soluție pentru calea de tăiere

Deși soluția pentru imagine de frontieră este foarte compactă și urmează bine principiile DRY, impune anumite limitări. De exemplu, fundalul nostru ar trebui să fie în întregime, sau cel puțin de-a lungul marginilor, umplut cu o culoare solidă.

Ce se întâmplă dacă dorim să folosim un alt tip de fundal, cum ar fi o textură, un model sau un gradient liniar? Există o altă metodă care nu are astfel de restricții, deși, desigur, există anumite restricții privind utilizarea sa.

Vă amintiți proprietatea clip-path din secretul „Cum se face un diamant”? Traseele de tăiere CSS au o proprietate uimitoare: vă permit să amestecați valori procentuale (modul în care specificăm dimensiunile generale ale unui element) cu valori absolute, oferind o flexibilitate incredibilă. De exemplu, codul pentru o cale de tăiere care decupează un element într-un dreptunghi de 20 px cu colțuri teșite (măsurate orizontal) arată astfel:
fundal: #58a;
clip-path: poligon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Deși scurt, această bucată de cod nu urmează principiile DRY și aceasta devine una dintre cele mai mari probleme dacă nu utilizați un preprocesor. De fapt, acest cod este cea mai bună ilustrare a principiului WET al tuturor soluțiilor CSS pure prezentate în această carte, deoarece necesită până la opt (!) editări pentru a schimba dimensiunea colțului.

Pe de altă parte, fundalul poate fi schimbat cu o singură editare, așa că cel puțin avem asta. Unul dintre avantajele acestei abordări este că putem folosi absolut orice fundal sau chiar decupăm elemente de înlocuire, cum ar fi imaginile. Ilustrația arată o imagine stilizată folosind colțuri tăiate. Niciuna dintre metodele anterioare nu poate obține acest efect. În plus, proprietatea clip-path acceptă animația și putem anima nu numai modificarea dimensiunii unui colț, ci și tranzițiile între diferite forme.

Tot ce trebuie să faceți este să utilizați o altă cale de tăiere. Pe lângă faptul că este detaliat și are suport limitat pentru browser, dezavantajul acestei soluții este că, dacă nu ne asigurăm că umplutura este suficient de largă, textul va fi, de asemenea, tăiat, deoarece tăierea elementului nu ia niciuna dintre componentele sale. în considerare. În schimb, metoda gradientului permite textului să se extindă pur și simplu dincolo de colțurile tăiate (la urma urmei, ele sunt doar o parte din fundal), iar metoda imagine-chenar funcționează la fel ca și chenarele obișnuite - înfășoară textul pe un nou linia.

ÎNCERCAȚI VOI!
http://play.csssecrets.io/bevel-corners-clipped

COLTURI TAIATE IN VIITOR
În viitor, nu va trebui să recurgem la gradienți CSS, tăiere sau SVG pentru a obține efectul colțurilor tăiate. Noua proprietate corner-shape, inclusă în CSS Backgrounds & Borders Level 4, ne va salva de această durere de cap. Va fi folosită pentru a crea efectul colțurilor tăiate în diferite forme în combinație cu proprietatea border-radius, care este necesară. determinați cantitatea de recoltare. De exemplu, pentru a descrie colțuri tăiate de 15 px pe toate părțile imaginii, următorul cod simplu este suficient:

chenar-rază: 15px;
formă de colț: teșit;

Citește și