Css točkice ako ne odgovara. Kako skratiti dugačak tekst pomoću CSS-a. Zakrivljeni rezani kutovi

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

Gdje ovo može biti korisno?

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:

Preuzmite odgovarajuću sliku s Interneta;

Izrežite ga u Photoshopu na željene proporcije;

Objavite članak.

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.

Primjer 1

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.

Primjer 2

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:

Primjer 3

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.

Postoji tekst proizvoljne duljine koji treba prikazati unutar bloka fiksne visine i širine. U tom slučaju, ako tekst ne stane u potpunosti, treba prikazati dio teksta koji u potpunosti stane u zadani blok, nakon čega se postavlja elipsa.

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

Opcija za jednoredni tekst u CSS-u

U ovom slučaju možete koristiti svojstvo text-overflow: ellipsis. U ovom slučaju spremnik mora imati svojstvo prelijevanje jednak skriven ili isječak

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

Opcija za višeredni tekst u CSS-u

Prvi način skraćivanja višerednog teksta je s koristeći CSS svojstva primjenjuju pseudoelemente :prije I :nakon. Započnimo s HTML označavanjem

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi .

A sada sama svojstva

Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left; width: 5px ; height : 200px ;) .box > * :first -dijete ( float : desno ; širina : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : desno ; position : relative ; top : -25px; lijevo: 100%; širina: 3em; margina-lijevo: -3em; padding-desno: 5px; poravnanje teksta: desno; veličina pozadine: 100% 100%; pozadina: linearni gradijent (desno, rgba (255 , 255 , 255 , 0 ), bijela 50 % , bijela ); )

Drugi način je korištenje svojstva column-width, s kojim postavljamo širinu stupca za višeredni tekst. Međutim, kada koristite ovu metodu, neće biti moguće postaviti elipsu na kraju. HTML:

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

Treći način rješavanja višerednog teksta pomoću CSS-a je za Webkit preglednike. U njemu ćemo morati koristiti nekoliko specifičnih svojstava s prefiksom -webkit. Glavni je -webkit-line-clamp koji vam omogućuje da odredite broj redaka koji će se ispisati u bloku. Rješenje je lijepo, ali prilično ograničeno zbog rada u ograničenoj skupini preglednika

Blok (overflow: skriveno; text-overflow: elipsa; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: okomito;)

Opcija za višeredni tekst u JavaScriptu

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

var block = dokument. querySelector(".block"), tekst = blok. innerHTML, klon = dokument. createElement("div"); klon stil. položaj = "apsolutno" ; klon stil. vidljivost = "skriveno" ; klon stil. širina = blok. clientWidth + "px" ; klon unutarnjiHTML = tekst; dokument. tijelo. appendChild(klon); var l = tekst. duljina - 1; za (; l >= 0 && clone. clientHeight > block. clientHeight; -- l) (klon. innerHTML = text. substring (0, l) + "...";) block. unutarnjiHTML = klon. unutarnjiHTML;

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 : "apsolutno" , vidljivost : "skriveno", visina : "automatski" )); el . nakon (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 . uklanjanje (); ); $ . fn . truncateText = funkcija () ( return this . each (function () ( truncate ($ (this )); )); ) (jQuery ));

Vlad Merzhevich

Unatoč činjenici da su monitori velike dijagonale sve pristupačniji i da im se razlučivost stalno povećava, ponekad se pojavi zadatak smjestiti puno teksta na ograničeni prostor. Na primjer, ovo može biti potrebno za mobilna verzija mjesto ili za sučelje u kojem je bitan broj redaka. U takvim slučajevima ima smisla obrezati duge retke teksta, ostavljajući samo početak rečenice. Na taj način ćemo sučelje dovesti u kompaktan oblik i smanjiti količinu prikazanih informacija. Samo skraćivanje redaka može se obaviti na strani poslužitelja koristeći isti PHP, ali je lakše kroz CSS, a uvijek možete prikazati cijeli tekst, na primjer, kada prijeđete pokazivačem miša preko njega. Zatim ćemo pogledati metode rezanja teksta zamišljenim škarama.

U stvarnosti, sve se svodi na korištenje svojstva overflow s vrijednošću hidden. Razlike leže samo u različitom prikazu našeg teksta.

Korištenje preljeva

Kako bi se svojstvo overflow pokazalo s tekstom u punom sjaju, morate razmotati tekst koristeći razmak s vrijednošću nowrap. Ako se to ne učini, neće doći do željenog efekta; tekstu će biti dodane crtice i prikazat će se cijeli tekst. Primjer 1 pokazuje kako skratiti dugačak tekst s određenim skupom svojstava stila.

Primjer 1. preljev za tekst

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Izreži sadržaj */ pozadina: #fc0; /* Boja pozadine */ padding: 5px; /* Margine */ )

Proizlaziti ovaj primjer prikazano na sl. 1.

Riža. 1. Izgled teksta nakon primjene svojstva overflow

Kao što se može vidjeti sa slike, općenito postoji jedan nedostatak - nije očito da tekst ima nastavak, pa korisnik mora biti svjestan toga. To se obično radi pomoću gradijenta ili elipse.

Dodavanje gradijenta tekstu

Kako bi bilo jasnije da tekst s desne strane ne završava, možete preko njega staviti gradijent iz prozirne boje u boju pozadine (slika 2). To će stvoriti učinak postupnog rastvaranja teksta.

Riža. 2. Gradijent teksta

Primjer 2 pokazuje kako stvoriti ovaj efekt. Stil samog elementa ostat će praktički isti, ali ćemo dodati sam gradijent pomoću pseudoelementa ::after i CSS3. Da bismo to učinili, umetnemo prazan pseudoelement kroz svojstvo sadržaja i na njega primijenimo gradijent s različitim prefiksima za glavne preglednike (primjer 2). Širina gradijenta može se jednostavno promijeniti pomoću širine, također možete prilagoditi stupanj prozirnosti zamjenom vrijednosti 0,2 svojom vlastitom.

Primjer 2: Gradijent preko teksta

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Izreži sadržaj */ padding: 5px; /* Margine */ background: #fc0; /* Boja pozadine */ položaj: relativan ; /* Relativno pozicioniranje */ ) .size::after ( content: ""; /* Izlaz elementa */ position: absolute; /* Apsolutno pozicioniranje */ desno: 0; top: 0; /* Položaj elementa */ širina : 40px; /* Širina gradijenta*/ visina: 100%; /* Visina roditelja */ /* Gradijent */ pozadina: -moz-linear-gradient(lijevo, rgba(255,204,0, 0.2), #fc0 100%) ; pozadina: -webkit-linear-gradient(lijevo, rgba(255,204,0, 0.2), #fc0 100%); pozadina: -o-linearni-gradijent(lijevo, rgba(255,204,0, 0.2), #fc0 100 %); pozadina: -ms-linearni-gradijent(lijevo, rgba(255,204,0, 0.2), #fc0 100%); pozadina: linearni-gradijent(desno, rgba(255,204,0, 0.2), #fc0 100 %)); )

Intra-diskretni arpeggio transformira poliseriju; ovo je jednokratna vertikala u superpolifonoj tkanini.

Ova metoda ne funkcionira u Internet preglednik Explorer do inačice 8.0 uključivo, jer ne podržava gradijente. Ali možete napustiti CSS3 i napraviti gradijent na staromodan način, kroz sliku u PNG-24 formatu.

Ova metoda se može kombinirati samo s običnom pozadinom, au slučaju pozadinske slike, gradijent na vrhu teksta bit će vidljiv.

Elipsa na kraju teksta

Također možete koristiti elipsu na kraju izrezanog teksta umjesto gradijenta. Štoviše, automatski će se dodati korištenjem svojstva text-overflow. Razumiju ga svi preglednici, uključujući i starije verzije IE-a, a jedina mana ovog svojstva je da je trenutno nejasan status. Čini se da CSS3 uključuje ovo svojstvo, ali kod s njim ne prolazi provjeru valjanosti.

Primjer 3 prikazuje upotrebu svojstva text-overflow s vrijednošću ellipsis, koja dodaje elipsu. Kada mišem prijeđete preko teksta, on se prikazuje u cijelosti i označava bojom pozadine.

Primjer 3: Korištenje text-overflow-a

HTML5 CSS3 IE Cr Op Sa Fx

Text .size ( white-space: nowrap; /* Otkaži prelamanje teksta */ overflow: hidden; /* Crop content */ padding: 5px; /* Margine */ text-overflow: ellipsis; /* Ellipsis */ ) .size :hover ( background: #f0f0f0; /* Boja pozadine */ white-space: normal; /* Normalno prelamanje teksta */ ) Nesvjesno uzrokuje kontrast, Lee Ross to identificira kao temeljnu pogrešku atribucije, koja se može vidjeti u mnogo eksperimenata.

Rezultat ovog primjera prikazan je na sl. 3.

Riža. 3. Tekst s elipsom

Velika prednost ovih metoda je u tome što se gradijent i elipse ne prikazuju ako je tekst kratak i u potpunosti se uklapa u određeno područje. Dakle, tekst će biti prikazan kao i obično kada je potpuno vidljiv na ekranu i bit će odrezan kada se širina elementa smanji.

Problem

Rezanje uglova nije samo brz način postići cilj, 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°. Nedavno je, zbog činjenice da je skeuomorfizam počeo gubiti tlo pod nogama ravni dizajn, ovaj efekt je 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

Riješenje

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 (-45 stupnjeva, prozirno 15 piksela, #58a 0) desno, linearni gradijent (45 stupnjeva, prozirno 15 piksela, #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. Zahtijeva pet izmjena za promjenu boje pozadine i četiri za promjenu vrijednosti 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

Zakrivljeni rezani kutovi

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 vam stvaranje zakrivljenih odsječenih kutova - učinak koji mnogi nazivaju "unutarnji rubni radijus" jer izgleda poput obrnute verzije zaobljenih kutova. 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

Rješenje sa string SVG i border-image

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 nam ukupne dimenzije nisu važne (border-image će se pobrinuti za skaliranje, a SVG slike su savršeno skalirane bez obzira na dimenzije - blagoslovljeni bili Vektorska grafika!), sve veličine mogu se izjednačiti s jedinicom 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 točnosti. 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 radijalni gradijent od hsla(0,0%,100%,.2) do transparentnog. 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

Clipping Path Rješenje

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 slike obruba 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, kako bismo ostvarili učinak odsječenih kutova, nećemo morati pribjegavati CSS gradijenti, isječak ili SVG. Od ove glavobolje spasit će nas novo svojstvo oblika kuta, uključeno u CSS Backgrounds & Borders Level 4. 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;

Također pročitajte

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.

Skraćivanje css teksta

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.

Tekst režemo prema broju znakova i dodajemo elipsu bez obzira na duljinu

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();

Što radimo?

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. Za to je odgovorna varijabla var size = 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.