Këto metoda mund të jenë shumë të dobishme nëse ju duhet të shkallëzoni një imazh në një madhësi të caktuar ose të krijoni një pamje paraprake, për shembull, në një burim lajmesh, etj.
Metoda 1: Përdorni marzhe negative
Imazhi duhet të vendoset në një element prind, në rastin tonë një div. Elementi mëmë duhet të jetë një element i lëvizshëm (ose me gjerësia e dhënë). Metoda nuk do të funksionojë në elementë të nivelit të bllokut ose me gjerësi të plotë.
Vendosni kufijtë negativë për të katër anët: lart (lart), djathtas (djathtas), poshtë (poshtë) dhe majtas (majtas). Kufijtë negative përcaktojnë se sa është prerë imazhi në elementin prind në çdo drejtim. Pastaj vendosim pronën elementi prind vërshimi (mbivendosje) në të fshehur (fsheh) për të fshehur fushat që janë prapa zonës së imazhit të prerë.
<div class="crop">
Pritini
noton: majtas;
vërshoj: i fshehur
Pritini img
diferenca: -70px -50px -160px -175px;
Metoda 2: Përdorimi i pozicionimit absolut
Duke përdorur këtë metodë, ne vendosim gjerësinë dhe lartësinë e elementit prind, vetia e pozicionit (pozicionimi) vendoset në relative (relative). Gjerësia dhe lartësia përcaktojnë dimensionet e fushës së shfaqur. Për imazhin brenda elementit prind, vendosni vetinë e pozicionimit në absolute (absolute). Më pas, duke përdorur veçoritë sipër (lart) dhe majtas (majtas), vendosim se cilën pjesë të imazhit të shfaqet.
<div class="crop">
Pritini
noton: majtas;
vërshoj: i fshehur
pozicioni : i afërm ;
gjerësia: 270 px
lartësia: 260 px
Pritini img
pozicioni : absolut ;
sipër: -70 px;
majtas: -175 px;
Metoda 3: Përdorni vetinë clip
Kjo metodë është më e thjeshta, sepse vetia clip përcakton pjesën e elementit që duhet të shfaqet. Por kjo metodë ka dy të meta.
Së pari, elementi i prerë duhet të pozicionohet absolutisht. Prandaj, do të duhet të shtojmë një element shtesë, të llogarisim madhësinë e zonës së dukshme të figurës, të shtojmë këtë madhësi dhe të vendosim pronë notuese prind.
Së dyti, madhësia e zonës së dukshme nuk zvogëlohet në madhësinë e pjesës së prerë, por mbetet e barabartë me madhësinë i gjithë imazhi (zona jashtë prerjes është e fshehur vetëm). Ne duhet të përdorim pozicionim absolut për të zhvendosur zonën e dukshme në këndin e sipërm majtas të prindit.
<div class="crop">
Pritini
noton: majtas;
pozicioni : i afërm ;
Përshkrim
Vetia e klipit përcakton zonën e një elementi të pozicionuar ku do të shfaqet përmbajtja e tij. Çdo gjë që nuk përshtatet në këtë zonë do të pritet dhe do të bëhet e padukshme. Në ky moment vetëm formë e aksesueshme zona është një drejtkëndësh. Gjithçka tjetër mbetet vetëm në ëndrra. klipi funksionon vetëm në elementë të pozicionuar absolutisht.
Sintaksë
klip: drejt (Y1, X1, Y2, X2) | auto | trashëgojnë
vlerat
Vlerat janë distanca nga buza e elementit në zonën e prerjes, e cila është vendosur njësitë css- pikselë (px), em, etj. Nëse skaji i zonës duhet të lihet i pandryshuar, duhet të vendosni automatikisht, pozicioni i vlerave të mbetura tregohet në fig. një.
Oriz. 1. Vlerat e pronave të klipit
HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Rezultati ky shembull treguar në fig. 2.
Oriz. 2. Aplikoni klipin në shfletuesin Safari
Modeli i objektit
dokument.getElementById("elementID").style.clip
Shfletuesit
Internet Explorer deri në dhe duke përfshirë versionin 7.0, ai funksionon me një shënim tjetër, në të cilin vlerat e koordinatave ndahen me një hapësirë në vend të presjes: rect (40px auto 40px) . Gjithashtu, Internet Explorer deri dhe duke përfshirë versionin 7.0 nuk e mbështet vlerën trashëgimore.
Problem
Prerja e qosheve nuk është vetëm mënyrë të shpejtë arritja e një qëllimi, por edhe një opsion stilimi popullor si në printim ashtu edhe në ueb dizajn. Më shpesh, ajo përfshin prerjen e një ose më shumë qosheve të enës në një kënd prej 45 °. NË Kohët e fundit, për faktin se skeuomorfizmi filloi të humbasë terren dizajn i sheshtë, ky efekt është veçanërisht i popullarizuar. Kur qoshet priten vetëm në njërën anë dhe çdo cep zë 50% të lartësisë së elementit, kjo krijon një formë në formë shigjete, e cila përdoret gjithashtu shpesh në dizajnimin e butonave dhe elementëve të lundrimit me thërrime buke.
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 imazhet e sfondit: ose mbuloni qoshet e prera me trekëndësha (në një sfond të vetëm me ngjyra), ose krijoni 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ë Zgjidhja e mundshme na ofroni 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.
do të shtojmë kufi transparent kalimi i ngjyrës për të krijuar një kënd të prerë dhe një kufi tjetër të tranzicionit të ngjyrës në të njëjtin pozicion, por me një ngjyrë 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? Rezultatin e shihni në foto.
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. Një version i ri kodi 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 kemi përdorur ngjyra të ndryshme(#58a dhe #655) për korrigjim më të lehtë. 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. Ajo kërkon pesë modifikime për të ndryshuar ngjyrë 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 VETE!
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ë e quajnë "rrezja e kufirit të brendshëm" sepse duket si një version i përmbysur. qoshe 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 VETE!
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.
Po kështu, kërkohen edhe katër modifikime për të ndryshuar ngjyrën e sfondit dhe jepen zgjidhje rezervë, pastaj 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?
Sepse dimensionet nuk janë të rëndësishme për ne (imazhi kufitar kujdeset për shkallëzimin, dhe imazhet SVG shkallëzohen në mënyrë perfekte pavarësisht nga madhësia - beko Grafika vektoriale!), të gjitha madhësitë mund të barazohen me një për të funksionuar me vlera më të përshtatshme dhe 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'u drejtohesh vlerave të përafërta, pasi në shfletues të ndryshëm vlerat mund të rrumbullakosen në shkallë të ndryshme saktësie. 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. Ky problem mund të zgjidhet në dy mënyra: ose përcaktoni sfondin ose shtoni fjalë kyçe plotësoni deklaratën e imazhit të kufirit në mënyrë që elementi i prerjes në qendër të mos hidhet poshtë. Në shembullin tonë, do të ishte më mirë 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ë përafrimi më i arsyeshëm 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, duke qenë 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 VETE!
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.
Po sikur të 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);
Pavarësisht shkurtësisë së tij, kjo pjesë e kodit nuk i përmbahet parimeve të DRY dhe bëhet një nga më probleme të mëdha nëse nuk jeni duke përdorur një paraprocesor. Në fakt, ky kod është ilustrimi më i mirë i parimit WET të të gjitha zgjidhjeve CSS e pastër paraqitur në këtë libër, sepse për të ndryshuar madhësinë e këndit këtu duhet të bëni sa tetë (!) redaktime.
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ç fjalëve dhe mbështetje të kufizuar shfletuesit, e keqja e kësaj zgjidhjeje është se nëse nuk kujdesemi për një mbushje mjaft të gjerë, edhe teksti do të ndërpritet, sepse gjatë prerjes së një elementi, përbërësit e tij nuk merren parasysh në asnjë mënyrë. 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 VETE!
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ë nga kjo dhimbje koke.Do të përdoret për të krijuar efektin e këndeve të prera në forma të ndryshme në kombinim me pronë me rreze kufitare, e cila nevojitet për të përcaktuar sasinë e mbjelljes. 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 shpejt dhe lehtë Metodat 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 > |
Në disa raste, përmbajtja e bllokut shfaqet jashtë kufijve të elementit, duke e mbivendosur atë. Për të menaxhuar sjelljen elementet e bllokut përdoret vetia overflow, e cila përcakton se si duhet të shfaqet përmbajtja që shkon përtej bllokut.
Duke përdorur veçorinë clip, mund të kapni një element në një madhësi të caktuar.
1. Vetia e tejmbushjes
Përmbajtja e elementeve të bllokut mund të vërshojë bllokun kur blloku ka një lartësi dhe/ose gjerësi të qartë. Pa një lartësi, blloku do të shtrihet për t'iu përshtatur përmbajtjes, përveç nëse blloku është vendosur në pozicionin: absolut; ose pozicioni: fiks; . Teksti mund të vërshojë bllokun në lartësi, imazhet mund të vërshojnë në lartësi dhe gjerësi.
| Vlerat: | |
| të dukshme | Vlera e paracaktuar. E gjithë përmbajtja bëhet e dukshme pavarësisht nga madhësia e bllokut të kontejnerit. Është e mundur të mbivendosni përmbajtjen e blloqeve fqinje. |
| rrotulloni | Shton shirita lëvizës brenda zonës së ekranit të elementit që shfaqen edhe kur përmbajtja është e madhësisë që të përshtatet brenda një blloku. Dimensionet e enës nuk ndryshojnë. |
| auto | Shton shirita lëvizës vetëm kur nevojitet. |
| i fshehur | Fsheh përmbajtjen që shkon përtej kufijve të bllokut. Mund të fshehë disa përmbajtje. Përdoret për blloqet e kontejnerëve që përmbajnë elementë lundrues. Ai gjithashtu parandalon shfaqjen e sfondeve ose kufijve poshtë elementëve të lundruar (të cilët janë caktuar të notojnë: majtas / djathtas; . Kjo nuk ndryshon madhësinë e kontejnerit. |
Oriz. 1. Pritini përmbajtjen e bllokut me vetitë e tejmbushjes Sintaksa: div (gjerësia: 200 px; lartësia: 150 px; tejmbushja: e fshehur; ) 2. veti tejmbush-x
Vetia specifikon se si skaji i djathtë i përmbajtjes brenda bllokut do të pritet nëse del jashtë.
Sintaksë:
Div (mbushje-x: i fshehur;)
3. Vërshimi i pasurisë-y
Vetia specifikon se si skaji i poshtëm i përmbajtjes brenda bllokut do të pritet nëse del jashtë.
Sintaksë:
Div ( tejmbushur-y: i fshehur; )
4. prona e kapëses
Vetia përcakton se cila pjesë e elementit do të jetë e dukshme. Pjesa e elementit që mbetet e dukshme pas prerjes quhet rajoni i prerjes. Prerja zbatohet në një element që fillimisht është plotësisht i dukshëm. Vetia zbatohet për elementët që e kanë pronësinë e pozicionit të caktuar në absolute ose fikse.
