Vienas vai vairāku rindiņu teksta apgriešana pēc augstuma, pievienojot elipsi. Kā apgriezt garu rindu pēc rakstzīmju skaita css un js problēmas risinājums Risinājums vairāku rindiņu tekstam

Elipses pievienošanu teksta beigās var panākt vairākos veidos, mūsu rīcībā ir css un js.

Vispirms apskatīsim problēmu. Ir bloku marķējums

• Daudz interesantu tekstu par stiliem, izkārtojumu, programmēšanu un daudz ko citu par vietnēm


• Bet kā mēs varam ievietot elipsi, ja nevaram ierobežot bloka izmēru?


• Kā būtu ar js skriptu? Viņš to var izdarīt, vai ne?


• Hmm, noteikti var. Šeit saglabājiet kodu, tas saskaitīs unikoda rakstzīmes un vajadzības gadījumā apgriezīs

Tagad jums ir jāpanāk teksta nogriešanas efekts katrā saraksta elementā, papildus tam jums jāpievieno elipsi.

Lai to izdarītu, izveidosim zīlīšu klases stilu
.tit (
atstarpe: nowrap; /* Atcelt teksta aplaušanu */
pārplūde: slēpta; /* Apgrieziet saturu */
polsterējums: 5 pikseļi; /* Lauki */
teksta pārpilde: elipses; /* Elipse */
}

Šī risinājuma īpatnība ir tāda, ka, ja teksts iekļaujas bloka izmērā, tad elipse netiks pievienota. Kas ne vienmēr ir problēmas risinājums.

Visbiežāk teksts ir jāsamazina līdz tā garumam un tikai pēc tam jāpievieno punkti.
Ir arī uzdevumi, kad jebkurā gadījumā nepieciešams pievienot punktus (neatkarīgi no tā, cik garš ir teksts, vismaz 3 burti). Un, ja teksts ir garāks par noteiktu izmēru, tad tas ir jāapgriež. Šajā gadījumā ir nepieciešams izmantot skriptus.

funkcijas nosaukums() (
var elem, izmērs, teksts;
var elem = document.getElementsByClassName("zīle");
var text = elem.innerHTML;
var izmērs = 75;
var n = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > size) (
teksts = elem[i].innerHTML.substr(0,n);
}
cits(
teksts = elem[i].innerHTML;
}
elem[i].innerHTML = teksts + "...";
}
}
virsraksts ();

Mēs pasakām skriptam, kuri elementi ir jāapstrādā.
Lai to izdarītu, rindā var elem = document.getElementsByClassName("tit"); norādiet elementa klasi (tai jābūt vienādai).

Pēc tam pirms teksta izgriešanas ir jāiestata tā lielums. Šīs ir mūsu īsās rindiņas, kurām tiks pievienota elipsi. Par to ir atbildīgs mainīgais var size = 75;

Tagad skriptam jāiet cauri visiem elementiem ar nepieciešamo klasi un jāpievieno elipsi.
Skripts pārbauda katras rindas garumu un saīsina tekstu, ja tas pārsniedz 75 rakstzīmes. Ja garums ir mazāks, tad vienkārši tiek pievienota elipsi (rindiņa if(elem[i].innerHTML.length > size)).

Demonstrācijas lapā varat redzēt skriptu darbībā. Tas arī viss, tagad jūs zināt, kā apgriezt garš teksts dažādas metodes.

Mēs vienmēr vēlamies, lai vietnē viss būtu kārtīgi, bet, piemēram, jums ir bloki ar tekstu, kam jāiekļaujas noteiktās robežās, tas var būt paziņojums par rakstu vai produkta apraksts. Tajā pašā laikā mums ir teksts patvaļīgs garums. Protams, jūs varat pastāvīgi pielāgot tekstu lauka izmēram, lai nekas nenotiktu, vai arī varat to izdarīt tā, lai papildu teksts tiktu paslēpts.

Šim nolūkam ir vienkāršs CSS risinājums. Īpašuma izmantošana teksta pārpilde: elipses, kas ļauj apgriezt līniju ar ilgu testu. Lai šo lēmumu strādāja, jums ir jānorāda vecākbloka platums un jābūt rekvizītam pārplūde vienāds paslēptas vai klips.

Box-text ( text-overflow: elipsis; //garu bloku attēls ar teksta pārpildīšanu: paslēpts; //slēpt pārpildīta teksta platumu: 100%; //bloka platums ar tekstu atstarpi: nowrap; //aizliegums iesaiņojuma teksts)

Viss viņu aprīkojums un instrumenti bija dzīvi, vienā vai otrā veidā.

Viss viņu aprīkojums un instrumenti bija dzīvi, vienā vai otrā veidā.

Bet, lai apgrieztu vairāku rindiņu tekstu CSS, jums būs jāizmanto pseidoelementi : iepriekš Un : pēc.

Box-text ( pārpilde: paslēpts; augstums: 200 pikseļi; līnijas augstums: 25 pikseļi; ) .box-text:before ( saturs: ""; peldēšana: pa kreisi; platums: 5 pikseļi; augstums: 200 pikseļi; ) .box-text > * :first-child ( pludiņš: pa labi; platums: 100%; margin-left: -5px; ) .box-text:after ( saturs: "\02026"; box-sizing: content-box; float: pa labi; pozīcija: relatīvais: -25 pikseļi; polsterējums — pa labi: 100% (255, 255, 0), balts;

Meža kreisā puse bija tumša, ēnā; īstais, slapjš, glancēts, saulē mirdzošs, vējā nedaudz šūpojies. Viss ziedēja; lakstīgalas pļāpāja un ripoja, tagad tuvu, tagad tālu.

Meža kreisā puse bija tumša, ēnā; īstais, slapjš, glancēts, saulē mirdzošs, vējā nedaudz šūpojies. Viss ziedēja; lakstīgalas pļāpāja un ripoja, tagad tuvu, tagad tālu.

Stūru griešana ir ne tikai ātrs veids sasniegt mērķi, bet arī populāra stila iespēja gan drukas, gan tīmekļa dizainā. Visbiežāk tas ietver viena vai vairāku konteinera stūru nogriešanu 45° leņķī. Nesen sakarā ar to, ka skeuomorfisms ir sācis zaudēt savas pozīcijas plakans dizains, šis efekts ir īpaši populārs. Kad stūri tiek izgriezti tikai vienā pusē un katrs stūris aizņem 50% no elementa augstuma, tiek izveidota bultiņas forma, kas arī bieži tiek izmantota pogu un rīvmašīnas navigācijas elementu dizainā.

Tomēr CSS joprojām nav pietiekami daudz rīku, lai radītu šo efektu ar vienkāršiem, tīriem viena oderēm. Šī iemesla dēļ daudzi izstrādātāji mēdz izmantot fona attēli: Nosedziet nogrieztos stūrus ar trīsstūriem (uz vienas krāsas fona), vai izveidojiet visu fonu, izmantojot vienu vai vairākus attēlus, kur stūri jau ir izgriezti. Acīmredzot šādas metodes ir pilnīgi neelastīgas, grūti uzturējamas un palielina latentumu papildu HTTP pieprasījumu un vietnes failu kopējā izmēra dēļ.

Vietnes piemērs, kur nogrieztais stūris (daļēji caurspīdīgā lauka Find & Book apakšējā kreisajā pusē) lieliski iekļaujas dizainā

Viens iespējamais risinājums piedāvā mums visvarenos CSS gradientus. Pieņemsim, ka mēs vēlamies tikai vienu nogrieztu stūri, piemēram, apakšējo labo stūri. Viltība ir izmantot gradientu spēju ņemt leņķa virzienu (piemēram, 45 grādi) un krāsu pārejas robežu pozīciju absolūtās vērtībās, kuras nemainās, ja elementa, uz kuru tiek virzīts, kopējie izmēri. fons pieder mainīt. No iepriekš minētā izriet, ka mums pietiks ar vienu lineāru gradientu.

Mēs pievienosim caurspīdīgu izbalināto apmali, lai izveidotu nogriezto stūri, un vēl vienu izbalināto apmali tajā pašā pozīcijā, bet ar krāsu, kas atbilst fonam. CSS kods būs šāds (15 pikseļu stūrim):

fons: #58a;
background:linear-gradient (-45°, caurspīdīgs 15px, #58a 0);

Vienkārši, vai ne? Rezultātu var redzēt attēlā.

Tehniski mums pat nav vajadzīgs pirmais paziņojums. Mēs to pievienojām tikai kā risinājumu: ja CSS gradienti netiek atbalstīti, otrā deklarācija tiks ignorēta, tāpēc mēs vismaz iegūsim vienkrāsainu fonu. Tagad pieņemsim, ka mums ir nepieciešami divi nogriezti stūri, teiksim, abi apakšējie stūri. To nevar izdarīt tikai ar vienu gradientu, tāpēc mums būs nepieciešami divi. Jūsu pirmā doma varētu būt kaut kas līdzīgs šim:

fons: #58a;
fons: lineārs gradients (-45 grādi, caurspīdīgs 15 pikseļi, #58a 0), lineārs gradients (45 grādi, caurspīdīgs 15 pikseļi, #655 0);

Tomēr tas nedarbojas. Pēc noklusējuma abi gradienti aizņem visu elementa laukumu, tāpēc tie aizsedz viens otru. Mums tie ir jāsamazina, ierobežojot katru no tiem līdz pusei elementa, izmantojot fona izmēru:
fons: #58a;

fona izmērs: 50% 100%;

Rezultātu var redzēt attēlā.

Lai gan mēs izmantojām fona izmēru , gradienti joprojām pārklājas viens ar otru. Iemesls ir tāds, ka mēs aizmirsām izslēgt fona atkārtošanu, tāpēc katrs fons tiek atkārtots divas reizes. Līdz ar to viens no foniem joprojām aizsedz otru, bet šoreiz caur atkārtošanos. Jauna versija kods izskatās šādi:
fons: #58a;
fons: lineārs gradients (-45°, caurspīdīgs 15 pikseļi, #58a 0) pa labi, lineārs gradients (45 grādi, caurspīdīgs 15 pikseļi, #655 0) pa kreisi;
fona izmērs: 50% 100%;

Rezultātu var redzēt attēlā un pārliecināties, ka tas beidzot ir! - darbojas! Droši vien jau esat uzminējis, kā šo efektu pielietot visos četros stūros. Jums būs nepieciešami četri gradienti un kods, kas līdzīgs šim:

fons: #58a;
fons: lineārs gradients (135 grādi, caurspīdīgs 15 pikseļi, #58a 0) augšā pa kreisi,

lineārs gradients (-135 grādi, caurspīdīgs 15 pikseļi, #655 0) augšējā labajā stūrī,

lineārs gradients (-45 grādi, caurspīdīgs 15 pikseļi, #58a 0) apakšējā labajā stūrī,

lineārs gradients (45 grādi, caurspīdīgs 15 pikseļi, # 655 0) apakšā pa kreisi;
fona izmērs: 50% 50%;
fona atkārtojums: neatkārtot;

PADOMS
Mēs izmantojām dažādas krāsas (#58a un #655), lai atvieglotu atkļūdošanu. Praksē abi gradienti būs vienā krāsā.
Bet iepriekšējā koda problēma ir tā, ka to ir grūti uzturēt. Lai mainītu fona krāsu, ir nepieciešami pieci labojumi un četri, lai mainītu leņķa vērtību. Miksīns, kas izveidots, izmantojot priekšprocesoru, varētu samazināt atkārtojumu skaitu. Lūk, kā šis kods izskatītos SCSS:
SCSS
@mixin beveled-corners ($ bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
fons: $bg;
fons:
lineārs gradients (135 grādi, caurspīdīgs $tl, $bg 0)
augšā pa kreisi,
lineārs gradients (225 grādi, caurspīdīgs $tr, $bg 0)
augšējā labajā stūrī,
lineārs gradients (-45 grādi, caurspīdīgs $br, $bg 0)
apakšā pa labi,
lineārs gradients (45 grādi, caurspīdīgs $bl, $ bg 0)
apakšā pa kreisi;
fona izmērs: 50% 50%;
fona atkārtojums: neatkārtot;
}

Pēc tam to var izsaukt, kad nepieciešams, kā parādīts zemāk, ar 2–5 argumentiem:
SCSS
@include beveled-corners (#58a, 15px, 5px);
Šajā piemērā mēs iegūsim elementu, kura augšējais kreisais un apakšējais labais stūris ir apgriezts par 15 pikseļiem un tā augšējais labais un apakšējais kreisais stūris ir apgriezts par 5 pikseļiem, līdzīgi kā apmales rādiuss darbojas, kad mēs norādām. mazāk nekā četras vērtības. Tas ir iespējams, jo mēs parūpējāmies arī par argumentu noklusējuma vērtībām mūsu SCSS mixin — un jā, šīs noklusējuma vērtības var attiekties arī uz citiem argumentiem.
IZMĒĢINI PATS!
http://play.csssecrets.io/bevel-corners-gradients

Lielisks piemērs izliekto stūru izmantošanai vietnē http://g2geogeske.com, dizainers tos padarīja par centrālo dizaina elementu: tie ir redzami navigācijā, saturā un pat kājenē.
Metodes variācija ar gradientiem ļauj izveidot izliektus grieztus stūrus - efektu, ko daudzi sauc par "iekšējās robežas rādiusu", jo tas izskatās kā apgriezta noapaļotu stūru versija. Vienīgā atšķirība ir radiālo gradientu izmantošana lineāro gradientu vietā:
fons: #58a;
fons: radiāls gradients (aplis augšā pa kreisi, caurspīdīgs 15 pikseļi, #58a 0) augšā pa kreisi,

radiāls gradients (aplis augšējā labajā stūrī, caurspīdīgs 15 pikseļi, #58a 0) augšējā labajā stūrī,

radiāls gradients (aplis labajā apakšējā stūrī, caurspīdīgs 15 pikseļi, #58a 0) apakšā pa labi,

radial-gradient (aplis kreisajā apakšējā stūrī, caurspīdīgs 15 pikseļi, #58a 0) apakšā pa kreisi;
fona izmērs: 50% 50%;
fona atkārtojums: neatkārtot;

Tāpat kā iepriekšējā tehnikā, leņķa lielumu var kontrolēt ar krāsu pārejas robežu pozīcijām, un miksīns var padarīt šo kodu piemērotāku turpmākai apkopei.

IZMĒĢINI PATS!
http://play.csssecrets.io/scoop-corners

Lai gan uz gradientiem balstīts risinājums darbojas, tam ir daži trūkumi:
Kods ir ļoti garš un atkārtojumu pilns. Visizplatītākajā gadījumā, kad mums ir jāapgriež visi četri stūri par vienādu summu, šīs summas maiņa nozīmē četras koda izmaiņas.

Tāpat arī fona krāsas maiņai ir nepieciešami četri labojumi, un, ja ņemat vērā rezerves risinājums, tad visi pieci; Animēt izmaiņas nogrieztā stūra izmērā ir neticami grūti, un dažās pārlūkprogrammās tas ir pilnīgi neiespējami. Par laimi, atkarībā no vēlamā rezultāta, mēs varam izmantot vēl pāris metodes. Viens no tiem ietver apmales attēla apvienošanu ar virkni SVG kodu, kurā tiek ģenerēti stūri.

Vai, zinot, kā darbojas border-image (ja vajag atsvaidzināšanu, te ir mājiens), vai varat jau iedomāties, kā vajadzētu izskatīties vajadzīgajam SVG kodam?

Tā kā kopējie izmēri mums nav svarīgi (apmales attēls parūpēsies par mērogošanu, un SVG attēli ir lieliski mērogoti neatkarīgi no izmēra - esiet svētīti vektorgrafika!), visus izmērus var pielīdzināt vienam, lai darbotos ar ērtākām un īsākām vērtībām. Nogrieztā stūra vērtība būs vienāda ar vienu, un taisnās malas arī būs vienādas ar vienu. Rezultāts (palielināts ērtākai apskatei). Tam nepieciešamais kods ir parādīts zemāk:
apmale: 15 pikseļi, caurspīdīga;

\
\
’);

Ņemiet vērā, ka sagriešanas soļa izmērs ir 1. Tas nenozīmē 1 pikseļu; faktisko izmēru nosaka SVG faila koordinātu sistēma (tāpēc mums nav vienību). Ja mēs izmantotu procentus, mums vajadzētu tuvināt 1/3 attēla ar daļskaitļu vērtību, piemēram, 33,34%. Vienmēr ir riskanti ķerties pie aptuvenām vērtībām, jo dažādas pārlūkprogrammas Vērtības var noapaļot līdz dažādai precizitātes pakāpei. Un, pieturoties pie izmaiņu vienībām SVG faila koordinātu sistēmā, mēs ietaupām sev galvassāpes, kas rodas ar visu šo noapaļošanu.

Kā redzams, nogrieztie stūri ir klāt, bet fona nav. Šo problēmu var atrisināt divos veidos: vai nu definēt fonu, vai pievienot atslēgvārds aizpildiet apmales attēla deklarāciju, lai centrālās šķēles elements netiktu izmests. Mūsu piemērā mēs labprātāk definētu atsevišķu fonu, jo šī definīcija kalpos arī kā risinājums pārlūkprogrammām, kas neatbalsta šo risinājumu.

Turklāt jūs, iespējams, pamanījāt, ka nogrieztie stūri tagad ir mazāki nekā ar iepriekšējo tehniku, kas var radīt neskaidrības. Iestatījām rāmja platumu uz 15px! Iemesls ir tāds, ka gradienta risinājumā šie 15 pikseļi tika mērīti pa gradienta līniju, kas ir perpendikulāra gradienta virzienam. Taču rāmja platums tiek mērīts nevis pa diagonāli, bet gan horizontāli/vertikāli.

Vai jūtat, kur es eju ar šo? Jā, jā, atkal visuresošā Pitagora teorēma, kuru mēs aktīvi izmantojām. Diagrammai attēlā vajadzētu būt skaidrākai.

Īsāk sakot, lai sasniegtu tādu pašu vizuālo rezultātu, mums ir nepieciešams rāmja platums, kas ir 2 reizes lielāks par izmēru, ko mēs izmantotu gradienta metodē. Šajā gadījumā tas būs pikselis, kuru vissaprātīgāk ir tuvināt līdz 20 pikseļiem, ja vien mēs nesaskaramies ar uzdevumu tuvināt diagonāles izmēru pēc iespējas tuvāk lolotajiem 15 pikseļiem:

border-image: 1 url('data:image/svg+xml,\
\
\
’);
fons: #58a;
Tomēr, kā redzat, rezultāts nav gluži tāds, kādu gaidījām.

Kur palika mūsu cītīgi nogrieztie stūri? Nebaidieties, jaunais Padawan, stūri joprojām ir savās vietās. Jūs uzreiz sapratīsit, kas notika, ja iestatīsiet citu fona krāsu, piemēram, #655.
Kā parādīts zemāk esošajā attēlā, iemesls, kāpēc mūsu stūri pazuda, ir fona dēļ: iepriekš definētais fons tos vienkārši aizsedz. Viss, kas mums jādara, lai novērstu šīs neērtības, ir izmantot fona klipu, lai novērstu fona ložņāšanu zem rāmja laukuma:
apmale: 20 pikseļi, caurspīdīga;
border-image: 1 url('data:image/svg+xml,\
\
\
’);
fons: #58a;

Tagad problēma ir atrisināta, un mūsu lauks izskatās tieši tāds pats kā iepriekš. Turklāt šoreiz mēs varam viegli mainīt stūru izmērus tikai ar vienu labojumu: vienkārši pielāgojiet rāmja platumu. Mēs pat varam animēt šo efektu, jo apmales platums atbalsta animāciju!

Un, lai mainītu fonu, tagad ir jāveic divi, nevis pieci labojumi. Turklāt, tā kā mūsu fons nav atkarīgs no stūriem pielietotā efekta, mēs varam definēt tam gradientu vai jebkuru citu rakstu ar nosacījumu, ka krāsa malās joprojām ir #58a .

Piemēram, mēs izmantojam radiālo gradientu no hsla(0,0%,100%,.2) līdz caurspīdīgam. Atrisināma ir tikai viena neliela problēma. Ja apmales attēls netiek atbalstīts, atkāpšanās risinājums neaprobežosies ar nogrieztu stūru neesamību. Tā kā fons ir apgriezts, starp lauka malu un tā saturu būs mazāk vietas. Lai to labotu, mums ir jādefinē tā pati krāsa rāmim, ko izmantojam fonam:
apmale: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\
\
\
’);
fons: #58a;
fona klips: polsterējuma kaste;

Pārlūkprogrammās, kurās tiek atbalstīta mūsu apmales attēla definīcija, šī krāsa tiks ignorēta, bet, ja apmales attēls nedarbojas, papildu apmales krāsa nodrošinās elegantāku rezerves risinājumu. Tās vienīgais trūkums ir tas, ka tas palielina labojumu skaitu, kas nepieciešams, lai mainītu fona krāsu uz trim.
IZMĒĢINI PATS!
http://play.csssecrets.io/bevel-corners

Lai gan apmales attēla risinājums ir ļoti kompakts un labi ievēro DRY principus, tas tomēr uzliek noteiktus ierobežojumus. Piemēram, mūsu fonam joprojām jābūt vai nu pilnībā, vai vismaz gar malām, piepildītam ar vienkrāsainu.

Ko darīt, ja mēs vēlamies izmantot cita veida fonu, piemēram, tekstūru, rakstu vai lineāru gradientu? Ir vēl viena metode, kurai nav šādu ierobežojumu, lai gan, protams, ir noteikti ierobežojumi tās lietošanai.

Atcerieties klipu ceļa īpašību no noslēpuma “Kā izgatavot dimantu”? CSS izgriezuma ceļiem ir pārsteidzošs īpašums: tie ļauj sajaukt procentuālās vērtības(ar kuriem mēs norādām elementa kopējos izmērus) ar absolūtajiem, nodrošinot neticamu elastību. Piemēram, kods apgriešanas ceļam, kas apgriež elementu līdz 20 pikseļu taisnstūrim ar slīpiem stūriem (mērot horizontāli), izskatās šādi:
fons: #58a;
klipa ceļš: daudzstūris(
20 pikseļi 0, aprēķins (100% - 20 pikseļi) 0, 100% 20 pikseļi,
100% aprēķins (100% - 20 pikseļi), aprēķins (100% - 20 pikseļi) 100%,
20 pikseļi 100%, 0 aprēķins (100% — 20 pikseļi), 0 20 pikseļi);
Lai gan šis koda fragments ir īss, tas neatbilst DRY principiem, un tas kļūst par vienu no lielākajām problēmām, ja neizmantojat priekšprocesoru. Faktiski šis kods vislabāk ilustrē visu piedāvāto risinājumu WET principu tīrs CSS parādīts šajā grāmatā, jo, lai mainītu leņķa lielumu šeit, ir jāveic pat astoņi (!) labojumi.

No otras puses, fonu var mainīt tikai ar vienu labojumu, tāpēc vismaz mums tas ir. Viena no šīs pieejas priekšrocībām ir tā, ka mēs varam izmantot pilnīgi jebkuru fonu vai pat izgriezt aizstājējelementus, piemēram, attēlus. Ilustrācijā parādīts attēls, kas stilizēts, izmantojot nogrieztus stūrus. Neviena no iepriekšējām metodēm nevar sasniegt šo efektu. Turklāt klipa ceļa rekvizīts atbalsta animāciju, un mēs varam animēt ne tikai stūra lieluma izmaiņas, bet arī pārejas starp dažādām formām.

Viss, kas jums jādara, ir izmantot citu apgriešanas ceļu. Papildus tam, ka šis risinājums ir daudznozīmīgs un ierobežots pārlūkprogrammas atbalsts, šī risinājuma mīnuss ir tāds, ka, ja mēs nepārliecināsimies, ka polsterējums ir pietiekami plats, teksts arī tiks nogriezts, jo elementa apgriešanai netiek izmantota neviena no tā sastāvdaļām. vērā. Turpretim gradienta metode ļauj tekstam vienkārši izstiepties ārpus nogrieztajiem stūriem (galu galā tie ir tikai daļa no fona), un apmales attēla metode darbojas tāpat kā parastās apmales - tā aplauza tekstu jaunā rindā. .

IZMĒĢINI PATS!
http://play.csssecrets.io/bevel-corners-clipped

NĀKOTNES IZGRIEZUMIEM
Nākotnē, lai realizētu nogriezto stūru efektu, mums nebūs jāizmanto CSS gradienti, izgriezums vai SVG. Jaunais stūra formas īpašums, kas iekļauts CSS Backgrounds & Borders Level 4, pasargās mūs no šīm galvassāpēm. Tas tiks izmantots, lai radītu dažādās formās sagrieztu stūru efektu kombinācijā ar robežu rādiusa īpašību, kas ir nepieciešama, lai. noteikt apgriešanas apjomu. Piemēram, lai aprakstītu 15 pikseļu nogrieztus stūrus no visām attēla pusēm, pietiek ar šādu vienkāršu kodu:

apmales rādiuss: 15 pikseļi;
stūra forma: slīpa;

Sveiki visiem, mani sauc Anna Bloka, un šodien mēs runāsim par to, kā apgriezt attēlus, neizmantojot grafikas programmas.

Pirmkārt, vietnēs, kurās saturs ar attēliem, visticamāk, netiks apgriezts nevienam konkrētam blokam.

Spilgts piemērs: emuārs vietnē WordPress.

Pieņemsim, ka vēlaties, lai raksta vākam būtu 1:1 (kvadrātveida) malu attiecība. Jūsu darbības:

Apmeklējot vietni, jūs redzēsit gaidīto rezultātu.

Bet, pieņemsim, ka esat aizmirsis apgriezt attēlu Photoshop un lejupielādējis nejaušu attēlu kā vāku no interneta, kas tad notiks?! Pareizi, izkārtojums salūzīs. Un, ja jūs vispār neesat izmantojis CSS, HD attēls var pilnībā bloķēt visu teksta skatu. Tāpēc ir svarīgi zināt, kā apgriezt attēlus, izmantojot CSS stilus.

Apskatīsim dažādas situācijas, kā to var īstenot ne tikai izmantojot CSS, bet arī SVG.

Mēģināsim apgriezt attēlu, kas ievietots, izmantojot fona attēlu. Izveidosim nelielu HTML marķējumu

Pāriesim pie CSS stila. Izmantojot fona attēlu, mēs pievienojam attēlu, norādām attēla rāmjus, centrējam attēlu, izmantojot fona pozīciju, un iestatām fona izmēru:

jpg);

fona pozīcija: centrs centrs;

platums: 300 pikseļi;

Mēs arī centrēsim savu attēlu attiecībā pret objektu, ko izveidosim. Un mēs izmantojam īpašību, kas tiek izmantota diezgan reti: object-fit .

Kaste ( pozīcija: relatīvā; pārplūde: slēptā; platums: 300 pikseļi; augstums: 300 pikseļi; ) .box img ( pozīcija: absolūtā; augšā: 50%; pa kreisi: 50%; pārveidot: tulkot (-50%, -50%); platums: 300 pikseļi; augstums: 300 pikseļi;

Manuprāt, šī ir labākā metode. Tas ir ideāli piemērots emuāriem, ja ierakstiem izmantojat pilnīgi atšķirīgu proporciju attēlus.

Vairāk par HTML un CSS varat uzzināt šeit:

Mēs varam arī izveidot attēlu apgriešanu šobrīd, ja ievietojam tos SVG elementos. Kā piemēru ņemsim apli. Mēs varam izveidot SVG, izmantojot tagus. Izveidojiet svg apmales tagu, kurā būs apļa tags un raksta tags. Raksta tagā mēs ierakstām attēla tagu. Tajā mēs norādām atribūtu xlink:href un pievienojam attēlu. Mēs pievienosim arī platuma un augstuma atribūtus. Bet tas vēl nav viss. Mums būs jāpievieno aizpildījuma vērtība. Lai mūsu darbs tiktu uzskatīts par pabeigtu, attēla atzīmei pievienosim atribūtu keepAspectRatio, kas ļaus mums aizpildīt attēlu “no sākuma līdz beigām” ap visu apli.

Es nevaru saukt šo metodi par universālu. Bet to var izmantot izņēmuma gadījumos. Piemēram, ja mēs pieskārāmies emuāra tēmai, tad šī metode ideāli varētu iekļauties tā autora iemiesojumā, kurš raksta rakstu.

Vairāk par HTML un CSS varat uzzināt šeit:

Rezultāti:
Mēs apskatījām 3 metodes attēlu apgriešanai vietnēs: izmantojot fona attēlu , izmantojot img tagu un saistītu ar svg modeli ar iegulšanu. rastra attēli izmantojot attēla tagu. Ja zināt citas metodes attēla apgriešanai, izmantojot SVG, kopīgojiet tos komentāros. Par tiem noderēs ne tikai man, bet arī citiem.

Neaizmirstiet uzdot savus jautājumus par izkārtojumu vai priekšgala izstrādi profesionāļiem vietnē FrontendHelp tiešsaistē.