Përmbajtja e klipit div. Prisni tekstin me një ose shumë rreshta sipas lartësisë me shtimin e elipsës

Përshëndetje të gjithëve, emri im është Anna Blok dhe sot do të flasim se si të presim imazhe pa përdorur programe grafike.

Ku mund të jetë i dobishëm?

Para së gjithash, në faqet ku përmbajtja me imazhe, ka shumë të ngjarë, nuk do të pritet për t'iu përshtatur ndonjë blloku të veçantë.

Një shembull i mrekullueshëm: blog në WordPress.

Le të themi se dëshironi që kopertina e artikullit tuaj të ketë një raport pamjeje (katrore) 1:1. Veprimet tuaja:

1. Shkarkoni një foto të përshtatshme nga Interneti;
2. Pritini atë në Photoshop në përmasat e dëshiruara;
3. Publikoni një artikull.

Kur vizitoni faqen, do të shihni rezultatin që prisnit.

Por, supozoni se keni harruar të preni imazhin në Photoshop dhe keni ngarkuar një imazh të rastësishëm si kopertinë nga Interneti, çfarë do të ndodhë atëherë?! Kjo është e drejtë, faqosja do të prishet. Dhe nëse nuk keni përdorur fare CSS, atëherë një imazh me rezolucion HD mund të bllokojë plotësisht të gjithë pamjen e tekstit. Prandaj, është e rëndësishme të jeni në gjendje të shkurtoni imazhe duke përdorur stilet CSS.

Le të shohim situata të ndryshme se si kjo mund të zbatohet jo vetëm me CSS, por edhe me SVG.

Shembulli 1

Le të përpiqemi të presim një imazh që vendoset duke përdorur imazhin e sfondit. Le të krijojmë disa shënime HTML

Le të kalojmë te stilimi CSS. Ne shtojmë një imazh përmes imazhit të sfondit, specifikojmë kornizat për imazhin tonë, vendosim në qendër imazhin duke përdorur pozicionin e sfondit dhe vendosim madhësinë e sfondit:

jpg); sfond-pozicioni: qendër-qendër; madhësia e sfondit: kopertina; gjerësia: 300 px; lartësia: 300 px; )

Kjo ishte metoda e parë dhe më e lehtë për prerjen e një imazhi. Tani le të shohim shembullin e dytë.

Shembulli 2

Supozoni se kemi të njëjtin enë kuti brenda së cilës ka një etiketë img me një imazh që do ta stilojmë tani.

Ne gjithashtu do ta vendosim imazhin tonë në qendër në lidhje me objektin që do të krijojmë. Dhe ne përdorim një veti që përdoret mjaft rrallë: objekt-fit .

Kutia ( pozicioni: relative; tejmbushja: fshehur; gjerësia: 300 px; lartësia: 300 px; ) .box img ( pozicioni: absolut; lart: 50%; majtas: 50%; transformimi: përkthe (-50%,-50%); gjerësia: 300 px; lartësia: 300 px; përshtatja e objektit: kopertina; )

Për mendimin tim kjo është metoda më e mirë. Është ideale për bloget nëse përdorni imazhe për postime me përmasa krejtësisht të ndryshme.

Mësoni më shumë rreth HTML dhe CSS këtu:

Shembulli 3

Ne gjithashtu mund të krijojmë prerje për imazhet në këtë moment nëse i vendosim ato në elementët SVG. Le të marrim një rreth si shembull. Ne mund të krijojmë SVG duke përdorur etiketa. Krijoni një etiketë mbështjellëse svg brenda së cilës do të jetë një etiketë rrethi dhe një etiketë modeli. Në etiketën e modelit shkruajmë etiketën e imazhit. Në të, ne specifikojmë atributin xlink:href dhe shtojmë një imazh. Ne gjithashtu do të shtojmë atributet gjerësi dhe lartësi. Por kjo nuk është e gjitha. Ne do të duhet të shtojmë një vlerë plotësuese. Për ta bërë punën tonë të plotë, ne do të shtojmë një atribut ndihmës ruajtësAspectRatio në etiketën e imazhit, i cili do të na lejojë të mbushim imazhin tonë "nga dhe në" rreth rrethit.

Nuk mund ta quaj këtë metodë të përgjithshme. Por mund të përdoret në raste të jashtëzakonshme. Për shembull, nëse prekim temën e një blogu, atëherë në mënyrë ideale një metodë e tillë mund të përshtatet në avatarin e autorit që shkruan artikullin.

Mësoni më shumë rreth HTML dhe CSS këtu:

Rezultatet:
Ne kemi mbuluar 3 metoda për prerjen e imazheve në faqet e internetit: përdorimin e imazhit të sfondit , përdorimin e etiketës img dhe svg-në e lidhur me modelin me futjen e bitmap duke përdorur etiketën e imazhit. Nëse dini ndonjë metodë tjetër për prerjen e një imazhi duke përdorur SVG, atëherë ndajini ato në komente. Jo vetëm për mua, por edhe për të tjerët, do të jetë e dobishme të mësoni rreth tyre.

Mos harroni të bëni pyetjet tuaja në lidhje me paraqitjen ose zhvillimin e pjesës së përparme profesionistëve në FrontendHelp në internet.

Ekziston një tekst me gjatësi arbitrare që duhet të shfaqet brenda një blloku me lartësi dhe gjerësi fikse. Në këtë rast, nëse teksti nuk përshtatet plotësisht, duhet të shfaqet një fragment teksti që përshtatet plotësisht në bllokun e specifikuar, pas së cilës vendoset elipsa.

Një detyrë e tillë është mjaft e zakonshme, në të njëjtën kohë, nuk është aq e parëndësishme sa duket.

Variant për tekst me një rresht në CSS

Në këtë rast, mund të përdorni veçorinë text-overflow: elipsis. Në këtë rast, kontejneri duhet të ketë pronën vërshoj të barabartë i fshehur ose klip

Blloku (gjerësia: 250 px; hapësira e bardhë: nowrap; tejmbushje: e fshehur; tejmbushja e tekstit: elipsë;)

Variant për tekst me shumë rreshta në CSS

Mënyra e parë për të prerë tekstin me shumë rreshta duke përdorur vetitë CSS është aplikimi i pseudo-elementeve : më parë Dhe : pas. Le të fillojmë me shënimin HTML

Dhe tani vetë pronat

Kutia (përmbytja: e fshehur; lartësia: 200 px; gjerësia: 300 px; lartësia e rreshtit: 25 px;) .kutia: para (përmbajtja: ""; float: majtas; gjerësia: 5 px; lartësia: 200 px; > *:st. -fëmijë (float: djathtas; gjerësia: 100%; margjina-majtas: -5 px;) .box:after (përmbajtja: "\02026"; madhësia e kutisë: përmbajtje-kutia; float: djathtas; pozicioni: relative; lart: -25px; majtas: 100%; gjerësia: 3em; margjina-majtas: -3em; mbushje-djathtas: 5px; rreshtimi i tekstit: djathtas; madhësia e sfondit: 100% 100%; sfondi: gradient linear (djathtas, rgba (255 , 255 , 255 , 0 ), e bardhë 50%, e bardhë );)

Një mënyrë tjetër është përdorimi i veçorisë kolonë-width, e cila përcakton gjerësinë e kolonës për tekstin me shumë rreshta. Vërtetë, kur përdorni këtë metodë, nuk do të funksionojë të instaloni një elipsë në fund. HTML:

Blloku (mbushja: e fshehur; lartësia: 200 px; gjerësia: 300 px;)

Mënyra e tretë për të zgjidhur tekstin me shumë rreshta në CSS është për shfletuesit Kompleti në internet. Në të, do të duhet të përdorim disa veti specifike menjëherë me prefiksin -kit në internet. Kryesorja është -webkit-line-clamp e cila ju lejon të specifikoni numrin e linjave që do të shfaqen në bllok. Zgjidhja është e bukur, por mjaft e kufizuar për shkak të punës së saj në një grup të kufizuar shfletuesish

Blloko (mbushje: e fshehur; tekst-mbushje: elipsë; shfaqja: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertikale;)

Variant për tekst me shumë rreshta në JavaScript

Këtu, përdoret një bllok shtesë i padukshëm, në të cilin fillimisht vendoset teksti ynë, pas së cilës fshihet një karakter në një kohë derisa lartësia e këtij blloku të bëhet më e vogël ose e barabartë me lartësinë e bllokut të dëshiruar. Dhe në fund teksti zhvendoset në bllokun origjinal.

var bllok = dokument . querySelector(".block"), text = block. innerHTML, klon = dokument. createElement ("div"); klon. stil. pozicion = "absolut" ; klon. stil. dukshmëri = "i fshehur" ; klon. stil. gjerësi = bllok . Gjerësia e klientit + "px"; klon. innerHTML = tekst; dokument. trup . appendChild(klon); var l = tekst . gjatësia - 1; për (; l >= 0 && klon. clientHeight > bllok. clientHeight; -- l) (klon. innerHTML = tekst. substring (0, l) + "..." ;) bllok. innerHTML = klon . innerHTML ;

Kjo është në formën e një shtojce për jQuery:

(funksioni ($) ( var truncate = funksion (el ) ( var tekst = el . tekst (), lartësi = el . lartësi (), klon = el . klon (); klon . css (( pozicioni : "absolut" , dukshmëria: "e fshehur", lartësia: "auto")); el .pas (klon); var l = teksti. gjatësia - 1; për (; l >= 0 && klon. lartësia () > lartësia; -- l) (klon . tekst (tekst . nënvarg (0 , l ) + "..."); ) el. tekst (klon . tekst ()); klon . heq (); ); $ . fn . truncateText = funksion () (kthejeni këtë . secilin (funksion () ( shkurtoj ($ (this )); )); )(jQuery ));

Problem

Jo vetëm që prerja e këndeve është një mënyrë e shpejtë për t'i kryer gjërat, por është gjithashtu një opsion stilimi popullor si në printim ashtu edhe në dizajnin e uebit. Më shpesh, ajo përfshin prerjen e një ose më shumë qosheve të enës në një kënd prej 45 °. Kohët e fundit, për shkak të faktit se skeuomorfizmi filloi të humbasë terren ndaj dizajnit të sheshtë, ky efekt është veçanërisht i popullarizuar. Kur qoshet priten vetëm në njërën anë, duke zënë secila 50% të lartësisë së elementit, kjo krijon një formë në formë shigjete, e cila gjithashtu përdoret shpesh në lundrimet e butonave dhe bukës.

Megjithatë, nuk ka ende mjete të mjaftueshme në CSS për të krijuar këtë efekt me zgjidhje të thjeshta dhe të drejtpërdrejta me një linjë. Për shkak të kësaj, shumë zhvillues priren të përdorin imazhe të sfondit, ose duke mbuluar qoshet e prera me trekëndësha (në një sfond me ngjyra të forta), ose duke krijuar të gjithë sfondin me një ose më shumë imazhe ku qoshet tashmë janë prerë. Natyrisht, këto metoda janë plotësisht jofleksibile, të vështira për t'u mirëmbajtur dhe rrisin vonesën për shkak të kërkesave shtesë për HTTP dhe madhësisë së përgjithshme të skedarit të faqes në internet.

Një shembull i një faqe interneti ku këndi i prerë (poshtë majtas i fushës gjysmë transparente Find & Book) përshtatet në mënyrë të përkryer me dizajnin

Zgjidhje

Një zgjidhje e mundshme vjen nga gradientët e plotfuqishëm CSS. Le të themi se duam vetëm një cep të prerë, të themi këndin e poshtëm djathtas. Truku është të përfitoni nga aftësia e gradientëve për të marrë drejtimin e këndit (p.sh. 45 gradë) dhe pozicionet e kufijve të kalimit të ngjyrave në vlera absolute, të cilat nuk ndryshojnë kur dimensionet e përgjithshme të elementit të cilit i përket sfondi janë. ndryshuar. Nga sa më sipër rezulton se një gradient linear do të jetë i mjaftueshëm për ne.

Ne do të shtojmë një kufi transparent të zbehjes së ngjyrave për të krijuar këndin e prerë dhe një kufi tjetër të zbehjes së ngjyrave në të njëjtin pozicion, por me ngjyrën që përputhet me sfondin. Kodi CSS do të ishte si vijon (për një cep 15 px):

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

E thjeshtë, apo jo? E shihni rezultatin në figurë.

Teknikisht, nuk na duhet as njoftimi i parë. Ne e kemi shtuar atë vetëm si një zgjidhje: nëse gradientët CSS nuk mbështeten, atëherë deklarata e dytë do të shpërfillet, kështu që të paktën do të marrim një sfond me ngjyra të forta. Tani supozoni se duam dy qoshe të prera, le të themi të dyja ato të poshtme. Kjo nuk mund të bëhet me një gradient, kështu që do të na duhen dy. Mendimi juaj i parë mund të jetë diçka si kjo:

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

Megjithatë, kjo nuk funksionon. Si parazgjedhje, të dy gradientët zënë të gjithë zonën e elementit, kështu që ato errësojnë njëri-tjetrin. Ne duhet t'i bëjmë ato më të vogla duke kufizuar secilin në gjysmën e elementit me madhësinë e sfondit:
sfond: #58a;

madhësia e sfondit: 50% 100%

Rezultatin mund ta shihni në foto.

Edhe pse kemi aplikuar një madhësi të sfondit, gradientët ende mbivendosen me njëri-tjetrin. Arsyeja është se kemi harruar të çaktivizojmë përsëritjen e sfondit, kështu që secili prej sfondeve përsëritet dy herë. Rrjedhimisht, njëri prej sfondeve ende errëson tjetrin, por këtë herë për shkak të përsëritjes. Versioni i ri i kodit duket si ky:
sfond: #58a;
sfond: linear-gradient(-45deg, transparent 15px, #58a 0) djathtas, linear-gradient(45deg, transparent 15px, #655 0) majtas;
madhësia e sfondit: 50% 100%

Ju mund ta shihni rezultatin në foto dhe sigurohuni që është - më në fund! - duke punuar! Me siguri tashmë e keni marrë me mend se si ta aplikoni këtë efekt në të katër anët. Do t'ju duhen katër gradientë dhe kod si më poshtë:

sfond: #58a;
sfond: gradient linear (135 gradë, transparent 15 px, #58a 0) lart majtas,

gradient linear (-135 gradë, transparent 15 px, #655 0) lart djathtas,

gradient linear (-45 gradë, transparent 15 px, #58a 0) poshtë djathtas,

gradient linear (45 gradë, transparent 15 px, #655 0) poshtë majtas;
madhësia e sfondit: 50% 50%;
sfond-përsërit: pa përsëritje;

KËSHILLA
Ne përdorëm ngjyra të ndryshme (#58a dhe #655) për ta bërë më të lehtë korrigjimin. Në praktikë, të dy gradientët do të kenë të njëjtën ngjyrë.
Por problemi me kodin e mëparshëm është se është i vështirë për t'u ruajtur. Kërkon pesë modifikime për të ndryshuar ngjyrën e sfondit dhe katër për të ndryshuar vlerën e këndit. Një miks i krijuar me një paraprocesor mund të zvogëlojë numrin e përsëritjeve. Ja se si do të dukej ky kod në SCSS:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
sfond: $bg;
sfond:
gradient linear (135 gradë, transparent $tl, $bg 0)
majtas lart,
gradient linear (225 gradë, transparent $tr, $bg 0)
lart djathtas,
gradient linear (-45 gradë, transparent $br, $bg 0)
poshtë djathtas,
gradient linear (45 gradë, transparent $bl, $bg 0)
poshtë majtas;
madhësia e sfondit: 50% 50%;
sfond-përsërit: pa përsëritje;
}

Pastaj, kur është e nevojshme, mund të thirret, siç tregohet më poshtë, me 2-5 argumente:
SCSS
@përfshi qoshet e pjerrëta (#58a, 15px, 5px);
Në këtë shembull, do të përfundojmë me një element që ka këndet e tij lart majtas dhe poshtë djathtas të prera me 15 pikselë dhe qoshet e tij lart djathtas dhe poshtë majtas me 5 px, ngjashëm me mënyrën se si funksionon rreze-kufi kur ne specifikojmë më pak se katër vlera. Kjo është e mundur sepse në përzierjen tonë SCSS ne gjithashtu kujdesemi për vlerat e paracaktuara për argumentet - dhe po, këto vlera të paracaktuara mund t'u referohen edhe argumenteve të tjerë.
PROVO VETEN!
http://play.csssecrets.io/bevel-corners-gradients

Qoshet e prera të lakuara

Një shembull i shkëlqyer i përdorimit të qosheve të prera të lakuara në një faqe interneti http://g2geogeske.com projektuesi i ka bërë një element qendror të dizajnit: ato janë të pranishme në navigim, në përmbajtje, madje edhe në fund.
Një variacion i metodës së gradientit ju lejon të krijoni qoshe të prera të lakuara, një efekt që shumë njerëz e quajnë "rrezja e kufirit të brendshëm" sepse duket si një version i përmbysur i qosheve të rrumbullakosura. Dallimi i vetëm është përdorimi i gradientëve radialë në vend të atyre linearë:
sfond: #58a;
sfondi: gradient radial (rreth lart majtas, transparent 15 px, #58a 0) lart majtas,

gradient radial (rreth lart djathtas, transparent 15 px, #58a 0) lart djathtas,

gradient radial (rreth poshtë djathtas, transparent 15 px, #58a 0) poshtë djathtas,

gradient radial (rreth poshtë majtas, transparent 15 px, #58a 0) poshtë majtas;
madhësia e sfondit: 50% 50%;
sfond-përsërit: pa përsëritje;

Ashtu si me teknikën e mëparshme, madhësia e këndit mund të kontrollohet nga pozicionet e kufijve të tranzicionit të ngjyrave, dhe përzierja mund ta bëjë këtë kod edhe më të mirëmbajtur.

PROVO VETEN!
http://play.csssecrets.io/scoop-corners

Zgjidhje me SVG inline dhe imazh-kufi

Ndërsa zgjidhja e bazuar në gradient funksionon, ajo ka disa të meta:
kodi është shumë i gjatë dhe plot përsëritje. Në rastin më të zakonshëm, kur duhet të presim të katër qoshet me të njëjtën sasi, ndryshimi i kësaj sasie kërkon katër modifikime në kod.

Në mënyrë të ngjashme, ndryshimi i ngjyrës së sfondit kërkon gjithashtu katër modifikime, dhe nëse përfshini një zgjidhje tjetër, atëherë të pesë; animimi i një ndryshimi në madhësinë e një këndi të prerë është tepër i vështirë dhe madje i pamundur në disa shfletues. Për fat të mirë, në varësi të rezultatit të dëshiruar, ne mund të përdorim disa metoda të tjera. Njëri prej tyre ka të bëjë me bashkimin kufiri-imazh me një kod SVG të vargut, në të cilin krijohen qoshet.

Duke ditur se si funksionon kufiri-imazh(nëse keni nevojë të rifreskoni këtë njohuri në kujtesën tuaj, do të gjeni një aluzion) a mund ta imagjinoni tashmë se si kërkohet SVG-Kodi?

Meqenëse dimensionet e përgjithshme nuk janë të rëndësishme për ne (imazhi kufitar kujdeset për shkallëzimin, dhe imazhet SVG shkallëzohen në mënyrë të përsosur pavarësisht nga dimensionet - grafika vektoriale qofshin të bekuar!), Të gjitha dimensionet mund të vendosen në një për të funksionuar me vlera më të përshtatshme dhe më të shkurtra . Vlera e këndit të prerjes do të jetë e barabartë me një, dhe anët e drejta do të jenë gjithashtu të barabarta me një. Rezultati (i zmadhuar për lexueshmëri). Kodi i kërkuar për këtë tregohet më poshtë:
kufiri: 15px transparent;


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

Vini re se madhësia e hapit të prerjes është 1 . Nuk do të thotë 1 piksel; madhësia aktuale përcaktohet nga sistemi i koordinatave të skedarit SVG (kjo është arsyeja pse ne nuk kemi njësi). Nëse do të përdornim përqindje, atëherë do të duhej të përafronim 1/3 e figurës me një vlerë fraksionale, si 33,34%. Është gjithmonë e rrezikshme të përdorësh vlera të përafërta, pasi vlerat mund të rrumbullakosen me shkallë të ndryshme saktësie në shfletues të ndryshëm. Dhe duke iu përmbajtur njësive të sistemit koordinativ të skedarit SVG, ne i shpëtojmë vetes dhimbjen e kokës që vjen me gjithë atë rrumbullakim.

Siç mund ta shihni, qoshet e prera janë të pranishme, por sfondi jo. Ka dy mënyra për të zgjidhur këtë problem: ose përcaktoni një sfond, ose shtoni fjalën kyçe mbushje në deklaratën e imazhit të kufirit në mënyrë që elementi i prerjes në qendër të mos hidhet poshtë. Në shembullin tonë, ne preferojmë të përcaktojmë një sfond të veçantë, pasi ky përkufizim do të shërbejë gjithashtu si një zgjidhje për shfletuesit që nuk e mbështesin këtë zgjidhje.

Përveç kësaj, ju ndoshta keni vënë re se qoshet e prera tani janë më të vogla se me teknikën e mëparshme, dhe kjo mund të jetë konfuze. Në fund të fundit, ne vendosëm gjerësinë e kufirit në 15 px! Arsyeja është se në zgjidhjen e gradientit, këto 15 piksele janë matur përgjatë vijës së gradientit, e cila është pingul me drejtimin e gradientit. Megjithatë, gjerësia e kornizës nuk matet diagonalisht, por horizontalisht/vertikalisht.

E ndjen se ku po çoj? Po, po, përsëri teorema e kudondodhur e Pitagorës, të cilën e përdorëm në mënyrë aktive. Diagrami në figurë duhet të sqarojë situatën.

Shkurtimisht, për të arritur të njëjtin rezultat vizual, na duhet një gjerësi kufiri që është 2 herë më e madhe se madhësia që do të përdornim në metodën e gradientit. Në këtë rast, do të jetë një piksel, i cili është më i arsyeshëm për t'u përafërt me 20 pikselë, përveç nëse përballemi me detyrën për ta afruar madhësinë diagonale sa më afër 15 px të lakmuar:

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

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

0,2″/>\
’);
sfond: #58a;
Megjithatë, siç mund ta shihni, rezultati nuk është ai që prisnim.

Ku shkuan qoshet tona të prera me kujdes? Mos ki frikë, padawan i ri, qoshet janë ende atje. Do të kuptoni menjëherë se çfarë ndodhi nëse vendosni një ngjyrë të ndryshme të sfondit, për shembull #655.
Siç tregon figura më poshtë, arsyeja pse qoshet tona janë zhdukur qëndron në sfond: sfondi që përcaktuam më sipër thjesht i errëson ato. Gjithçka që duhet të bëjmë për të rregulluar këtë shqetësim është të përdorim kapësen e sfondit për të parandaluar që sfondi të zvarritet nën zonën e kornizës:
kufiri: 20px transparent;
border-image: 1 url('data:image/svg+xml,\

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

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

Tani problemi është zgjidhur dhe fusha jonë duket saktësisht e njëjtë si më parë. Plus, këtë herë ne mund të ndryshojmë lehtësisht përmasat e qosheve me vetëm një modifikim: thjesht rregulloni gjerësinë e kufirit. Ne madje mund ta animojmë këtë efekt sepse gjerësia e kufirit mbështet animacionin!

Dhe ndryshimi i sfondit tani kërkon dy modifikime në vend të pesë. Gjithashtu, meqenëse sfondi ynë është i pavarur nga efekti i aplikuar në qoshet, ne mund të përcaktojmë një gradient ose ndonjë model tjetër për të, për sa kohë që ngjyra në skajet është ende #58a.

Për shembull, ne përdorim një gradient radial nga ngjyra hsla(0,0%,100%,.2) në transparente. Mbetet vetëm një problem i vogël për të zgjidhur. Nëse imazhi i kufirit nuk mbështetet, atëherë zgjidhja e kthimit nuk kufizohet në mungesën e qosheve të prera. Për shkak se sfondi është i prerë, hapësira midis skajit të fushës dhe përmbajtjes së saj do të ulet. Për ta rregulluar këtë, duhet të vendosim kornizën në të njëjtën ngjyrë që përdorim për sfondin:
kufiri: 20 px solid #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
sfond: #58a;
sfond-klip: mbushje-kuti;

Në shfletuesit ku përkufizimi ynë kufiri-imazhështë i mbështetur, kjo ngjyrë do të shpërfillet, por aty ku imazhi i kufirit nuk funksionon, ngjyra shtesë e kufirit do të sigurojë një zgjidhje më elegante të kthimit. E vetmja pengesë e tij është rritja e numrit të modifikimeve të nevojshme për të ndryshuar ngjyrën e sfondit në tre.
PROVO VETEN!
http://play.csssecrets.io/bevel-corners

Zgjidhja e rrugës së prerjes

Megjithëse zgjidhja e imazhit të kufirit është shumë kompakte dhe ndjek mirë parimet e DRY, ajo imponon disa kufizime. Për shembull, sfondi ynë duhet të jetë ose tërësisht ose të paktën i mbushur me një ngjyrë të fortë përgjatë skajeve.

Por, çka nëse duam të përdorim një lloj tjetër sfondi, si p.sh. një strukturë, model ose gradient linear? Ekziston një metodë tjetër që nuk ka kufizime të tilla, megjithëse, natyrisht, ka kufizime të caktuara në përdorimin e saj.

Mbani mend pronën shtegu i klipit nga sekreti "Si të bëjmë një romb"? Shtigjet e prerjes CSS kanë një veti të mahnitshme: ato ju lejojnë të përzieni vlerat e përqindjes (të cilat ne i përdorim për të specifikuar dimensionet e përgjithshme të një elementi) me vlera absolute, duke ofruar fleksibilitet të jashtëzakonshëm. Për shembull, kodi për një shteg prerjeje që kap një element në formën e një drejtkëndëshi të pjerrët 20 px (i matur horizontalisht) duket si ky:
sfond: #58a;
shtegu i klipit: poligon (
20 px 0, llogaritur (100% - 20 px) 0, 100% 20 px,
100% kalc (100% - 20 px), llogaritje (100% - 20 px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Edhe pse i shkurtër, kjo pjesë e kodit nuk ndjek parimet DRY dhe ky bëhet një nga problemet më të mëdha nëse nuk përdorni një paraprocesor. Në fakt, ky kod është ilustrimi më i mirë i parimit WET i të gjitha zgjidhjeve të pastra CSS të paraqitura në këtë libër, pasi ai kërkon tetë (!) redaktime për të ndryshuar madhësinë e këndit.

Nga ana tjetër, sfondi mund të ndryshohet vetëm me një modifikim, kështu që ne kemi të paktën atë. Një nga avantazhet e kësaj qasjeje është se ne mund të përdorim absolutisht çdo sfond, apo edhe elementë zëvendësues të prerjeve, siç janë imazhet. Figura tregon një imazh të stilizuar me qoshe të prera. Asnjë nga metodat e mëparshme nuk mund të arrijë një efekt të tillë. Përveç kësaj, vetia clip-path mbështet animacionin dhe ne mund të animojmë jo vetëm ndryshimin në madhësinë e këndit, por edhe kalimin midis formave të ndryshme.

Gjithçka që duhet është të përdorni një shteg tjetër prerës. Përveçse është i folur dhe ka mbështetje të kufizuar të shfletuesit, e keqja e kësaj zgjidhjeje është se nëse nuk kujdesemi për mbushjen mjaftueshëm të gjerë, teksti gjithashtu do të jetë i prerë, sepse gjatë prerjes së një elementi, përbërësit e tij nuk merren parasysh. në çfarëdo mënyre. Në të kundërt, metoda e gradientit lejon që teksti thjesht të shtrihet përtej qosheve të prera (sepse ato janë vetëm pjesë e sfondit), ndërsa metoda e imazhit kufitar funksionon njësoj si kufijtë e rregullt, duke e mbështjellë tekstin në një rresht të ri.

PROVO VETEN!
http://play.csssecrets.io/bevel-corners-clipped

KËNDET E PRETUR TË ARDHMEN
Në të ardhmen, nuk do të na duhet t'i drejtohemi gradientëve CSS, prerjes ose SVG për të arritur efektin e këndeve të prera. Pronë e re formë qoshe, të përfshira në Sfondi dhe kufijtë CSS Niveli 4 , do të na shpëtojë atë dhimbje koke.Do të përdoret për të krijuar efektin e këndeve të prera në forma të ndryshme, në kombinim me vetinë kufi-radius, e cila nevojitet për të përcaktuar sasinë e prerjes. Për shembull, për të përshkruar qoshet e prera 15 px në të gjitha anët e një imazhi, ky kod i thjeshtë do të mjaftonte:

kufiri-radius: 15px;
formë qoshe: pjerrësi;

Lexoni gjithashtu

Në këtë artikull, ne do t'ju tregojmë për 3 Teknika të shpejta dhe të thjeshta CSS, të cilin mund ta përdorni për të shfaqur vetëm një pjesë të imazhit në faqen tuaj.

Të gjitha metodat e përdorura këtu në fakt kanë nevojë vetëm për disa rreshta css kodi. Megjithatë, ky nuk është rrethprerje në kuptimin e vërtetë të fjalës ( css nuk mund ta bëjë akoma), thjesht fshihemi dhe tregojmë vetëm pjesën e figurës që duam të shohim.

Këto teknika mund të jenë shumë të dobishme nëse dëshironi të ndryshoni madhësinë e një imazhi në një madhësi të caktuar, d.m.th. dëshironi të krijoni, për shembull, një pamje paraprake (një kopje më të vogël të imazhit) në seksionin e lajmeve ose diçka të ngjashme.

Teknika 1 - Përdorimi i Marzheve Negative ( Marzhet negative)

Nëse nuk ju pëlqen të përdorni marzhe negative, ju sugjerojmë të përdorni teknikën №2 . Ai përfshin një prind (paragraf) që ka një gjerësi dhe lartësi specifike. Ky paragraf ka pronësinë pozicionimi vendosur në relative . Gjerësia dhe lartësia përcaktojnë dimensionet e fushës së shfaqur. Dhe për një foto të vendosur brenda një paragrafi, prona pozicionimi vendosur në absolute . Atëherë mund të përdorim vetitë krye Dhe majtas rregulloni imazhin ashtu siç duam, në procesin e përcaktimit se cila pjesë e imazhit të shfaqet dhe cila jo.

HTML identike me kodin nga teknika e mëparshme:

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

kulture ( noton: majtas; diferenca:. 5em 10px. 5em 0; vërshoj: i fshehur /* kjo eshte e rendesishme */ pozicioni : i afërm ; /* kjo është gjithashtu e rëndësishme */ kufiri: 1px solid #ccc; gjerësia: 200 px lartësia: 120 px; Prit imazhin ( pozicioni : absolut ; sipër: - 40 px; majtas: -50 px

Teknika 3 - Përdorimi i vetive të prerjes ( Prona e klipit)

Kjo teknikë duhet të jetë më e lehta, pasi prona e klipit përcakton pjesën e elementit që do të tregohet. Duket si një zgjidhje perfekte, por ka një pengesë: element i prerë duhet të pozicionohet absolutisht. Që të mund të përdorim një element, duhet të shtojmë një element shtesë, të llogarisim madhësinë e zonës së dukshme të figurës, t'ia shtojmë këtë madhësi prindit, të përdorim prindin... Shumë punë, nuk është nuk është?

Oh, një problem tjetër: madhësia e elementit të prerë nuk reduktohet në vlerën e prerjes, por mbetet në madhësinë e tij origjinale (fotografia jashtë prerjes thjesht fshihet). Ne duhet të përdorim pozicionimin absolut për të lëvizur portën e shikimit në këndin e sipërm majtas të prindit.

Megjithatë, nuk mund të lihet pa përmendur pronë e prerjes. Dhe kështu përsëri kodi ...

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

Vlad Merzheviç

Përkundër faktit se monitorët e mëdhenj diagonale po bëhen më të përballueshëm dhe rezolucioni i tyre po rritet vazhdimisht, ndonjëherë lind detyra për të vendosur shumë tekst në një hapësirë ​​të kufizuar. Për shembull, kjo mund të jetë e nevojshme për versionin celular të faqes ose për një ndërfaqe në të cilën numri i linjave është i rëndësishëm. Në raste të tilla, ka kuptim të ndërpriten rreshtat e gjatë të tekstit, duke lënë vetëm fillimin e fjalisë. Kështu që ne do ta sjellim ndërfaqen në një formë kompakte dhe do të zvogëlojmë sasinë e informacionit dalës. Vetë prerja e linjës mund të bëhet në anën e serverit duke përdorur të njëjtin PHP, por është më e lehtë përmes CSS dhe gjithmonë mund të shfaqësh të gjithë tekstin, për shembull, kur rri pezull mbi të me kursorin e miut. Më pas, merrni parasysh metodat se si të prisni tekstin me gërshërë imagjinare.

Vërtetë ka të bëjë me përdorimin e pronës overflow me një vlerë të fshehur. Dallimet qëndrojnë vetëm në shfaqjen e ndryshme të tekstit tonë.

Përdorimi i tejmbushjes

Në mënyrë që vetia e tejmbushjes të shfaqet me tekstin në të gjithë shkëlqimin e tij, duhet të anulojmë mbështjelljen e tekstit duke përdorur hapësirën e bardhë me vlerën nowrap . Nëse kjo nuk bëhet, atëherë nuk do të ketë efekt që na nevojitet, tekstit do t'i shtohen viza dhe ai do të shfaqet në tërësi. Shembulli 1 tregon se si të shkurtohet teksti i gjatë me një grup të caktuar karakteristikash stili.

Shembulli 1. tejmbushje për tekst

HTML5 CSS3 IE Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Shfaqja e tekstit pas aplikimit të vetive të tejmbushjes

Siç mund të shihet nga figura, në përgjithësi ka vetëm një pengesë - nuk është e qartë se teksti ka një vazhdim, kështu që përdoruesi duhet të jetë i vetëdijshëm për këtë. Për këtë, zakonisht përdoret një gradient ose elipsë.

Shtimi i një gradienti në tekst

Për ta bërë të qartë se teksti në të djathtë nuk mbaron, mund të aplikoni një gradient nga ngjyra transparente në sfond në krye të tij (Fig. 2). Kjo do të krijojë efektin e shpërbërjes graduale të tekstit.

Oriz. 2. Teksti i gradientit

Shembulli 2 tregon se si të krijohet ky efekt. Stili i vetë elementit do të mbetet praktikisht i njëjtë, por vetë gradienti do të shtohet duke përdorur pseudo-elementin ::after dhe CSS3. Për ta bërë këtë, ne futim një pseudo-element bosh përmes vetive të përmbajtjes dhe aplikojmë një gradient në të me parashtesa të ndryshme për shfletuesit kryesorë (shembulli 2). Është e lehtë të ndryshoni gjerësinë e gradientit përmes gjerësisë, gjithashtu mund të rregulloni shkallën e transparencës duke zëvendësuar vlerën 0.2 me tuajën.

Shembulli 2: Gradient mbi tekst

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Arpezhi intradiskret transformon poliranzhin, kjo është vertikalja e njëhershme në pëlhurën polifonike ultra-polifonike.

Kjo metodë nuk funksionon në Internet Explorer deri dhe duke përfshirë versionin 8.0 sepse nuk mbështet gradientët. Por ju mund të braktisni CSS3 dhe të bëni një gradient në mënyrën e vjetër, përmes një imazhi PNG-24.

Kjo metodë funksionon vetëm me sfonde të forta, dhe në rastin e një imazhi të sfondit, gradienti mbi tekstin do të dallohet.

elipsë në fund të tekstit

Një elipsë mund të përdoret gjithashtu në vend të një gradient në fund të tekstit të prerë. Për më tepër, ai do të shtohet automatikisht duke përdorur veçorinë text-overflow. Kuptohet nga të gjithë shfletuesit, duke përfshirë versionet më të vjetra të IE, dhe e vetmja pengesë e kësaj veçorie është statusi i saj i paqartë deri më tani. Kjo veçori duket se është përfshirë në CSS3, por kodi me të nuk kalon verifikimin.

Shembulli 3 tregon përdorimin e vetive text-overflow me vlerën e elipsës, e cila shton një elipsë. Kur lëvizni kursorin e miut mbi tekst, ai shfaqet në tërësi dhe theksohet në ngjyrën e sfondit.

Shembulli 3: Përdorimi i tekstit-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Pavetëdija shkakton kontrast, kjo është etiketuar nga Lee Ross si një gabim themelor i atribuimit që mund të gjurmohet në shumë eksperimente.

Rezultati i këtij shembulli është paraqitur në Fig. 3.

Oriz. 3. Teksti me elipsë

Avantazhi i madh i këtyre metodave është se gradienti dhe elipsi nuk shfaqen nëse teksti është i shkurtër dhe përshtatet plotësisht në zonën e specifikuar. Kështu që teksti do të paraqitet si normal kur të jetë plotësisht i dukshëm në ekran dhe do të pritet kur gjerësia e elementit zvogëlohet.