Div za obrezivanje sadržaja. Sjecanje teksta u jednom ili više redaka na visinu dodavanjem trotočke

Pozdrav svima, moje ime je Anna Blok i danas ćemo pričati o tome kako izrezati slike bez korištenja grafičkih programa.

Gdje ovo može biti korisno?

Prije svega, na web lokacijama na kojima sadržaj sa slikama najvjerovatnije neće biti izrezan ni za jedan određeni blok.

Upečatljiv primjer: blog na WordPress-u.

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

1. Preuzmite odgovarajuću sliku sa Interneta;
2. Izrežite ga u Photoshopu do željenih proporcija;
3. Objavite članak.

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

Ali, pretpostavimo da ste zaboravili da isečete sliku u Photoshopu i da preuzmete slučajnu sliku kao omot sa interneta, šta će se onda desiti?! Tako je, raspored će se pokvariti. A ako uopće niste koristili CSS, onda HD slika može u potpunosti blokirati cijeli prikaz teksta. Stoga je važno znati kako izrezati slike koristeći CSS stilove.

Pogledajmo različite situacije kako se ovo može implementirati ne samo koristeći CSS, već i SVG.

Primjer 1

Pokušajmo izrezati sliku koja je postavljena koristeći background-image. Kreirajmo malo HTML oznake

Pređimo na CSS stil. Pomoću pozadinske slike dodajemo sliku, određujemo okvire za našu sliku, centriramo sliku koristeći pozadinu poziciju i postavljamo veličinu pozadine:

jpg); background-position:center centar; background-size:cover; širina:300px; visina:300px; )

Ovo je bila prva i najjednostavnija metoda za izrezivanje slike. Pogledajmo sada drugi primjer.

Primjer 2

Pretpostavimo da još uvijek imamo isti box kontejner unutar kojeg se nalazi img oznaka sa slikom koju ćemo sada stilizirati.

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

Kutija ( pozicija: relativna; prelivanje: skriveno; širina:300px; visina:300px; ) .box img (pozicija: apsolutna; vrh:50%; lijevo:50%; transform:translate(-50%,-50%); širina: 300px; visina: 300px; uklapanje objekta: poklopac; )

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

Više o HTML-u i CSS-u možete saznati ovdje:

Primjer 3

Takođe možemo kreirati isecanje slika u ovom trenutku ako ih ubacimo u SVG elemente. Uzmimo krug kao primjer. Možemo kreirati SVG koristeći oznake. Kreirajte svg graničnu oznaku koja će sadržavati oznaku kruga i oznaku uzorka unutra. U oznaku uzorka upisujemo oznaku slike. U njemu navodimo atribut xlink:href i dodajemo sliku. Također ćemo dodati atribute širine i visine. Ali to nije sve. Trebat ćemo dodati vrijednost punjenja. Da bi se naš rad smatrao završenim, dodaćemo pomoćni atribut reserveAspectRatio oznaci slike, koji će nam omogućiti da ispunimo našu sliku "od početka do kraja" oko cijelog kruga.

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

Više o HTML-u i CSS-u možete saznati ovdje:

Rezultati:
Razmotrili smo 3 metode izrezivanja slika na web stranicama: korištenje pozadinske slike, korištenje img oznake i povezivanje sa svg uzorkom sa ugrađivanjem bitmap slika pomoću oznake slike. Ako znate neke druge metode za izrezivanje slike pomoću SVG-a, podijelite ih u komentarima. Biće korisno ne samo za mene, već i za druge da znaju za njih.

Ne zaboravite postaviti pitanja o izgledu ili front-end razvoju od profesionalaca na FrontendHelp-u na mreži.

Postoji tekst proizvoljne dužine koji se mora prikazati unutar bloka fiksne visine i širine. U tom slučaju, ako se tekst ne uklapa u potpunosti, treba prikazati fragment teksta koji se u potpunosti uklapa u dati blok, nakon čega se postavlja trotočka.

Ovaj zadatak je prilično uobičajen, ali u isto vrijeme nije tako trivijalan kao što se čini.

Opcija za tekst u jednom redu u CSS-u

U ovom slučaju, možete koristiti svojstvo text-overflow: ellipsis. U ovom slučaju, kontejner mora imati svojstvo overflow jednaka skriveno ili isječak

Blok ( širina : 250px ; razmak : nowrap ; overflow : skriven ; text-overflow : ellipsis ; )

Opcija za višelinijski tekst u CSS-u

Prvi način da skratite višeredni tekst koristeći CSS svojstva je primjena pseudoelemenata :prije I :posle. Počnimo s HTML markiranjem

A sada i same nekretnine

Box ( overflow : hidden ; visina : 200px ; širina : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : lijevo ; širina : 5px ; visina : 200px ; ) .stbox > * :fir -child (float: desno; širina: 100%; margin-left: -5px;) .box:after (sadržaj: "\02026"; box-sizing: content-box; float: desno; položaj: relativan; vrh: -25px ; lijevo : 100% ; širina : 3em ; margin-left : -3em ; padding-right : 5px ; text-align : desno ; background-size : 100% 100% ; pozadina: linearni gradijent (na desno, rgba (255 , 255 , 255 , 0 ), bijela 50% , bijela ); )

Drugi način je korištenje svojstva kolone-width, pomoću kojeg postavljamo širinu kolone za višeredni tekst. Međutim, kada koristite ovu metodu, neće biti moguće postaviti trotočku na kraju. HTML:

Blok ( overflow : hidden ; visina : 200px ; širina : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width : 15% px; visina: 0px)

Postoji treći način rješavanja višelinijskog teksta koristeći CSS za pretraživače Webkit. U njemu ćemo morati koristiti nekoliko specifičnih svojstava s prefiksom -webkit. Glavni je -webkit-line-clamp koji vam omogućava da odredite broj redova koji će biti izlazni u bloku. Rješenje je lijepo, ali prilično ograničeno zbog rada u ograničenoj grupi pretraživača

Blok ( overflow : skriven ; text-overflow : elipsis ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertikalno ; )

Opcija za višelinijski tekst u JavaScript-u

Ovdje se koristi dodatni nevidljivi blok u koji se inicijalno postavlja naš tekst, nakon čega se uklanja jedan po jedan znak dok visina ovog bloka ne postane manja ili jednaka visini željenog bloka. I na kraju se tekst premješta u originalni blok.

var blok = dokument. querySelector(.block"), tekst = blok. innerHTML, klon = dokument. createElement("div"); klon stil. pozicija = "apsolutna" ; klon stil. vidljivost = "skrivena" ; klon stil. širina = blok . širina klijenta + "px" ; klon innerHTML = tekst; dokument. tijelo. appendChild(klon); var l = tekst. dužina - 1 ; za (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l) (klon. innerHTML = text . substring (0, l) + "..." ;) blok. innerHTML = klon. innerHTML ;

Ovo je isto kao dodatak za jQuery:

(funkcija ($) ( var truncate = funkcija (el) ( var tekst = el. tekst (), visina = el. visina (), klon = el. klon (); klon . css (( pozicija: "apsolutna" , vidljivost : "hidden" , visina : "auto" )); el . poslije (klon); var l = tekst . dužina - 1 ; za (; l >= 0 && klon . visina () > visina ; -- l ) ( klon . tekst ( tekst . podniz ( 0 , l ) + "..." ); ) el. tekst ( klon . tekst ()); klon . ukloni (); ); $ . fn . truncateText = funkcija () ( vrati ovo . svaki (funkcija () ( skraći ($ (ovo )); )); ); )(jQuery ));

Problem

Ne samo da je rezanje uglova brz način da se stvari završe, već je to i popularna opcija stila iu printu i web dizajnu. Najčešće uključuje rezanje jednog ili više uglova kontejnera pod uglom od 45°. U posljednje vrijeme, zbog činjenice da je skeuomorfizam počeo gubiti tlo pod ravnim dizajnom, ovaj efekat je posebno popularan. Kada su uglovi isečeni samo sa jedne strane i svaki ugao zauzima 50% visine elementa, stvara se oblik u obliku strelice, koji se takođe često koristi u dizajnu dugmadi i navigacionih elemenata.

Međutim, CSS još uvijek nema dovoljno alata za stvaranje ovog efekta jednostavnim, čistim jednolinerima. Zbog toga, mnogi programeri imaju tendenciju da koriste pozadinske slike: ili pokrivaju izrezane uglove trouglovima (na čvrstoj pozadini), ili kreiraju cijelu pozadinu koristeći jednu ili više slika gdje su uglovi već izrezani. Očigledno je da su takve metode potpuno nefleksibilne, teške za održavanje i povećavaju kašnjenje zbog dodatnih HTTP zahtjeva i ukupne veličine datoteka web stranice.

Primjer web stranice gdje se izrezani kut (donji lijevo od poluprozirnog polja Find & Book) savršeno uklapa u dizajn

Rješenje

Jedno moguće rješenje dolazi iz svemogućih CSS gradijenta. Recimo da želimo samo jedan odsečeni ugao, recimo donji desni ugao. Trik je u tome da se iskoristi mogućnost gradijenata da preuzmu smjer ugla (na primjer, 45 stepeni) i položaj granica prijelaza boje u apsolutnim vrijednostima, koje se ne mijenjaju kada se ukupne dimenzije elementa na koji pozadini pripada promjena. Iz navedenog proizilazi da će nam biti dovoljan jedan linearni gradijent.

Dodaćemo prozirni obrub za bledenje da kreiramo izrezani ugao, i još jedan fade obrub na istoj poziciji, ali sa bojom koja odgovara pozadini. CSS kod će biti sljedeći (za ugao od 15px):

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

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

Tehnički, ne treba nam ni prva najava. Dodali smo ga 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 izrezana ugla, recimo oba donja ugla. Ovo se ne može uraditi sa samo jednim gradijentom, pa će nam trebati dva. Vaša prva pomisao bi mogla biti otprilike ovako:

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

Međutim, ovo ne funkcionira. Prema zadanim postavkama, oba gradijenta zauzimaju cijelo područje elementa, tako da zaklanjaju jedan drugog. Moramo ih smanjiti ograničavajući svaki od njih na polovinu elementa koristeći veličinu pozadine:
pozadina: #58a;

veličina pozadine: 50% 100%;

Rezultat možete vidjeti na slici.

Iako smo primijenili background-size, gradijenti se i dalje preklapaju. Razlog je taj što smo zaboravili isključiti ponavljanje pozadine, pa se svaka pozadina ponavlja dva puta. Posljedično, jedna od pozadina još uvijek prikriva drugu, ali ovaj put kroz ponavljanje. Nova verzija koda izgleda ovako:
pozadina: #58a;
pozadina: linear-gradient(-45deg, transparent 15px, #58a 0) desno, linear-gradient(45deg, transparent 15px, #655 0) lijevo;
veličina pozadine: 50% 100%;

Rezultat možete vidjeti na slici i uvjerite se da je konačno tu! - radi! Verovatno ste već pogodili kako da primenite ovaj efekat na sva četiri ugla. Trebat će vam četiri gradijenta i kod sličan sljedećem:

pozadina: #58a;
pozadina: linear-gradient(135deg, transparent 15px, #58a 0) gore lijevo,

linear-gradient(-135deg, transparent 15px, #655 0) gore desno,

linear-gradient(-45deg, transparent 15px, #58a 0) dolje desno,

linear-gradient(45deg, transparent 15px, #655 0) dolje lijevo;
veličina pozadine: 50% 50%;
background-repeat: bez ponavljanja;

SAVJET
Koristili smo različite boje (#58a i #655) da olakšamo otklanjanje grešaka. U praksi će oba gradijenta biti iste boje.
Ali problem s prethodnim kodom je što ga je teško održavati. Potrebno je pet uređivanja za promjenu boje pozadine i četiri za promjenu vrijednosti ugla. Miksin kreiran pomoću pretprocesora mogao bi smanjiti broj ponavljanja. Ovako bi ovaj kod izgledao u SCSS-u:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
pozadina: $bg;
pozadina:
linearni gradijent (135 stepeni, transparentan $tl, $bg 0)
na vrhu lijevo,
linearni gradijent (225 stepeni, transparentan $tr, $bg 0)
gore desno,
linearni gradijent (-45 stepeni, transparentan $br, $bg 0)
dolje desno,
linearni gradijent (45 stepeni, transparentno $bl, $bg 0)
dolje lijevo;
veličina pozadine: 50% 50%;
background-repeat: bez ponavljanja;
}

Zatim se može pozvati kada je potrebno, kao što je prikazano u nastavku, sa 2-5 argumenata:
SCSS
@include beveled-corners(#58a, 15px, 5px);
U ovom primjeru ćemo završiti s elementom čiji gornji lijevi i donji desni uglovi su podrezani za 15px, a gornji desni i donji lijevi uglovi su podrezani za 5px, slično kako radijus granica radijusa kada odredimo manje od četiri vrijednosti. Ovo je moguće jer smo se također pobrinuli za zadane vrijednosti za argumente u našem SCSS mixinu - i da, te zadane vrijednosti mogu se odnositi i na druge argumente.
PROBAJTE I VI!
http://play.csssecrets.io/bevel-corners-gradients

Zakrivljeni uglovi

Odličan primjer korištenja zakrivljenih uglova na web stranici. http://g2geogeske.com dizajner ih je učinio centralnim elementom dizajna: prisutni su u navigaciji, u sadržaju, pa čak i u podnožju.
Varijacija metode sa gradijentima omogućava vam da kreirate zakrivljene izrezane uglove - efekat koji mnogi nazivaju "radijus unutrašnje granice" jer izgleda kao obrnuta verzija zaobljenih uglova. Jedina razlika je korištenje radijalnih gradijenta umjesto linearnih:
pozadina: #58a;
pozadina: radijalni gradijent (krug gore lijevo, transparentan 15px, #58a 0) gore lijevo,

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

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

radijalni gradijent (krug dolje lijevo, transparentan 15px, #58a 0) dolje lijevo;
veličina pozadine: 50% 50%;
background-repeat: bez ponavljanja;

Kao iu prethodnoj tehnici, veličina ugla može se kontrolisati pozicijama granica prelaza boja, a miksin može učiniti ovaj kod pogodnijim za dalje održavanje.

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

Rješenje sa stringom SVG i obrubnom slikom

Iako rješenje zasnovano na gradijentima funkcionira, ono ima nekoliko nedostataka:
Kod je veoma dugačak i pun ponavljanja. U najčešćem slučaju, kada trebamo smanjiti sva četiri ugla za isti iznos, promjena ove vrijednosti podrazumijeva četiri promjene koda.

Isto tako, promjena boje pozadine također zahtijeva četiri uređivanja, a ako uzmete u obzir rezervno rješenje, onda svih pet; Animiranje promjena u veličini odsječenog ugla je nevjerovatno teško, au nekim pretraživačima potpuno nemoguće. Srećom, ovisno o željenom rezultatu, možemo koristiti još nekoliko metoda. Jedna od njih uključuje ujedinjenje border-image sa nizom SVG koda u kojem se generiraju uglovi.

Znajući kako to funkcionira border-image(ako trebate da osvježite ovo znanje u sjećanju, naći ćete nagoveštaj), možete li već zamisliti kako bi ono trebalo izgledati? SVG-kod?

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


širina=”3″ visina=”3″ fill=”%2358a”>\
\
’);

Imajte na umu da je veličina koraka rezanja 1. Ovo ne znači 1 piksel; stvarna veličina je određena koordinatnim sistemom SVG datoteke (zbog čega nemamo jedinice). Kada bismo koristili procente, morali bismo približno 1/3 slike približiti frakcijskoj vrijednosti, na primjer 33,34% . Uvijek je rizično koristiti aproksimacije, jer različiti pretraživači mogu zaokružiti vrijednosti na različite stepene preciznosti. A držeći se jedinica za promjenu u koordinatnom sistemu SVG datoteke, štedimo se glavobolje koja dolazi sa svim tim zaokruživanjima.

Kao što vidite, izrezani uglovi su prisutni, ali nema pozadine. Postoje dva načina za rješavanje ovog problema: ili definirajte pozadinu, ili dodajte ključnu riječ fill u deklaraciju slike ivice tako da se element središnjeg dijela ne odbaci. U našem primjeru radije bismo definirali zasebnu pozadinu, jer će ova definicija poslužiti i kao zaobilazno rješenje za pretraživače koji ne podržavaju ovo rješenje.

Osim toga, vjerovatno ste primijetili da su uglovi 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 mjereno duž linije gradijenta, koja je okomita na smjer gradijenta. Međutim, širina okvira se ne mjeri dijagonalno, već horizontalno/vertikalno.

Osećaš li kuda idem sa ovim? Da, da, opet sveprisutna Pitagorina teorema, koju smo aktivno koristili. Dijagram na slici bi trebao učiniti stvari jasnijim.

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

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

širina=”3″ visina=”3″ fill=”%2358a”>\

0,2″/>\
’);
pozadina: #58a;
Međutim, kao što vidite, rezultat nije baš onakav kakav smo očekivali.

Gdje su nestali naši mukotrpno izrezani uglovi? Ne boj se, mladi Padavane, uglovi su još uvijek na mjestu. Odmah ćete shvatiti šta se dogodilo ako postavite drugu boju pozadine, kao što je #655.
Kao što slika ispod pokazuje, razlog zašto su naši uglovi nestali je zbog pozadine: pozadina koju smo gore definirali jednostavno ih zaklanja. Sve što treba da uradimo da eliminišemo ovu neprijatnost je da koristimo pozadinski klip da sprečimo da se pozadina uvuče ispod okvira:
ivica: 20px čvrsta prozirna;
border-image: 1 url('podaci:image/svg+xml,\

širina=”3″ visina=”3″ fill=”%2358a”>\

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

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

A promjena pozadine sada zahtijeva dvije izmjene umjesto pet. Dodatno, pošto naša pozadina ne zavisi od efekta primenjenog na uglove, možemo joj dati gradijent ili bilo koji drugi uzorak, sve dok je boja na ivicama još #58a.

Na primjer, koristimo radijalni gradijent od hsla(0,0%,100%,.2) do transparentnog. Ostao je samo jedan mali problem za rješavanje. Ako granica-slika nije podržana, tada rezervno rješenje neće biti ograničeno na odsustvo isječenih uglova. Budući da je pozadina izrezana, biće manje prostora između ivice polja i njegovog sadržaja. Da bismo ovo popravili, moramo definirati istu boju za okvir koji koristimo za pozadinu:
granica: 20px čvrsta #58a;
border-image: 1 url('podaci:image/svg+xml,\

širina=”3″ visina=”3″ fill=”%2358a”>\
\
’);
pozadina: #58a;
background-clip: padding-box;

U pretraživačima gdje je naša definicija border-image je podržana, ova boja će biti zanemarena, ali tamo gdje slika granice ne uspije, dodatna boja ivice će pružiti elegantnije zamjensko rješenje. Njegova jedina mana je što povećava broj uređivanja potrebnih za promjenu boje pozadine na tri.
PROBAJTE I VI!
http://play.csssecrets.io/bevel-corners

Clipping Path Solution

Iako je rješenje za sliku granica vrlo kompaktno i dobro slijedi DRY principe, ono nameće određena ograničenja. Na primjer, naša pozadina bi i dalje trebala biti ili u cijelosti, ili barem uz rubove, 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 u njenoj upotrebi.

Zapamtite imovinu clip-path iz tajne "Kako napraviti romb"? CSS staze za odsecanje imaju neverovatno svojstvo: omogućavaju vam da mešate procentualne vrednosti (način na koji specificiramo ukupne dimenzije elementa) sa apsolutnim vrednostima, pružajući neverovatnu fleksibilnost. Na primjer, kod za stazu odsječka koja izrezuje element na pravougaonik od 20px sa zakošenim uglovima (mjereno vodoravno) izgleda ovako:
pozadina: #58a;
clip-path: poligon (
20px 0, kalc (100% - 20px) 0, 100% 20px,
100% kalc (100% - 20px), kalc (100% - 20px) 100%,
20px 100%, 0 kalc(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 svih čistih CSS rješenja predstavljenih u ovoj knjizi, jer zahtijeva čak osam (!) uređivanja da bi se promijenila veličina ugla.

S druge strane, pozadina se može promijeniti samo jednim uređivanjem, 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 korištenjem izrezanih uglova. Nijedna od prethodnih metoda ne može postići ovaj efekat. Osim toga, svojstvo clip-path podržava animaciju i možemo animirati ne samo promjenu veličine ugla, već i prijelaze između različitih oblika.

Sve što treba da uradite je da koristite drugu putanju za odsecanje. Osim što je opsežan i ima ograničenu podršku za preglednik, nedostatak ovog rješenja je da ako ne osiguramo da je padding dovoljno širok, tekst će također biti odsječen, jer izrezivanje elementa ne uzima nijednu od njegovih komponenti u obzir. Nasuprot tome, metoda gradijenta omogućava da se tekst jednostavno proteže dalje od izrezanih uglova (na kraju krajeva, oni su samo dio pozadine), a metoda border-image radi na isti način kao i obični obrubi - premotava tekst na novi linija.

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

FUTURE CUT CORNERS
U budućnosti nećemo morati da pribegavamo CSS gradijentima, klipingu ili SVG-u da bismo postigli efekat isečenih uglova. Nova nekretnina ugaonog oblika, uključeno u CSS pozadine i granice Nivo 4 , će nas spasiti od ove glavobolje. Koristiće se za stvaranje efekta uglova isečenih u različite oblike u kombinaciji sa svojstvom border-radius, koje je neophodno za određivanje količine izrezivanja. Na primjer, da opišete izrezane uglove od 15px na svim stranama slike, dovoljan je sljedeći jednostavan kod:

radijus granice: 15px;
ugaoni oblik: kos;

Takođe pročitajte

U ovom članku ćemo vam reći o tome 3 brze i jednostavne CSS tehnike, koji možete koristiti da prikažete samo dio slike na vašoj stranici.

Sve metode koje se ovdje koriste zapravo zahtijevaju samo nekoliko redaka CSS kod. Međutim, ovo nije obrezivanje u pravom smislu te riječi ( CSS to još ne možemo), 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, na primjer, njen pregled (manju kopiju slike) u odjeljku vijesti ili nešto slično.

Tehnika 1 - Korištenje negativnih margina ( Negativne marže)

Ako ne želite koristiti negativne margine, predlažemo korištenje ove tehnike №2 . Uključuje roditelj (paragraf) koji ima određenu širinu i visinu. Ovaj stav ima svojstvo pozicioniranje postavljeno na relativno . Širina i visina definiraju dimenzije prikazanog polja. I slika postavljena unutar paragrafa ima svojstvo pozicioniranje postavljeno na apsolutno . Tada možemo koristiti svojstva top I lijevo rasporedite sliku kako god želimo, u procesu određivanja koji dio slike da se prikaže, a koji ne.

HTML identičan kodu iz prethodne tehnike:

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

Rezati ( float: lijevo; margina: . 5em 10px . 5em 0 ; overflow: skriveno; /* ovo je važno */ položaj: relativan; /* i ovo je važno */ granica: 1px čvrsta #ccc; širina: 200px; visina: 120px; Izreži img ( pozicija: apsolutna; vrh : - 40px ; lijevo : - 50px ;

Tehnika 3 - Korištenje svojstva rezanja ( Clip Property)

Ova tehnika bi trebala biti najlakša, jer clip property definira dio elementa koji treba biti prikazan. Ovo zvuči kao savršeno rješenje, ali postoji jedan ulov: ošišan element moraju biti postavljeni apsolutno. Da bismo mogli koristiti element, morat ćemo dodati dodatni element, izračunati veličinu vidljive površine slike, dodati ovu veličinu roditelju, koristiti roditelj... Puno posla, zar ne?

Oh, još jedan problem: veličina izrezanog elementa se ne smanjuje na veličinu izrezivanja, već ostaje originalne veličine (slika izvan izrezivanja je jednostavno skrivena). Moramo koristiti apsolutno pozicioniranje da pomjerimo vidljivo područje u gornji lijevi ugao roditelja.

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

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

Vlad Merzhevich

Unatoč činjenici da su monitori velike dijagonale sve pristupačniji i da im se rezolucija stalno povećava, ponekad se javlja zadatak da se mnogo teksta smjesti u ograničen prostor. Na primjer, ovo može biti potrebno za mobilnu verziju stranice ili za sučelje u kojem je važan broj redova. U takvim slučajevima ima smisla smanjiti duge redove teksta, ostavljajući samo početak rečenice. Na ovaj način ćemo sučelje dovesti u kompaktnu formu i smanjiti količinu prikazanih informacija. Samo skraćivanje reda se može obaviti na strani servera koristeći isti PHP, ali je lakše preko CSS-a i uvijek možete prikazati cijeli tekst, na primjer, kada pređete kursorom miša preko njega. Zatim ćemo pogledati metode za rezanje teksta zamišljenim makazama.

U stvarnosti, sve se svodi na korištenje svojstva overflow sa skrivenom vrijednošću. Razlike su samo u različitom prikazu našeg teksta.

Korištenje overflow

Da bi se svojstvo prelivanja pokazalo s tekstom u punom sjaju, potrebno je da razmotate tekst koristeći razmak sa vrijednošću nowrap . Ako se to ne učini, onda se neće dogoditi efekat koji nam je potreban; crtice će biti dodane u tekst i cijeli tekst će biti prikazan. Primjer 1 pokazuje kako skratiti dugačak tekst sa određenim skupom svojstava stila.

Primjer 1. prelijevanje za tekst

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat ovog primjera prikazan je na sl. 1.

Rice. 1. Izgled teksta nakon primjene svojstva prelijevanja

Kao što se vidi iz slike, generalno postoji jedan nedostatak - nije očigledno da tekst ima nastavak, pa se korisnik mora s tim upoznati. Ovo se obično radi pomoću gradijenta ili elipse.

Dodavanje gradijenta u tekst

Da bi bilo jasnije da se tekst sa desne strane ne završava, možete prekriti gradijent od prozirne boje do boje pozadine na njemu (slika 2). Ovo će stvoriti efekat da se tekst postepeno rastvara.

Rice. 2. Gradijentni tekst

Primjer 2 pokazuje kako se kreira ovaj efekat. Stil samog elementa će ostati praktično isti, ali ćemo dodati sam gradijent koristeći pseudoelement ::after i CSS3. Da bismo to uradili, ubacujemo prazan pseudo-element kroz svojstvo sadržaja i na njega primenjujemo gradijent sa različitim prefiksima za glavne pretraživače (primer 2). Širina gradijenta se može lako mijenjati koristeći širinu , također možete podesiti stepen transparentnosti zamjenom vrijednosti 0,2 svojom.

Primjer 2: Gradijent preko teksta

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intra-diskretni arpeggio transformiše poliseriju; ovo je jednokratna vertikala u super polifonom tkanju.

Ova metoda ne radi u Internet Exploreru do verzije 8.0 uključujući, jer ne podržava gradijente. Ali možete napustiti CSS3 i napraviti gradijent na starinski način, kroz sliku u PNG-24 formatu.

Ova metoda se može kombinovati samo sa običnom pozadinom, a u slučaju pozadinske slike, gradijent na vrhu teksta će biti primetan.

Elipsa na kraju teksta

Također možete koristiti elipsu na kraju izrezanog teksta umjesto gradijenta. Štaviše, biće dodan automatski koristeći svojstvo text-overflow. Razumiju ga svi pretraživači, uključujući starije verzije IE-a, a jedina mana ovog svojstva je što je njegov status trenutno nejasan. Čini se da CSS3 uključuje ovo svojstvo, ali kod s njim ne prolazi validaciju.

Primjer 3 pokazuje upotrebu svojstva prelivanja teksta sa vrijednošću elipsis, koja dodaje elipsu. Kada zadržite pokazivač miša preko teksta, on se prikazuje u cijelosti i ističe bojom pozadine.

Primjer 3: Korištenje text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Nesvjesno uzrokuje kontrast, što je Lee Ross označio kao fundamentalnu grešku atribucije, što se može vidjeti u mnogim eksperimentima.

Rezultat ovog primjera prikazan je na sl. 3.

Rice. 3. Tekst sa elipsama

Velika prednost ovih metoda je što se gradijent i elipse ne prikazuju ako je tekst kratak i ako se u potpunosti uklapa u dato područje. Dakle, tekst će biti prikazan kao i obično kada bude potpuno vidljiv na ekranu i biće odsečen kada se širina elementa smanji.