Conținutul clipului div. Decupați textul pe o singură linie sau pe mai multe rânduri după înălțime, adăugând puncte de suspensie

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 de folos?

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

Un exemplu izbitor: blog pe WordPress.

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

1. Descărcați o imagine potrivită de pe Internet;
2. Decupați-l în Photoshop la proporțiile dorite;
3. Publicați un articol.

Când vizitați site-ul, veți vedea rezultatul la care vă așteptați.

Dar, să presupunem că ai uitat să decupezi imaginea în Photoshop și ai încărcat o imagine aleatorie ca coperta 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 cu rezoluție HD poate bloca complet întreaga vizualizare a textului. Prin urmare, este important să puteți decupa imagini folosind stiluri CSS.

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

Exemplul 1

Să încercăm să decupăm o imagine care este plasată folosind imaginea de fundal. Să creăm niște markup HTML

Să trecem la stilul CSS. Adăugăm o imagine prin background-image , 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ă; lățime: 300px; înălțime: 300px; )

Aceasta a fost prima și cea mai ușoară metodă de tăiere a unei imagini. Acum să ne uităm la al doilea exemplu.

Exemplul 2

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

De asemenea, ne vom plasa imaginea în centru î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; potrivire obiect:copertă; )

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

Aflați mai multe despre HTML și CSS aici:

Exemplul 3

De asemenea, putem crea clipuri 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ă svg de ambalare în care va fi o etichetă cerc și o etichetă de model. Î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, atributele lățime și înălțime. Dar asta nu este tot. Va trebui să adăugăm o valoare de umplere. Pentru a finaliza munca noastră, vom adăuga un atribut auxiliar preserveAspectRatio la eticheta de imagine, care ne va permite să ne umplem imaginea „de la și către” în jurul cercului.

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

Aflați mai multe despre HTML și CSS aici:

Rezultate:
Am acoperit 3 metode pentru decuparea imaginilor pe site-uri web: utilizarea imaginii de fundal , utilizarea etichetei img și svg-uri legate de model cu încorporarea de hărți de biți folosind eticheta de imagine. Dacă cunoașteți alte metode pentru decuparea unei imagini folosind SVG, atunci distribuiți-le în comentarii. Nu numai pentru mine, ci și pentru alții, va fi util să învețe despre ei.

Nu uitați să puneți întrebările dvs. despre aspect sau dezvoltarea front-end profesioniștilor de la FrontendHelp online.

Există un text de lungime arbitrară care trebuie afișat într-un bloc de înălțime și lățime fixă. În acest caz, dacă textul nu se potrivește complet, trebuie afișat un fragment de text care se încadrează complet în blocul specificat, după care se setează punctele de suspensie.

O astfel de sarcină este destul de comună, în același timp, nu este atât de banală pe cât pare.

Varianta pentru textul cu o singură linie în CSS

În acest caz, puteți utiliza proprietatea text-overflow: elipse. În acest caz, containerul trebuie să aibă proprietatea revărsare egal ascuns sau clamă

Bloc ( lățime : 250 px ; spațiu alb : nowrap ; overflow : ascuns ; text-overflow : elipse ; )

Varianta pentru text cu mai multe linii în CSS

Prima modalitate de a decupa textul cu mai multe linii folosind proprietățile CSS este aplicarea pseudo-elementelor :inainte deși :după. Să începem cu marcajul HTML

Și acum proprietățile în sine

Casetă ( depășire : ascuns ; înălțime : 200 px ; lățime : 300 px ; înălțime linie : 25 px ; ) .box : înainte ( conținut : „” ; float : stânga ; lățime : 5 px ; înălțime : 200 px ; ) .box > * : primul -child ( float : dreapta ; lățime : 100 % ; margin-left : -5px ; ) .box :after ( conținut : „\02026” ; box-sizing : content-box ; float : dreapta ; poziție : relativă ; sus : -25px; stânga: 100%; lățime: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; fundal: liniar-gradient (la dreapta, rgba (255, 255, 255, 0), alb 50%, alb);)

O altă modalitate este să utilizați proprietatea column-width, care setează lățimea coloanei pentru textul cu mai multe linii. Adevărat, atunci când utilizați această metodă, nu va funcționa să instalați o elipsă la sfârșit. HTML:

Bloc ( depășire : ascuns ; înălțime : 200 px ; lățime : 300 px ; )

A treia modalitate de a rezolva textul cu mai multe linii în CSS este pentru browsere Webkit. În ea, va trebui să folosim mai multe proprietăți specifice simultan cu prefixul -webkit. Principalul este -webkit-line-clamp care vă permite să specificați numărul de linii de afișat în bloc. Soluția este frumoasă, dar destul de limitată datorită funcționării sale într-un grup limitat de browsere

Bloc ( overflow : ascuns ; text-overflow : puncte de suspensie ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Varianta pentru text cu mai multe linii în JavaScript

Aici este folosit un bloc suplimentar invizibil, în care textul nostru este plasat inițial, după care este șters câte un caracter până când înălțimea acestui bloc devine mai mică sau egală cu înălțimea blocului dorit. Iar la sfârșit textul este mutat în blocul original.

var block = document . querySelector(".block" ), text = block . innerHTML , clona = document . createElement("div"); clonare. stil. poziție = „absolut” ; clonare. stil. vizibilitate = „ascuns” ; clonare. stil. lățime = bloc . clientWidth + "px" ; clonare. innerHTML = text ; document. corp . appendChild(clona); var l = text . lungime - 1; pentru (; l >= 0 && clone . clientHeight > bloc . clientHeight ; -- l ) ( clone . innerHTML = text . substring (0 , l ) + „...” ; ) bloc . innerHTML = clona . innerHTML ;

Acesta este sub forma unui plugin pentru jQuery:

(funcție ($) ( var truncate = funcție (el ) ( var text = el . text (), înălțime = el . înălțime (), clone = el . clone (); clone . css (( poziție: „absolut” , vizibilitate: „ascuns” , înălțime : „auto” )); el .după (clonă); var l = text . lungime - 1 ; pentru (; l >= 0 && clone . înălțime () > înălțime ; -- l ) ( clona . text (text . substring (0 , l ) + „...” ); ) el . text (clona . text ()); clona . elimina (); ); $ . fn . truncateText = function () ( returnează acest . fiecare (funcția () ( trunchiați ($ (acest )); )); ); )(jQuery ));

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, iar 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, încă nu există suficiente instrumente în CSS pentru a crea acest efect cu soluții simple și directe. Din această cauză, mulți dezvoltatori tind să folosească imagini de fundal, fie prin acoperirea colțurilor tăiate cu triunghiuri (pe un fundal de culoare solidă), fie prin crearea întregului fundal cu una sau mai multe imagini în care colțurile sunt deja tăiate. Evident, astfel de metode sunt complet inflexibile, dificil de întreținut și cresc latența din cauza solicitărilor HTTP suplimentare și a dimensiunii generale a fișierului site-ului web.

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 de a profita de capacitatea gradientului de a lua direcția unghiului (ex. 45deg) și poziția limitelor de tranziție a culorii în valori absolute, care nu se schimbă la modificarea dimensiunilor totale ale elementului căruia îi aparține fundalul. . Din cele de mai sus rezultă că un gradient liniar ne va fi suficient.

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

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

Simplu, nu? Rezultatul îl vedeți î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ă vrem două colțuri tăiate, să spunem ambele 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 cam așa:

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

Totuși, 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 la jumătate din elementul cu dimensiunea fundalului:
fundal: #58a;

dimensiunea fundalului: 50% 100%

Rezultatul îl puteți vedea în imagine.

Chiar dacă am aplicat o dimensiune de fundal , 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 fundale îl ascunde în continuare pe celălalt, dar de data aceasta din cauza repetății. 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ă este - în sfârșit! - lucrări! 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 precum 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;

SFAT
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 cu 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)
sus în dreapta,
gradient-liniar(-45deg, transparent $br, $bg 0)
dreapta-jos,
gradient liniar (45 de grade, transparent $bl, $bg 0)
stânga jos;
dimensiunea fundalului: 50% 50%;
background-repeat: fără repetare;
}

Apoi, atunci când este necesar, poate fi apelat, după 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 stânga sus și din stânga jos cu 5 pixeli, similar cu modul în care funcționează raza chenarului când specificăm mai puțin. decat patru valori. Acest lucru este posibil, deoarece avem grijă și de valorile implicite pentru argumentele din mixul nostru SCSS - și da, aceste valori implicite se pot referi și la alte argumente.
ÎNCERCAȚI-VĂ!
http://play.csssecrets.io/bevel-corners-gradients

Colțuri tăiate curbat

Un exemplu excelent de utilizare a colțurilor tăiate curbe pe un site web 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 gradientului vă permite să creați colțuri tăiate curbe, un efect pe care mulți oameni îl numesc „rază interioară a chenarului”, 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;

La fel ca în tehnica anterioară, dimensiunea colțului poate fi controlată de pozițiile limitelor de tranziție a culorii, iar mixul poate face acest cod mai potrivit pentru întreținerea ulterioară.

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

Soluție cu SVG în linie și imagine de margine

În timp ce soluția bazată pe gradient 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 sume implică patru modificări în cod.

În mod similar, schimbarea culorii de fundal necesită și patru modificări, iar dacă includeți o soluție de rezervă, atunci toate cele cinci; animarea unei modificări a dimensiunii unui colț tăiat este incredibil de dificilă și chiar imposibilă în unele browsere. Din fericire, în funcție de rezultatul dorit, mai putem folosi câteva metode. Una dintre ele implică sindicatul chenar-imagine cu un șir de cod SVG, în care sunt generate colțurile.

Știind cum funcționează chenar-imagine(dacă aveți nevoie să reîmprospătați aceste cunoștințe în memorie, veți găsi un indiciu) vă puteți imagina deja cum este necesar SVG-Codul?

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


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

Rețineți că dimensiunea pasului de feliere este 1. 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, atunci ar trebui să aproximăm 1/3 din imagine cu o valoare fracțională, ca 33,34%. Este întotdeauna riscant să apelezi la valori aproximative, deoarece valorile pot fi rotunjite cu diferite grade de precizie în diferite browsere. Și rămânând la unitățile sistemului de coordonate ale 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 fundalul nu este. 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 tăiere 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ă, iar acest lucru poate fi confuz. La urma urmei, setăm lățimea chenarului 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ă pe diagonală, ci pe orizontală/verticală.

Simți la ce conduc? Da, da, din nou omniprezenta teorema lui Pitagora, pe care am folosit-o în mod activ. Diagrama din figură ar trebui să clarifice situația.

Pe scurt, pentru a obține același rezultat vizual, avem nevoie de o lățime a marginii de 2 ori mai mare decât 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 de râvnitul 15px:

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

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

0,2″/>\
’);
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 te teme, tinere padawan, colțurile sunt încă acolo. Veți înțelege imediat ce s-a întâmplat dacă setați o culoare de fundal diferită, de exemplu #655.
După cum arată figura de mai jos, motivul pentru care colțurile noastre au dispărut se află în fundal: fundalul pe care l-am definit mai sus pur și simplu le ascunde. Tot ceea ce trebuie să facem pentru a remedia acest inconvenient este să folosim background-clip pentru a preveni accesarea fundalului sub zona cadrului:
chenar: 20px solid transparent;
imagine-chenar: 1 url('data:image/svg+xml,\

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

0,2″/>\
’);
fundal: #58a;

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

Și schimbarea fundalului necesită acum două editări în loc de cinci. De asemenea, deoarece fundalul nostru este independent de efectul colțurilor, putem defini un gradient sau orice alt model pentru acesta, atâta timp cât marginile sunt încă #58a .

De exemplu, folosim un gradient radial de la culoare hsla(0,0%,100%,.2) la transparent. Mai rămâne o singură mică problemă de rezolvat. Dacă imaginea de frontieră nu este acceptată, atunci soluția de rezervă nu se limitează la absența colțurilor tăiate. Deoarece fundalul este decupat, spațiul dintre marginea câmpului și conținutul acestuia va scădea. Pentru a remedia acest lucru, trebuie să setăm cadrul la aceeași culoare pe care o folosim pentru fundal:
chenar: 20px solid #58a;
imagine-chenar: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
fundal: #58a;
fundal-clip: padding-box;

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

Soluție pentru traseul de tăiere

Deși soluția de bordură-imagine 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 umplut cu o culoare solidă de-a lungul marginilor.

Dar dacă vrem 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.

Amintiți-vă de proprietate traseul de tăiere din secretul „Cum să faci un romb”? Traseele de tăiere CSS au o proprietate uimitoare: vă permit să amestecați valori procentuale (pe care le folosim pentru a specifica 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 la forma unui dreptunghi teșit de 20 px (măsurat 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, acest fragment de cod nu urmează principiile DRY și aceasta devine una dintre cele mai mari probleme dacă nu folosiț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ă opt (!) editări pentru a schimba dimensiunea colțului.

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

Tot ce este nevoie este să folosiți o altă cale de tăiere. Pe lângă faptul că este verbos și are suport limitat pentru browser, dezavantajul acestei soluții este că, dacă nu ne ocupăm de umplutură suficient de largă, textul va fi și decupat, deoarece la tăierea unui element nu se ține cont de constituenții acestuia. in orice fel. În schimb, metoda gradientului permite textului să se extindă pur și simplu dincolo de colțurile tăiate (pentru că sunt doar o parte a fundalului), în timp ce metoda imagine-chenar funcționează la fel ca și chenarele obișnuite, împachetând textul pe o nouă linie.

ÎNCERCAȚI-VĂ!
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 de colțuri tăiate. Proprietate nouă forma de colt, inclus în Fundaluri și margini CSS Nivelul 4 , ne va scuti de acea durere de cap.Va fi folosit pentru a crea efectul de colțuri tăiate în diverse forme, în combinație cu proprietatea chenar-rază, care este necesară pentru a determina cantitatea de decupare. De exemplu, pentru a descrie colțuri tăiate de 15 pixeli pe toate părțile unei imagini, acest cod simplu ar fi suficient:

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

Citește și

În acest articol, vă vom spune despre 3 tehnici CSS rapide și ușoare, pe care îl puteți folosi pentru a afișa doar o parte a imaginii de pe pagina dvs.

Toate metodele folosite aici au nevoie de fapt de doar câteva rânduri css cod. Totuși, aceasta nu este circumcizie în cel mai adevărat sens al cuvântului ( css nu o pot face încă), ascundem și arătăm doar partea din imagine pe care vrem să o vedem.

Aceste tehnici pot fi foarte utile dacă doriți să redimensionați o imagine la o anumită dimensiune, adică doriți să creați, de exemplu, previzualizarea acesteia (o copie mai mică a imaginii) în secțiunea de știri sau ceva similar.

Tehnica 1 - Utilizarea marjelor negative ( Marje negative)

Dacă nu aveți chef să utilizați marjele negative, vă sugerăm să utilizați tehnica №2 . Include un părinte (paragraf) care are o lățime și o înălțime specifice. Acest paragraf are proprietatea poziționare setată la relativă. Lățimea și înălțimea definesc dimensiunile câmpului afișat. Iar pentru o poză plasată în interiorul unui paragraf, proprietatea poziționare setat la absolut. Apoi putem folosi proprietăți topși stânga aranjați imaginea așa cum dorim, în procesul determinând ce parte a imaginii să arătăm și care nu.

HTML identic cu codul din tehnica anterioară:

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

a decupa ( plutește la stânga ; marja: . 5em 10px. 5em 0; debordare: ascuns /* asta e important */ pozitia : relativa ; /* si asta e important */ chenar: 1px solid #ccc; latime: 200px inaltime: 120px; Decupați imaginea( poziție: absolută; sus : - 40px ; stânga: -50px

Tehnica 3 - Utilizarea proprietății de feliere ( Proprietatea clipului)

Această tehnică ar trebui să fie cea mai ușoară, așa cum proprietatea clipului definește partea elementului de afișat. Pare o soluție perfectă, dar există un singur zgomot: element decupat trebuie pozitionat absolut. Pentru a putea folosi un element, trebuie să adăugăm un element suplimentar, să calculăm dimensiunea zonei vizibile a imaginii, să adăugăm această dimensiune la părinte, să folosim părintele... Multă muncă, nu este nu-i asa?

O, altă problemă: dimensiunea elementului decupat nu se reduce la valoarea decupării, ci rămâne la dimensiunea inițială (poza din afara decupării este pur și simplu ascunsă). Trebuie să folosim poziționarea absolută pentru a muta fereastra în colțul din stânga sus al părintelui.

Cu toate acestea, nu se poate lăsa nemenționat proprietatea de feliere. Și din nou codul...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "șablon css" / > < / a > < / div >

Vlad Merjevici

În ciuda faptului că monitoarele cu diagonale mari devin din ce în ce mai accesibile, iar rezoluția lor crește constant, uneori există o sarcină de a încadra mult text într-un spațiu limitat. De exemplu, acest lucru poate fi necesar pentru versiunea 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ânduri lungi de text, lăsând doar începutul propoziției. Deci vom aduce interfața într-o formă compactă și vom reduce cantitatea de informații de ieșire. Tăierea liniilor î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 cu mouse-ul peste el. Apoi, luați în considerare metodele de tăiere a textului cu foarfece imaginare.

Într-adevăr, se reduce la utilizarea proprietății overflow cu o valoare ascunsă. Diferențele constau doar în afișarea diferită a textului nostru.

Folosind overflow

Pentru ca proprietatea overflow să se arate cu textul în toată splendoarea sa, trebuie să anulăm împachetarea textului folosind spații albe cu valoarea nowrap . Dacă acest lucru nu se face, atunci nu va exista niciun efect de care avem nevoie, se vor adăuga cratime la text și acesta va fi afișat în întregime. 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

Rezultatul acestui exemplu este prezentat în Fig. unu.

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

După cum se poate observa din figură, există un singur dezavantaj în general - nu este evident că textul are o continuare, așa că utilizatorul trebuie să fie conștient de acest lucru. Pentru aceasta, se folosește de obicei un gradient sau elipse.

Adăugarea unui gradient la text

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

Orez. 2. Text degradat

Exemplul 2 arată cum să creați acest efect. Stilul elementului în sine va rămâne practic același, dar gradientul în sine va fi adăugat 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 principale (exemplul 2). Este ușor să schimbați lățimea gradientului prin lățime, puteți ajusta și 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

Arpegiul intra-discret transformă poligama, aceasta este verticala unică în țesătura polifonică ultra-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 PNG-24.

Această metodă funcționează doar cu fundaluri solide, iar în cazul unei imagini de fundal, gradientul peste text va ieși în evidență.

punctele de suspensie la sfârșitul textului

O elipsă poate fi, de asemenea, utilizată în locul unui gradient la sfârșitul textului decupat. 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 starea ei neclară până acum. Această proprietate pare să fie inclusă în CSS3, dar codul cu ea nu trece validarea.

Exemplul 3 arată utilizarea proprietății text-overflow cu o valoare de elipsă , care adaugă o elipsă. Când mutați cursorul mouse-ului peste text, acesta este afișat în întregime și evidențiat în culoarea de fundal.

Exemplul 3: Utilizarea text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Inconștientul provoacă contrast, acesta este etichetat de Lee Ross drept o eroare fundamentală de atribuire care poate fi urmărită în multe experimente.

Rezultatul acestui exemplu este prezentat în Fig. 3.

Orez. 3. Text cu puncte de suspensie

Marele plus al acestor metode este faptul că gradientul și punctele de suspensie nu sunt afișate dacă textul este scurt și se încadrează în întregime în zona specificată. Deci, textul va fi redat normal atunci când este complet vizibil pe ecran și decupat atunci când lățimea elementului este redusă.