Kako skratiti dugačak tekst pomoću CSS-a. Kako skratiti dugačak niz prema broju znakova css i js rješenje problema Gdje može biti korisno

U ovom ćemo vam članku pokazati 3 brze i jednostavne CSS tehnike koje možete koristiti za prikaz samo dijela slike na vašoj stranici.

Sve metode koje se ovdje koriste zapravo zahtijevaju samo nekoliko redaka CSS kodirati. Međutim, ovo nije obrezivanje u pravom smislu te riječi ( CSS to još ne može), jednostavno sakrijemo i pokažemo samo onaj dio slike koji želimo vidjeti.

Ove tehnike mogu biti vrlo korisne ako želite sliku dovesti do određene veličine, odnosno želite napraviti npr. njezin preview (manju kopiju slike) u rubrici vijesti ili nešto slično.

Ako ne želite koristiti negativne margine, predlažemo korištenje tehnike #2. Uključuje roditelj (odlomak) koji ima određenu širinu i visinu. Ovaj paragraf ima svojstvo pozicioniranje postaviti na relativno . Širina i visina definiraju dimenzije prikazanog polja. I slika smještena unutar paragrafa ima svojstvo pozicioniranje postaviti na apsolutni . Tada možemo koristiti svojstva vrh I lijevo rasporediti sliku kako god želimo, pritom određujući koji dio slike prikazati, a koji ne.

HTML identičan kodu iz prethodne tehnike:

Ova bi tehnika trebala biti najlakša, jer svojstvo isječka definira dio elementa koji treba prikazati. Ovo zvuči kao savršeno rješenje, ali postoji jedna kvaka: ošišan element moraju biti postavljeni apsolutno. Da bismo mogli koristiti element, morat ćemo dodati dodatni element, izračunati veličinu vidljivog područja slike, dodati tu veličinu roditelju, koristiti roditelj... Puno posla, pravo?

Oh, još jedan problem: veličina izrezanog elementa nije smanjena na veličinu izrezivanja, već ostaje izvorna veličina (slika izvan izrezivanja je jednostavno skrivena). Moramo koristiti apsolutno pozicioniranje da pomaknemo vidljivo područje u gornji lijevi kut roditelja.

Međutim, to ne može ostati nespomenuto svojstvo narezivanja. I tako opet kod...

Dodavanje elipse na kraju teksta može se postići na više načina, a na raspolaganju su nam css i js.

Prvo, pogledajmo problem. Postoji oznaka blokova

• Puno zanimljivog teksta o stilovima, izgledu, programiranju i još mnogo zanimljivih stvari o web stranicama


• Ali kako možemo staviti elipsu ako ne možemo ograničiti veličinu bloka?


• Što kažete na js skriptu? On to može, zar ne?


• Hmm, definitivno može. Ovdje zadržite kod, on će brojati Unicode znakove i smanjiti ako je potrebno

Sada morate postići učinak odsijecanja teksta u svakom elementu popisa, uz to morate dodati elipsu.

Da bismo to učinili, stvorimo stil za razred sisa
.sisa (
razmak: nowrap; /* Otkaži prelamanje teksta */
preljev: skriven; /* Obrežite sadržaj */
ispuna: 5px; /* Polja */
text-overflow: elipsa; /* Elipsa */
}

Osobitost ovog rješenja je da ako tekst stane unutar veličine bloka, tada se elipsa neće dodati. Što nije uvijek rješenje problema.

Najčešće je potrebno skratiti tekst na njegovu duljinu i tek onda dodati točke.
Tu su i zadaci kada je u svakom slučaju potrebno dodati točke (koliko god tekst bio dugačak, minimalno 3 slova). A ako je tekst duži od određene veličine, tada ga treba obrezati. U ovom slučaju potrebno je koristiti skripte.

naziv funkcije() (
var elem, veličina, tekst;
var elem = document.getElementsByClassName("tit");
var text = elem.innerHTML;
promjenljiva veličina = 75;
var n = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > veličina) (
tekst = elem[i].innerHTML.substr(0,n);
}
drugo(
tekst = elem[i].unutarnjiHTML;
}
elem[i].unutarnjiHTML = tekst + "...";
}
}
titula();

Kažemo skripti koje elemente treba obraditi.
Da biste to učinili, u retku var elem = document.getElementsByClassName("tit"); označite klasu elementa (mora biti ista).

Zatim trebate postaviti veličinu teksta prije nego što ga izrežete. Ovo su naši kratki stihovi kojima će biti dodana elipsa. Odgovoran za ovo varijabla var veličina = 75;

Sada bi skripta trebala proći kroz sve elemente sa traženom klasom i dodati elipsu.
Skripta provjerava duljinu svakog retka i skraćuje tekst ako prelazi 75 znakova. Ako je duljina manja, tada se jednostavno dodaje elipsa (redak if(elem[i].innerHTML.length > size)).

Skriptu možete vidjeti na djelu na demo stranici. To je sve, sada znate kako obrezati dugačak tekst različitim metodama.

Pozdrav svima, moje ime je Anna Blok i danas ćemo govoriti o tome kako izrezati slike bez upotrebe grafičkih programa.

Prije svega, na web stranicama gdje sadržaj sa slikama najvjerojatnije neće biti izrezan ni za jedan određeni blok.

Upečatljiv primjer: blog na WordPressu.

Recimo da želite da naslovnica vašeg članka ima omjer širine i visine 1:1 (kvadrat). Vaše akcije:

Kada posjetite stranicu, vidjet ćete rezultat koji ste očekivali.

No, pretpostavimo da ste zaboravili izrezati sliku u Photoshopu i skinuli slučajnu sliku kao naslovnicu s interneta, što će se tada dogoditi?! Tako je, raspored će se pokvariti. A ako uopće niste koristili CSS, onda HD slika može potpuno blokirati cijeli prikaz teksta. Stoga je važno moći izrezati slike kada CSS pomoć stilovi.

Pogledajmo različite situacije kako se to može implementirati ne samo pomoću CSS-a, već i SVG-a.

Pokušajmo izrezati sliku koja je postavljena pomoću pozadinske slike. Kreirajmo malo HTML oznake

Prijeđimo na CSS stiliziranje. Korištenjem pozadinske slike dodajemo sliku, određujemo okvire za našu sliku, centriramo sliku pomoću pozadinske pozicije i postavljamo veličinu pozadine:

jpg); background-position:centar center; veličina pozadine: naslovnica; širina:300px; visina:300px; )

Ovo je bila prva i najjednostavnija metoda za obrezivanje slike. Sada pogledajmo drugi primjer.

Pretpostavimo da još uvijek imamo isti spremnik okvira unutar kojeg se nalazi img tag sa slikom koju ćemo sada stilizirati.

Također ćemo centrirati našu sliku u odnosu na objekt koji ćemo izraditi. I mi koristimo svojstvo koje se prilično rijetko koristi: object-fit.

Box (position: relative; overflow:hidden; width:300px; height:300px; ) .box img (position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover )

Po mom mišljenju ovo je najbolja metoda. Idealan je za blogove ako za postove koristite slike potpuno različitih proporcija.

Ovdje možete saznati više o HTML-u i CSS-u:

Trenutačno možemo kreirati i obrezivanje slika ako ih umetnemo u SVG elemente. Uzmimo krug kao primjer. SVG možemo stvoriti pomoću oznaka. Napravite svg rubnu oznaku koja će unutar sebe sadržavati oznaku kruga i oznaku uzorka. U oznaku uzorka upisujemo oznaku slike. U njemu specificiramo atribut xlink:href i dodamo sliku. Također ćemo dodati atribute širine i visine. Ali to nije sve. Morat ćemo dodati vrijednost punjenja. Da bi se naš rad smatrao dovršenim, dodat ćemo pomoćni atribut SaveAspectRatio u oznaku slike, koji će nam omogućiti da našu sliku ispunimo "od početka do kraja" oko cijelog kruga.

Ovu metodu ne mogu nazvati univerzalnom. Ali može se koristiti u iznimnim slučajevima. Na primjer, ako smo se dotakli teme bloga, onda bi se ova metoda mogla idealno uklopiti u avatar autora koji piše članak.

Ovdje možete saznati više o HTML-u i CSS-u:

Rezultati:
Pregledali smo 3 metode obrezivanja slika na web-mjestima: korištenje pozadinske slike, korištenje img oznake i povezano sa svg uzorkom s ugradnjom rasterske slike koristeći oznaku slike. Ako znate neke druge metode za obrezivanje slike pomoću SVG-a, podijelite ih u komentarima. Bit će korisno ne samo meni, nego i drugima da znaju o njima.

Ne zaboravite postaviti svoja pitanja o izgledu ili front-end razvoju od profesionalaca na FrontendHelp online.

Uvijek želimo da sve na stranici bude uredno, ali na primjer, imate blokove s tekstom koji treba stati unutar određenih granica, to može biti najava za članak ili opis proizvoda. U ovom slučaju naš je tekst proizvoljne duljine. Naravno, tekst možete konstantno prilagođavati veličini polja tako da ništa ne pođe po zlu ili možete napraviti tako da se dodatni tekst sakrije.

Za to postoji jednostavno CSS rješenje. Korištenje imovine text-overflow: elipsa, koji vam omogućuje obrezivanje linije s dugim testom. Da bi ovu odluku radilo, morate navesti širinu nadređenog bloka i imati svojstvo prelijevanje jednak skriven ili isječak.

Box-text ( text-overflow: ellipsis; //slika dugih blokova s ​​tekstom overflow: hidden; //hide overflow text width: 100%; //width of the block with text white-space: nowrap; //zabrana prelamanje teksta)

Sva njihova oprema i alati bili su živi, ​​u ovom ili onom obliku.

Sva njihova oprema i alati bili su živi, ​​u ovom ili onom obliku.

Ali da biste skratili višeredni tekst u CSS-u, morat ćete pribjeći pseudoelementima :prije I :nakon.

Box-text ( overflow: hidden; height: 200px; line-height: 25px; ) .box-text:before ( content: ""; float: left; width: 5px; height: 200px; ) .box-text > * :first-child ( float: desno; širina: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: desno; pozicija: relativna; lijevo: 3em; poravnanje teksta: 100%; linearno poravnavanje desno, rgba(255, 255, 255, 0), bijelo 50%, bijelo );

Lijeva strana šume bila je mračna, u sjeni; desna, mokra, sjajna, blistala na suncu, lagano se njišući na vjetru. Sve je bilo u cvatu; čavrljali su i kotrljali se slavuji čas blizu čas daleko.

Lijeva strana šume bila je mračna, u sjeni; desna, mokra, sjajna, blistala na suncu, lagano se njišući na vjetru. Sve je bilo u cvatu; čavrljali su i kotrljali se slavuji čas blizu čas daleko.

Rezanje uglova nije samo brz način postizanje cilja, ali i popularna opcija stiliziranja u dizajnu tiska i web dizajnu. Najčešće se radi o rezanju jednog ili više kutova posude pod kutom od 45°. U U zadnje vrijeme, zbog činjenice da je skeuomorfizam počeo gubiti tlo u odnosu na ravni dizajn, ovaj je efekt posebno popularan. Kada su uglovi izrezani samo na jednoj strani i svaki ugao zauzima 50% visine elementa, stvara se oblik strelice, koji se također često koristi u dizajnu gumba i navigacijskih elemenata za navigaciju.

Međutim, CSS još uvijek nema dovoljno alata za stvaranje ovog efekta s jednostavnim, čistim jednolinijskim tekstovima. Zbog toga, mnogi programeri imaju tendenciju da koriste pozadinske slike: Prekrijte odrezane kutove trokutima (na jednobojnoj pozadini) ili stvorite cijelu pozadinu pomoću jedne ili više slika na kojima su kutovi već odrezani. Očito su takve metode potpuno nefleksibilne, teške za održavanje i povećavaju latenciju zbog dodatnih HTTP zahtjeva i ukupne veličine datoteka web stranice.

Primjer web stranice gdje se odrezani kut (donji lijevi dio poluprozirnog polja Pronađi i rezerviraj) savršeno uklapa u dizajn

Jedan Moguće rješenje ponudite nam svemoguće CSS gradijente. Recimo da želimo samo jedan odrezani kut, recimo donji desni kut. Trik je iskoristiti mogućnost gradijenata da zauzmu smjer kuta (na primjer, 45 stupnjeva) i položaj granica prijelaza boja u apsolutnim vrijednostima, koje se ne mijenjaju kada se promjene ukupne dimenzije elementa na koji se pozadini pripada promjena. Iz navedenog proizlazi da će nam biti dovoljan jedan linearni gradijent.

Dodat ćemo prozirni rub za blijeđenje kako bismo stvorili izrezani kut i još jedan rub za blijeđenje na istoj poziciji, ali s bojom koja odgovara pozadini. CSS kod će biti sljedeći (za kut od 15 piksela):

pozadina: #58a;
pozadina: linearni gradijent (-45 stupnjeva, prozirno 15 piksela, #58a 0);

Jednostavno, zar ne? Rezultat možete vidjeti na slici.

Tehnički, prva najava nam niti ne treba. Dodali smo to samo kao zaobilazno rješenje: ako CSS gradijenti nisu podržani, onda će druga deklaracija biti zanemarena, tako da ćemo barem dobiti jednobojnu pozadinu. Sada recimo da su nam potrebna dva odrezana kuta, recimo oba donja kuta. Ovo se ne može učiniti sa samo jednim gradijentom, pa će nam trebati dva. Vaša prva pomisao mogla bi biti nešto poput ovoga:

pozadina: #58a;
pozadina: linearni gradijent (-45 stupnjeva, prozirno 15 piksela, #58a 0), linearni gradijent (45 stupnjeva, prozirno 15 piksela, #655 0);

Međutim, ovo ne funkcionira. Prema zadanim postavkama, oba gradijenta zauzimaju cijelo područje elementa, tako da se međusobno zaklanjaju. Moramo ih smanjiti ograničavajući svaki od njih na polovicu elementa pomoću veličine pozadine:
pozadina: #58a;

veličina pozadine: 50% 100%;

Rezultat možete vidjeti na slici.

Iako smo primijenili veličinu pozadine, gradijenti se još uvijek međusobno preklapaju. Razlog je što smo zaboravili isključiti background-repeat, pa se svaka od pozadina ponavlja dva puta. Posljedično, jedna od pozadina i dalje zaklanja drugu, ali ovaj put kroz ponavljanje. Nova verzija kod izgleda ovako:
pozadina: #58a;
pozadina: linearni gradijent(-45deg, prozirno 15px, #58a 0) desno, linearni gradijent(45deg, prozirno 15px, #655 0) lijevo;
veličina pozadine: 50% 100%;

Rezultat možete vidjeti na slici i uvjerite se da je konačno tu! - radi! Vjerojatno ste već pogodili kako ovaj efekt primijeniti na sva četiri kuta. Trebat će vam četiri gradijenta i kôd sličan sljedećem:

pozadina: #58a;
pozadina: linearni gradijent (135 stupnjeva, prozirno 15 piksela, #58a 0) gore lijevo,

linearni gradijent (-135 stupnjeva, prozirno 15 piksela, #655 0) gore desno,

linearni gradijent (-45 stupnjeva, prozirno 15 piksela, #58a 0) dolje desno,

linearni gradijent (45 stupnjeva, prozirno 15 piksela, #655 0) dolje lijevo;
veličina pozadine: 50% 50%;
pozadinsko ponavljanje: bez ponavljanja;

SAVJET
Koristili smo različite boje (#58a i #655) kako bismo olakšali otklanjanje pogrešaka. U praksi će oba gradijenta biti iste boje.
Ali problem s prethodnim kodom je taj što ga je teško održavati. Za promjenu je potrebno pet izmjena boja pozadine a četiri za promjenu kuta. Mixin stvoren pomoću pretprocesora mogao bi smanjiti broj ponavljanja. Ovako bi ovaj kod izgledao u SCSS-u:
SCSS
@mixin zakošeni uglovi($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
pozadina: $bg;
pozadina:
linearni gradijent (135 stupnjeva, prozirno $tl, $bg 0)
gore lijevo,
linearni gradijent (225 stupnjeva, prozirno $tr, $bg 0)
Gore desno,
linearni gradijent (-45 stupnjeva, prozirno $br, $bg 0)
dolje desno,
linearni gradijent (45 stupnjeva, prozirno $bl, $bg 0)
Dolje lijevo;
veličina pozadine: 50% 50%;
pozadinsko ponavljanje: bez ponavljanja;
}

Zatim se može pozvati kada je potrebno, kao što je prikazano u nastavku, s 2-5 argumenata:
SCSS
@include beveled-corners(#58a, 15px, 5px);
U ovom primjeru, završit ćemo s elementom čiji su gornji lijevi i donji desni kutovi odrezani za 15 px, a gornji desni i donji lijevi kutovi odrezani su za 5 px, slično načinu na koji border-radius radi kada odredimo manje od četiri vrijednosti. To je moguće jer smo također vodili računa o zadanim vrijednostima za argumente u našem SCSS miksinu - i da, te zadane vrijednosti se mogu odnositi i na druge argumente.
PROBAJTE I VI!
http://play.csssecrets.io/bevel-corners-gradients

Izvrstan primjer korištenja zakrivljenih rezanih kutova na web stranici http://g2geogeske.com, dizajner ih je učinio središnjim elementom dizajna: prisutni su u navigaciji, sadržaju pa čak i u podnožju.
Varijacija metode s gradijentima omogućuje stvaranje zakrivljenih odsječenih kutova - učinak koji mnogi nazivaju "unutarnji rubni radijus" jer izgleda kao obrnuta verzija zaobljeni kutovi. Jedina razlika je korištenje radijalnih gradijenata umjesto linearnih:
pozadina: #58a;
pozadina: radijalni gradijent (krug gore lijevo, prozirno 15 px, #58a 0) gore lijevo,

radijalni gradijent (krug gore desno, prozirno 15 px, #58a 0) gore desno,

radijalni gradijent (krug dolje desno, prozirno 15 px, #58a 0) dolje desno,

radijalni gradijent (krug dolje lijevo, prozirno 15 px, #58a 0) dolje lijevo;
veličina pozadine: 50% 50%;
pozadinsko ponavljanje: bez ponavljanja;

Kao i u prethodnoj tehnici, veličina kuta može se kontrolirati položajima granica prijelaza boja, a mixin može ovaj kod učiniti prikladnijim za daljnje održavanje.

PROBAJTE I VI!
http://play.csssecrets.io/scoop-corners

Iako rješenje temeljeno na gradijentima funkcionira, ima nekoliko nedostataka:
Kod je vrlo dugačak i pun ponavljanja. U najčešćem slučaju, kada trebamo podrezati sva četiri kuta za isti iznos, promjena ove vrijednosti povlači za sobom četiri promjene koda.

Isto tako, promjena boje pozadine također zahtijeva četiri edita, a ako uzmete u obzir rezervno rješenje, onda svih pet; Animiranje promjena u veličini izrezanog kuta je nevjerojatno teško, au nekim preglednicima potpuno nemoguće. Na sreću, ovisno o željenom rezultatu, možemo koristiti još nekoliko metoda. Jedan od njih uključuje kombiniranje granične slike sa stringovim SVG kodom, u kojem se generiraju kutovi.

Znajući kako funkcionira border-image (ako trebate osvježenje, ovdje je savjet), možete li već zamisliti kako bi potreban SVG kod trebao izgledati?

Budući da su ukupne dimenzije za nas nevažne (border-image brine o skaliranju, a SVG slike savršeno skaliraju bez obzira na veličinu - vektorska grafika neka je blagoslovljena!), sve dimenzije mogu se izjednačiti s jednom kako bi se radilo s prikladnijim i kraćim vrijednostima. Vrijednost odsječenog kuta bit će jednaka jedan, a ravne strane također će biti jednake jedan. Rezultat (uvećan za lakši pregled). Kôd potreban za ovo prikazan je u nastavku:
granica: 15 px čvrsta prozirna;

\
\
’);

Imajte na umu da je veličina koraka rezanja 1. Ovo ne znači 1 piksel; stvarna veličina određena je koordinatnim sustavom SVG datoteke (zbog čega nemamo jedinice). Ako bismo koristili postotke, morali bismo približno 1/3 slike dati frakcijskom vrijednošću, poput 33,34%. Uvijek je riskantno posegnuti za približnim vrijednostima, jer različitim preglednicima Vrijednosti se mogu zaokružiti do različitih stupnjeva preciznosti. I pridržavajući se jedinica promjene u koordinatnom sustavu SVG datoteke, uštedit ćemo si glavobolju koja dolazi sa svim tim zaokruživanjem.

Kao što vidite, odrezani kutovi su prisutni, ali nema pozadine. Ovaj problem se može riješiti na dva načina: definirati pozadinu ili dodati ključna riječ popuniti do deklaracije border-image tako da element središnjeg presjeka ne bude odbačen. U našem primjeru, radije bismo definirali zasebnu pozadinu, budući da će ova definicija također poslužiti kao zaobilazno rješenje za preglednike koji ne podržavaju ovo rješenje.

Osim toga, vjerojatno ste primijetili da su izrezani kutovi sada manji nego kod prethodne tehnike, što može biti zbunjujuće. Postavili smo širinu okvira na 15px! Razlog je taj što je u rješenju gradijenta ovih 15 piksela izmjereno duž linije gradijenta, koja je okomita na smjer gradijenta. Međutim, širina okvira ne mjeri se dijagonalno, već vodoravno/okomito.

Osjećaš li kamo idem s ovim? Da, da, opet sveprisutni Pitagorin teorem, koji smo aktivno koristili. Dijagram na slici trebao bi stvari učiniti jasnijima.

Ukratko, kako bismo postigli isti vizualni rezultat, potrebna nam je širina ruba koja je 2 puta veća od veličine koju bismo koristili u metodi gradijenta. U ovom slučaju, to će biti piksel, koji je najrazumnije aproksimirati na 20px, osim ako se ne suočimo sa zadatkom da veličinu dijagonale približimo što je moguće više dragih 15px:

granična slika: 1 url('podaci:slika/svg+xml,\
\
\
’);
pozadina: #58a;
Međutim, kao što vidite, rezultat nije baš onakav kakav smo očekivali.

Gdje su nestali naši mukotrpno odrezani uglovi? Ne boj se, mladi Padawan, uglovi su još uvijek na mjestu. Odmah ćete shvatiti što se dogodilo ako postavite drugu boju pozadine, na primjer #655.
Kao što donja slika pokazuje, razlog zašto su naši uglovi nestali je pozadina: pozadina koju smo gore definirali jednostavno ih zaklanja. Sve što trebamo učiniti kako bismo uklonili ovu neugodnost je koristiti pozadinski isječak kako bismo spriječili da se pozadina uvuče ispod područja okvira:
obrub: 20px čvrsti proziran;
granična slika: 1 url('podaci:slika/svg+xml,\
\
\
’);
pozadina: #58a;

Sada je problem riješen i naš teren izgleda potpuno isto kao prije. Osim toga, ovaj put možemo jednostavno promijeniti veličinu kutova samo jednim uređivanjem: jednostavno prilagodite širinu okvira. Možemo čak i animirati ovaj efekt jer širina granice podržava animaciju!

A promjena pozadine sada zahtijeva dvije izmjene umjesto pet. Dodatno, budući da naša pozadina ne ovisi o efektu primijenjenom na kutove, možemo joj dati gradijent ili bilo koji drugi uzorak, sve dok je boja na rubovima i dalje #58a.

Na primjer, koristimo se radijalni gradijent od boje hsla(0,0%,100%,.2) do prozirne. Preostaje još samo jedan mali problem za riješiti. Ako slika obruba nije podržana, rezervno rješenje neće biti ograničeno na odsutnost odsječenih kutova. Budući da je pozadina izrezana, bit će manje prostora između ruba polja i njegovog sadržaja. Kako bismo to popravili, moramo definirati istu boju okvira koju koristimo za pozadinu:
rub: 20px solid #58a;
granična slika: 1 url('podaci:slika/svg+xml,\
\
\
’);
pozadina: #58a;
pozadinski isječak: padding-box;

U preglednicima u kojima je podržana naša definicija slike obruba, ova će boja biti zanemarena, ali tamo gdje slika obruba ne radi, dodatna boja obruba pružit će elegantnije rezervno rješenje. Jedini mu je nedostatak što povećava broj izmjena potrebnih za promjenu boje pozadine na tri.
PROBAJTE I VI!
http://play.csssecrets.io/bevel-corners

Iako je rješenje granične slike vrlo kompaktno i dobro slijedi DRY principe, ono nameće određena ograničenja. Na primjer, naša pozadina i dalje treba biti cijela ili barem duž rubova ispunjena jednobojnom bojom.

Što ako želimo koristiti drugu vrstu pozadine, kao što je tekstura, uzorak ili linearni gradijent? Postoji još jedna metoda koja nema takva ograničenja, iako, naravno, postoje određena ograničenja njezine upotrebe.

Sjećate se svojstva clip-path iz tajne "Kako napraviti dijamant"? CSS isječke staze imaju nevjerojatno svojstvo: omogućuju vam miješanje postotnih vrijednosti (način na koji specificiramo ukupne dimenzije elementa) s apsolutnim vrijednostima, pružajući nevjerojatnu fleksibilnost. Na primjer, kôd za stazu isjecanja koja izrezuje element u pravokutnik od 20 piksela sa zakošenim kutovima (mjereno vodoravno) izgleda ovako:
pozadina: #58a;
staza isječka: 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);
Iako kratak, ovaj dio koda ne slijedi DRY principe, a to postaje jedan od najvećih problema ako ne koristite predprocesor. Zapravo, ovaj kod je najbolja ilustracija WET principa od svih rješenja na čisti CSS predstavljen u ovoj knjizi, jer za promjenu veličine kuta potrebno je napraviti čak osam (!) izmjena.

S druge strane, pozadina se može promijeniti samo jednim editom, tako da barem to imamo. Jedna od prednosti ovog pristupa je da možemo koristiti apsolutno bilo koju pozadinu ili čak izrezati zamjenske elemente kao što su slike. Ilustracija prikazuje sliku stiliziranu odrezanim kutovima. Nijedna od prethodnih metoda ne može postići ovaj učinak. Osim toga, svojstvo clip-path podržava animaciju, a možemo animirati ne samo promjenu veličine kuta, već i prijelaze između različitih oblika.

Sve što trebate učiniti je koristiti drugu stazu za isječak. Osim što je opširno i ima ograničenu podršku preglednika, loša strana ovog rješenja je da ako ne provjerimo je li ispuna dovoljno široka, tekst će također biti odrezan, budući da obrezivanje elementa ne uzima nijednu njegovu komponentu u račun. Nasuprot tome, metoda gradijenta omogućuje tekstu da se jednostavno proteže izvan odsječenih kutova (uostalom, oni su samo dio pozadine), a metoda granične slike funkcionira na isti način kao i obični obrubi - prelama tekst na novi crta.

PROBAJTE I VI!
http://play.csssecrets.io/bevel-corners-clipped

BUDUĆI ODREZANI KUTOVI
U budućnosti nećemo morati pribjegavati CSS gradijentima, isjecanju ili SVG-u da bismo postigli učinak odsječenih kutova. Novo svojstvo oblika kuta, uključeno u CSS Backgrounds & Borders Level 4, spasit će nas ove glavobolje. Koristit će se za stvaranje efekta kutova izrezanih u različite oblike u kombinaciji sa svojstvom border-radius, koje je neophodno za. odrediti količinu usjeva. Na primjer, za opisivanje izrezanih kutova od 15 px na svim stranama slike dovoljan je sljedeći jednostavan kod:

radijus granice: 15px;
kutni oblik: kosi;