Css pont, ha nem fér bele. Hosszú szöveg kivágása CSS-sel. Ívelt vágott sarkok

Üdvözlök mindenkit, a nevem Anna Blok, és ma arról fogunk beszélni, hogyan lehet képeket vágni grafikus programok használata nélkül.

Hol lehet hasznos?

Mindenekelőtt azokon a webhelyeken, ahol a képeket tartalmazó tartalom valószínűleg nem lesz levágva, hogy illeszkedjen egy adott blokkhoz.

Feltűnő példa: blog a WordPress-en.

Tegyük fel, hogy azt szeretné, ha a cikk borítójának oldalaránya 1:1 (négyzet). Az Ön cselekedetei:

1. Töltse le a megfelelő képet az internetről;
2. Vágja le a Photoshopban a kívánt arányokra;
3. Tegyen közzé egy cikket.

Amikor felkeresi az oldalt, azt az eredményt fogja látni, amit várt.

De tegyük fel, hogy elfelejtette kivágni a képet a Photoshopban, és egy véletlenszerű képet töltött fel borítóként az internetről, akkor mi lesz? Így van, az elrendezés törni fog. És ha egyáltalán nem használt CSS-t, akkor egy HD felbontású kép teljesen blokkolhatja a szöveg teljes nézetét. Ezért fontos, hogy mikor tudja levágni a képeket CSS segítség stílusok.

Nézzünk meg különböző helyzeteket, hogyan valósítható meg ez nemcsak CSS-sel, hanem SVG-vel is.

1. példa

Próbáljunk meg levágni egy képet, amely a background-image használatával van elhelyezve. Készítsünk néhány HTML jelölést

Térjünk át a CSS stílusra. Képet adunk hozzá a háttérképen keresztül, megadjuk a képünk kereteit, középre állítjuk a képet a background-position segítségével, és beállítjuk a háttér méretét:

jpg); background-position:center-center; background-size:cover; szélesség: 300 képpont; magasság: 300 képpont; )

Ez volt az első és legegyszerűbb módszer a kép kivágására. Most nézzük a második példát.

2. példa

Tegyük fel, hogy ugyanaz a doboztárolónk van, amelyben egy img címke található egy képpel, amelyet most stílusozunk.

A képünket a létrehozandó objektumhoz képest középre is helyezzük. És egy meglehetősen ritkán használt tulajdonságot használunk: object-fit .

Box ( pozíció: relatív; túlcsordulás: rejtett; szélesség: 300 képpont; magasság: 300 képpont; ) .box img ( pozíció: abszolút; felső: 50%; bal: 50%; transzformáció: fordítás (-50%, -50%); szélesség: 300 képpont; magasság: 300 képpont; objektum-illesztés: borító; )

Véleményem szerint ezt legjobb módszer. Ideális blogokhoz, ha teljesen eltérő arányú bejegyzésekhez használsz képeket.

További információ a HTML-ről és a CSS-ről itt:

3. példa

A képekhez pillanatnyilag kivágást is készíthetünk, ha beillesztjük őket SVG elemekbe. Vegyünk példának egy kört. SVG-t címkék segítségével készíthetünk. Hozzon létre egy burkoló svg címkét, amelyen belül egy körcímke és egy mintacímke lesz. A mintacímkébe írjuk a képcímkét. Ebben megadjuk az xlink:href attribútumot, és hozzáadunk egy képet. Hozzáadjuk a szélesség és magasság attribútumokat is. De ez még nem minden. Hozzá kell adnunk egy kitöltési értéket. Munkánk teljessé tétele érdekében a képcímkéhez egy segédmegőrzési attribútumot adunk, amely lehetővé teszi, hogy a képünket a kör körül „tól-ig” töltsük ki.

Ezt a módszert nem nevezhetem általánosnak. De kivételes esetekben használható. Például, ha egy blog témáját érintettük, akkor ideális esetben a cikket író szerző avatarjába illene egy ilyen módszer.

További információ a HTML-ről és a CSS-ről itt:

Eredmények:
Három módszert ismertettünk a képek kivágására a webhelyeken: háttérkép használatával , img címke használatával és mintával kapcsolatos svg beágyazással bittérképek a képcímke segítségével. Ha ismer más módszereket a kép SVG használatával történő kivágására, ossza meg őket a megjegyzésekben. Nem csak nekem, de másoknak is hasznos lesz megismerni őket.

Ne felejtse el feltenni kérdéseit az elrendezéssel vagy a front-end fejlesztéssel kapcsolatban a FrontendHelp online szakembereinek.

Van egy tetszőleges hosszúságú szöveg, amelyet egy rögzített magasságú és szélességű blokkon belül kell megjeleníteni. Ebben az esetben, ha a szöveg nem fér el teljesen, akkor egy olyan szövegrészletet kell megjeleníteni, amely teljesen beleillik a megadott blokkba, ami után az ellipszis beáll.

Egy ilyen feladat meglehetősen gyakori, ugyanakkor nem olyan triviális, mint amilyennek látszik.

Változat az egysoros szöveghez CSS-ben

Ebben az esetben használhatja a text-overflow: ellipsis tulajdonságot. Ebben az esetben a konténernek rendelkeznie kell a tulajdonsággal túlcsordulás egyenlő rejtett vagy csipesz

Blokk ( szélesség : 250 képpont ; szóköz : nincs tördelve ; túlcsordulás : rejtett ; szöveg túlcsordulás : ellipszis ; )

Többsoros szöveg változata CSS-ben

A többsoros szöveg levágásának első módja CSS használatával tulajdonságok pszeudoelemeket alkalmaznak :előttés :után. Kezdjük a HTML-jelöléssel

És most maguk az ingatlanok

Box ( túlcsordulás : rejtett ; magasság : 200 képpont ; szélesség : 300 képpont ; vonalmagasság : 25 képpont ; ) .box :before ( tartalom : "" ; float : left ; szélesség : 5 képpont ; magasság : 200 képpont ; ) .first > -child ( lebegés : jobb ; szélesség : 100 % ; margó - bal : -5px ; ) .box :after ( tartalom : "\02026" ; dobozméret : tartalomdoboz ; lebegés : jobb ; pozíció : relatív ; felül : -25px; balra: 100%; szélesség: 3em; margó balra: -3em; kitöltés jobbra: 5px; szövegigazítás: jobbra; háttérméret: 100% 100%; háttér: lineáris színátmenet (jobbra, rgba (255 , 255 , 255 , 0 ), fehér 50% , fehér );)

Egy másik módszer az oszlopszélesség tulajdonság használata, amely beállítja a többsoros szöveg oszlopszélességét. Igaz, ennek a módszernek a használatakor nem fog működni, ha ellipszist telepítünk a végére. HTML:

Blokk ( túlcsordulás : rejtett ; magasság : 200 képpont ; szélesség : 300 képpont ; )

A többsoros szöveg CSS-ben való megoldásának harmadik módja a böngészők számára Webkit. Ebben az előtaggal egyszerre több konkrét tulajdonságot kell használnunk -webkit. A fő a -webkit-line-clamp, amely lehetővé teszi a blokkban megjelenítendő sorok számának megadását. A megoldás gyönyörű, de meglehetősen korlátozott, mivel a böngészők korlátozott csoportjában működik

Blokk ( túlcsordulás : rejtett ; szöveg túlcsordulás : ellipszis ; megjelenítés : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : függőleges; )

Többsoros szöveg változata JavaScriptben

Itt egy további láthatatlan blokkot használunk, amelybe kezdetben a szövegünk kerül, majd egyenként törlődik, amíg a blokk magassága kisebb vagy egyenlő lesz a kívánt blokk magasságával. És a végén a szöveg átkerül az eredeti blokkba.

var blokk = dokumentum. querySelector(.block" ), szöveg = blokk . innerHTML , klón = dokumentum . createElement("div"); klón. stílus. pozíció = "abszolút" ; klón. stílus. láthatóság = "rejtett" ; klón. stílus. szélesség = blokk . clientWidth + "px" ; klón. innerHTML = szöveg ; dokumentum. test . appendChild(klón); var l = szöveg . hossza - 1 ; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( klón . innerHTML = text . substring (0 , l ) + "..." ; ) blokk . innerHTML = klón . innerHTML ;

Ez a jQuery beépülő modulja formájában:

(függvény ($) ( var truncate = függvény (el ) ( var text = el . text (), magasság = el . magasság (), klón = el . klón (); klón . css (( pozíció : "abszolút" , láthatóság : "rejtett" , magasság : "auto" )); el .after (klón ); var l = szöveg . hossz - 1 ; for (; l >= 0 && klón . magasság () > magasság ; -- l ) ( klón . szöveg (szöveg . részkarakterlánc (0 , l ) + "..." ); ) el. szöveg (klón . szöveg ()); klón . eltávolítás (); ); $ . fn . truncateText = függvény () ( return this . every (függvény () ( csonka ($ (this )); )); ); )(jQuery ));

Vlad Merzsevics

Annak ellenére, hogy a nagy átlós monitorok egyre olcsóbbak, felbontásuk pedig folyamatosan növekszik, időnként felmerül a feladat, hogy szűk helyen sok szöveget elférjenek. Erre például szükség lehet mobil verzió oldalon vagy olyan felületen, ahol a sorok száma fontos. Ilyenkor célszerű a hosszú szövegsorokat levágni, csak a mondat elejét hagyni. Így az interfészt kompakt formába hozzuk, és csökkentjük a kimeneti információ mennyiségét. Magát a sorvágást a szerver oldalon is meg lehet csinálni ugyanazzal a PHP-vel, de CSS-en keresztül ez egyszerűbb, és mindig megjelenítheti a teljes szöveget, például ha fölé viszi az egérkurzort. Ezután fontolja meg a szöveg képzeletbeli ollóval történő kivágásának módszereit.

Valójában a overflow tulajdonság használata rejtett értékkel. A különbségek csak a szövegünk eltérő megjelenítésében rejlenek.

Túlcsordulás használata

Ahhoz, hogy a túlcsordulás tulajdonság teljes pompájában jelenjen meg a szöveggel, meg kell szakítanunk a szöveg tördelését nowrap értékkel. Ha ez nem történik meg, akkor nem lesz szükségünk effektusra, kötőjelek kerülnek a szövegbe, és teljes egészében megjelenik. Az 1. példa bemutatja, hogyan vághat le hosszú szöveget meghatározott stílustulajdonságokkal.

Példa 1. túlcsordulás szöveghez

HTML5 CSS3 IE Cr Op Sa Fx

Eredmény ezt a példátábrán látható. egy.

Rizs. 1. A szöveg megjelenése a túlcsordulás tulajdonság alkalmazása után

Amint az ábrán látható, általánosságban egyetlen hátránya van - nem nyilvánvaló, hogy a szövegnek van folytatása, ezért ezt a felhasználót fel kell hívni. Ehhez általában gradienst vagy ellipszist használnak.

Színátmenet hozzáadása a szöveghez

Annak érdekében, hogy a jobb oldali szöveg ne érjen véget, átlátszótól háttérszínig színátmenetet alkalmazhat a tetejére (2. ábra). Ez a szöveg fokozatos feloldódásának hatását hozza létre.

Rizs. 2. Színátmenetes szöveg

A 2. példa bemutatja, hogyan hozható létre ez a hatás. Maga az elem stílusa gyakorlatilag változatlan marad, de maga a színátmenet az ::after pszeudoelem és a CSS3 segítségével kerül hozzáadásra. Ehhez a tartalom tulajdonságon keresztül beszúrunk egy üres pszeudoelemet, és a fő böngészőkhöz különböző előtagokkal színátmenetet alkalmazunk (2. példa). A gradiens szélessége a szélességen keresztül könnyen módosítható, az átlátszóság mértékét is beállíthatja úgy, hogy a 0,2-es értéket lecseréli a sajátjára.

2. példa: Színátmenet a szöveg felett

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Az intra-diszkrét arpeggio átalakítja a politartományt, ez az egyszeri vertikális az ultrapolifon polifonikus szövetben.

Ez a módszer nem működik a böngészőben internet böngésző a 8.0-s verzióig (beleértve), mert nem támogatja a színátmeneteket. De elhagyhatja a CSS3-at, és a régi módon, PNG-24 képen keresztül színátmenetet hozhat létre.

Ez a módszer csak tömör háttérrel működik, és háttérkép esetén a szöveg feletti színátmenet kiemelkedik.

ellipszis a szöveg végén

A kivágott szöveg végén színátmenet helyett ellipszis is használható. Ezenkívül automatikusan hozzáadódik a text-overflow tulajdonság használatával. Ezt minden böngésző megérti, beleértve az IE régebbi verzióit is, és ennek a tulajdonságnak az egyetlen hátránya, hogy eddig nem tisztázott állapota. Úgy tűnik, hogy ez a tulajdonság szerepel a CSS3-ban, de a hozzá tartozó kód nem megy át az érvényesítésen.

A 3. példa a text-overflow tulajdonság használatát mutatja be ellipszis értékkel, amely egy ellipszist ad hozzá. Ha az egérmutatót a szöveg fölé viszi, az teljes egészében megjelenik, és háttérszínnel kiemelve jelenik meg.

3. példa: Text-overflow használata

HTML5 CSS3 IE Cr Op Sa Fx

Ennek a példának az eredménye az ábrán látható. 3.

Rizs. 3. Szöveg ellipszissel

Ezeknek a módszereknek az a nagy előnye, hogy a színátmenet és az ellipszis nem jelenik meg, ha a szöveg rövid és teljesen belefér a megadott területre. Így a szöveg normál módon jelenik meg, ha teljesen látható a képernyőn, és levágódik, ha az elem szélessége csökken.

Probléma

A sarkok levágása nem csak gyors út egy cél elérése, de egyben népszerű stíluslehetőség is mind a nyomtatott, mind a webdizájnban. Leggyakrabban a tartály egy vagy több sarkának 45 ° -os szögben történő levágását jelenti. A közelmúltban annak a ténynek köszönhető, hogy a skeuomorfizmus kezdett teret veszíteni lapos kialakítás, ez a hatás különösen népszerű. Ha a sarkokat csak az egyik oldalon vágjuk le, és mindegyik sarka az elem magasságának 50%-át foglalja el, akkor nyíl alakú alakzat jön létre, amelyet gyakran használnak a gombok és a navigációs elemek tervezésénél is.

A CSS-ben azonban még mindig nincs elegendő eszköz ahhoz, hogy ezt a hatást egyszerű és egyértelmű egysoros megoldásokkal létrehozza. Emiatt sok fejlesztő hajlamos háttérképeket használni, akár úgy, hogy a levágott sarkokat háromszögekkel takarja (egyszínű háttéren), akár úgy, hogy a teljes hátteret egy vagy több képpel hozza létre, ahol a sarkok már le vannak vágva. Nyilvánvaló, hogy az ilyen módszerek teljesen rugalmatlanok, nehezen karbantarthatók, és növelik a késleltetést a további HTTP kérések és a webhely általános fájlmérete miatt.

Példa egy webhelyre, ahol a vágott sarok (a félig átlátszó Find & Book mező bal alsó sarkában) tökéletesen illeszkedik a designba

Megoldás

Egy Lehetséges megoldás felajánlja nekünk a mindenható CSS ​​gradienseket. Tegyük fel, hogy csak egy vágott sarkot szeretnénk, mondjuk a jobb alsó sarkot. A trükk az, hogy kihasználjuk a gradiens képességét a szög irányának (pl. 45 fok) és a színátmeneti határok helyzetének abszolút értékben történő felvételére, amelyek nem változnak annak az elemnek a méretének megváltoztatásakor, amelyhez a háttér tartozik. . A fentiekből következik, hogy egy lineáris gradiens elég lesz nekünk.

A vágott sarok létrehozásához hozzáadunk egy átlátszó színű elhalványuló szegélyt, és ugyanabban a helyen, de a háttér színével megegyező színnel. A CSS-kód a következő lenne (15 képpontos sarok esetén):

háttér: #58a;
háttér:lineáris gradiens(-45 fok, átlátszó 15px, #58a 0);

Egyszerű, igaz? Az eredményt a képen látod.

Technikailag nincs is szükségünk az első bejelentésre. Csak megoldásként adtuk hozzá: ha a CSS színátmenetek nem támogatottak, akkor a második deklarációt figyelmen kívül hagyja, így legalább egyszínű hátteret kapunk. Most tegyük fel, hogy két levágott sarkot szeretnénk, mondjuk mindkét alsót. Ezt egy színátmenettel nem lehet megtenni, ezért kettőre lesz szükségünk. Az első gondolatod valami ilyesmi lehet:

háttér: #58a;
háttér: lineáris gradiens (-45 fok, átlátszó 15 képpont, #58a 0), lineáris gradiens (45 fok, átlátszó 15 képpont, #655 0);

Ez azonban nem működik. Alapértelmezés szerint mindkét színátmenet az elem teljes területét elfoglalja, így eltakarja egymást. Kicsinyítenünk kell őket úgy, hogy mindegyiket az elem felére korlátozzuk háttérmérettel:
háttér: #58a;

háttérméret: 50% 100%

Az eredményt a képen láthatjátok.

Annak ellenére, hogy háttérméretet alkalmaztunk, a színátmenetek továbbra is átfedik egymást. Ennek az az oka, hogy elfelejtettük kikapcsolni a háttér-ismétlést, így mindegyik háttér kétszer ismétlődik. Következésképpen az egyik háttér még mindig eltakarja a másikat, de ezúttal az ismétlés miatt. Egy új verzió kód így néz ki:
háttér: #58a;
háttér: lineáris gradiens(-45 fok, átlátszó 15px, #58a 0) jobb, lineáris gradiens(45 fok, átlátszó 15px, #655 0) bal;
háttérméret: 50% 100%

Az eredményt láthatja a képen, és megbizonyosodhat arról, hogy az - végre! - működik! Valószínűleg már kitaláltad, hogyan lehet ezt a hatást mind a négy sarokra alkalmazni. Négy színátmenetre és a következő kódra lesz szüksége:

háttér: #58a;
háttér: lineáris gradiens (135 fok, átlátszó 15 képpont, #58a 0) bal felső,

lineáris gradiens (-135 fok, átlátszó 15 képpont, #655 0) jobb felső,

lineáris gradiens (-45 fok, átlátszó 15 képpont, #58a 0) jobb alsó,

lineáris gradiens(45 fok, átlátszó 15px, #655 0) bal alsó;
háttér-méret: 50% 50%;
háttér-ismétlés: nincs ismétlés;

TANÁCS
Különböző színeket (#58a és #655) használtunk, hogy megkönnyítsük a hibakeresést. A gyakorlatban mindkét színátmenet azonos színű lesz.
De az előző kóddal az a probléma, hogy nehéz karbantartani. A háttérszín megváltoztatásához öt szerkesztést, a szögérték megváltoztatásához pedig négyet kell végrehajtani. Az előfeldolgozóval létrehozott mixin csökkentheti az ismétlések számát. Így nézne ki ez a kód SCSS-ben:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
háttér: $bg;
háttér:
lineáris gradiens (135 fok, átlátszó $tl, $bg 0)
bal felső,
lineáris gradiens (225 fok, átlátszó $tr, $bg 0)
jobb felső,
lineáris gradiens (-45 fok, átlátszó $br, $bg 0)
jobb alsó,
lineáris gradiens (45 fok, átlátszó $bl, $bg 0)
bal alsó;
háttér-méret: 50% 50%;
háttér-ismétlés: nincs ismétlés;
}

Ezután, ha szükséges, az alábbi módon hívható meg 2-5 argumentummal:
SCSS
@beveled-corners (#58a, 15px, 5px);
Ebben a példában egy olyan elemet kapunk, amelynek bal felső és jobb alsó sarka 15 képponttal, a jobb felső és bal alsó sarka pedig 5 képponttal van levágva, hasonlóan ahhoz, ahogyan a szegélysugár működik, ha kevesebbet adunk meg. mint négy érték. Ez azért lehetséges, mert az SCSS mixinünkben az argumentumok alapértelmezett értékeiről is gondoskodunk – és igen, ezek az alapértelmezett értékek más argumentumokra is vonatkozhatnak.
PRÓBÁLD KI MAGAD!
http://play.csssecrets.io/bevel-corners-gradients

Ívelt vágott sarkok

Kiváló példa az ívelt vágott sarkok használatára egy webhelyen http://g2geogeske.com a tervező központi dizájnelemmé tette őket: jelen vannak a navigációban, a tartalomban, sőt a láblécben is.
A gradiens módszer egy változata lehetővé teszi ívelt vágott sarkok létrehozását, ezt a hatást sokan "belső határsugárnak" nevezik, mert úgy néz ki, mint a lekerekített sarkok fordított változata. Az egyetlen különbség a sugárirányú gradiensek használata a lineárisok helyett:
háttér: #58a;
háttér: radial-gradient (kör a bal felső sarokban, átlátszó 15px, #58a 0) bal felső,

radiális gradiens (kör jobb felső sarokban, átlátszó 15 képpont, #58a 0) jobb felső,

radiális gradiens (kör a jobb alsó sarokban, átlátszó 15 képpont, #58a 0) jobb alsó,

radial-gradient(kör a bal alsó sarokban, átlátszó 15px, #58a 0) bal alsó;
háttér-méret: 50% 50%;
háttér-ismétlés: nincs ismétlés;

Az előző technikához hasonlóan a sarok mérete a színátmeneti határok pozícióival szabályozható, és a mixin ezt a kódot alkalmasabbá teheti a további karbantartásra.

PRÓBÁLD KI MAGAD!
http://play.csssecrets.io/scoop-corners

Megoldás beépített SVG-vel és keretes képpel

Bár a gradiens alapú megoldás működik, van néhány hátránya:
a kód nagyon hosszú és tele van ismétléssel. A legáltalánosabb esetben, amikor mind a négy sarkot ugyanannyival kell levágnunk, ennek az összegnek a megváltoztatása négy szerkesztést von maga után a kódban.

Hasonlóképpen a háttérszín megváltoztatásához is négy szerkesztés szükséges, és ha tartalék megoldást is tartalmaz, akkor mind az öt; egy levágott sarok méretének változásának animálása hihetetlenül nehéz, sőt egyes böngészőkben lehetetlen is. Szerencsére a kívánt eredménytől függően még pár módszert alkalmazhatunk. Az egyik a szakszervezetet érinti határ-kép egy string SVG kóddal, amelyben a sarkok generálódnak.

Tudva, hogyan működik határ-kép(ha fel kell frissítened ezt a tudást az emlékezetedben, találsz rá tippet) el tudod már képzelni, hogy a szükséges SVG-a kód?

Mivel a méretek számunkra nem fontosak (a keretes kép gondoskodik a méretezésről, az SVG-rajzok pedig mérettől függetlenül tökéletesen méreteznek - áldott vektoros grafika!), minden méret egynek tekinthető, hogy kényelmesebb és rövidebb értékekkel működjön. A vágási szög értéke eggyel lesz egyenlő, és az egyenes oldalak is egyenértékűek lesznek. Eredmény (az olvashatóság kedvéért nagyítva). Az ehhez szükséges kód az alábbiakban látható:
keret: 15px tömör átlátszó;


width="3" height="3" fill="%2358a">\
\
’);

Vegye figyelembe, hogy a szeletelési lépés mérete 1 . Ez nem 1 pixelt jelent; a tényleges méretet az SVG fájl koordinátarendszere határozza meg (ezért nincsenek mértékegységeink). Ha százalékokat használunk, akkor a kép 1/3-át törtértékkel kellene megközelítenünk, például 33,34%-kal. Mindig kockázatos közelítő értékekhez folyamodni, hiszen in különböző böngészők az értékek különböző pontossággal kerekíthetők. Ha pedig ragaszkodunk az SVG-fájl koordinátarendszer-egységeihez, megkíméljük magunkat az ezzel a kerekítéssel járó fejfájástól.

Mint látható, a levágott sarkok jelen vannak, de a háttér nem. Ezt a problémát kétféleképpen lehet megoldani: vagy meghatározzuk a hátteret, vagy hozzáadjuk kulcsszó töltse ki a keret-kép deklarációt, hogy a középső szeletelő elemet ne dobja el. Példánkban inkább külön hátteret definiálunk, mivel ez a definíció egyúttal megoldásként szolgál a megoldást nem támogató böngészők számára is.

Ráadásul valószínűleg észrevette, hogy a levágott sarkok kisebbek, mint az előző technikánál, és ez zavaró lehet. Hiszen a szegély szélességét 15px-re állítottuk! Ennek oka, hogy a gradiens megoldásban ezt a 15 pixelt a gradiens irányára merőleges gradiens vonal mentén mértük. A keret szélességét azonban nem átlósan, hanem vízszintesen/függőlegesen mérik.

Érzed, mire vezetek? Igen, igen, ismét a mindenütt jelen lévő Pitagorasz-tétel, amelyet aktívan használtunk. Az ábrán látható diagramnak tisztáznia kell a helyzetet.

Röviden, ahhoz, hogy ugyanazt a vizuális eredményt elérjük, olyan szegélyszélességre van szükségünk, amely kétszerese annak a méretnek, amelyet a gradiens módszerben használnánk. Ebben az esetben egy pixelről van szó, amit a legésszerűbb 20 képponthoz közelíteni, hacsak nem állunk szemben azzal a feladattal, hogy az átlóméretet a lehető legközelebb hozzuk az áhított 15 képponthoz:

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

width="3" height="3" fill="%2358a">\

0,2″/>\
’);
háttér: #58a;
Azonban amint látja, az eredmény nem egészen az, amit vártunk.

Hová tűntek a gondosan megvágott sarkaink? Ne félj, fiatal padawan, a sarkok még mindig ott vannak. Azonnal megérti, mi történt, ha más háttérszínt állít be, például #655-öt.
Ahogy az alábbi ábra is mutatja, sarkaink eltűnésének oka a háttérben van: a fent meghatározott háttér egyszerűen eltakarja őket. Csak annyit kell tennünk, hogy kijavítsuk ezt a kellemetlenséget, hogy a background-clip segítségével megakadályozzuk, hogy a háttér bemásszon a keret területe alá:
keret: 20px tömör átlátszó;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2″/>\
’);
háttér: #58a;

Most a probléma megoldódott, és a területünk pontosan úgy néz ki, mint korábban. Ráadásul ezúttal egyszerűen átméretezhetjük a sarkokat egyetlen szerkesztéssel: csak állítsa be a szegély szélességét. Akár animálhatjuk is ezt a hatást, mert a keretszélesség támogatja az animációt!

A háttér megváltoztatásához pedig most két szerkesztésre van szükség öt helyett. Továbbá, mivel a hátterünk független a sarokeffektustól, definiálhatunk hozzá gradienst vagy bármilyen más mintát, amíg az élek még mindig #58a .

Például radiális színátmenetet használunk a hsla(0,0%,100%,.2) színtől az átlátszóig. Már csak egy apró probléma maradt a megoldásra. Ha a keret-kép nem támogatott, akkor a tartalék megoldás nem korlátozódik a vágott sarkok hiányára. Mivel a háttér le van vágva, a mező széle és a tartalma közötti távolság csökken. Ennek kijavításához a keretet ugyanarra a színre kell állítanunk, mint a háttérben:
keret: 20px tömör #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
háttér: #58a;
háttér-klip: padding-box;

Azokban a böngészőkben, ahol a mi definíciónk határ-kép támogatott, ezt a színt figyelmen kívül hagyja, de ahol a keret-kép nem működik, a kiegészítő keretszín elegánsabb tartalék megoldást nyújt. Egyetlen hátránya a háttérszín háromra cseréléséhez szükséges szerkesztések számának növekedése.
PRÓBÁLD KI MAGAD!
http://play.csssecrets.io/bevel-corners

Vágógörbe megoldás

Bár a border-image megoldás nagyon kompakt és jól követi a DRY elveket, bizonyos korlátokat támaszt. Például a hátterünknek vagy teljes egészében, vagy legalább egyszínűnek kell lennie a széleken.

De mi van, ha más típusú hátteret szeretnénk használni, például textúrát, mintát vagy lineáris színátmenetet? Van egy másik módszer is, amelyre nincsenek ilyen korlátozások, bár természetesen vannak bizonyos korlátozások a használatára vonatkozóan.

Emlékezzen az ingatlanra klipútvonal a "Hogyan készítsünk rombuszt" titokból? A CSS vágógörbéknek van egy elképesztő tulajdonsága: lehetővé teszik a százalékos értékek (amelyeket az elem teljes méretének megadására használunk) keverését abszolút értékekkel, hihetetlen rugalmasságot biztosítva. Például a vágógörbe kódja, amely egy elemet egy 20 képpontos ferde téglalap alakúra vág (vízszintesen mérve), így néz ki:
háttér: #58a;
vágógörbe: sokszög(
20px 0, kalkulált (100% - 20px) 0, 100% 20px,
100% számítás (100% - 20 képpont), számított (100% - 20 képpont) 100%,
20px 100%, 0 számítás (100% - 20px), 0 20px);
Bár rövid, ez a kódrészlet nem követi a DRY elveket, és ez lesz az egyik legnagyobb probléma, ha nem használ előfeldolgozót. Valójában ez a kód a legjobban illusztrálja a WET-elvet a könyvben bemutatott összes tiszta CSS-megoldás közül, mert nyolc (!) szerkesztést igényel a sarokméret megváltoztatásához.

Másrészt a háttér egyetlen szerkesztéssel megváltoztatható, így legalább ez megvan. Ennek a megközelítésnek az egyik előnye, hogy teljesen bármilyen hátteret, vagy akár kivágást helyettesítő elemet, például képeket használhatunk. Az ábrán egy levágott sarkokkal stilizált kép látható. Az előző módszerek egyike sem képes ilyen hatást elérni. Emellett a clip-path tulajdonság támogatja az animációt, és nem csak a sarok méretének változását, hanem a különböző formák közötti átmenetet is animálhatjuk.

Mindössze egy másik vágógörbe használata szükséges. Amellett, hogy bőbeszédű és korlátozott a böngésző támogatása, ennek a megoldásnak az a hátulütője, hogy ha nem ügyelünk elég széles padding-ra, akkor a szöveg is le lesz vágva, mert egy elem kivágásánál nem veszik figyelembe az összetevőit. bármilyen módon. Ezzel szemben a színátmenetes módszer lehetővé teszi, hogy a szöveg egyszerűen túlnyúljon a levágott sarkokon (mivel azok csak a háttér részét képezik), míg a keret-kép módszer ugyanúgy működik, mint a normál szegélyek, új sorba burkolva a szöveget.

PRÓBÁLD KI MAGAD!
http://play.csssecrets.io/bevel-corners-clipped

JÖVŐBEN VÁGÁSSAROK
A jövőben nem kell folyamodnunk ahhoz, hogy a levágott sarkok hatását megvalósítsuk CSS gradiensek, vágás vagy SVG. Új ingatlan sarok forma, tartalmazza CSS hátterek és szegélyek 4. szint , megkímél minket ettől a fejfájástól.. Különböző formájú levágott sarkok hatásának létrehozására szolgál majd, kombinálva a border-radius tulajdonsággal, ami a kivágás mennyiségének meghatározásához szükséges. Például a 15 képpontos vágott sarkok leírásához egy kép minden oldalán ez az egyszerű kód elegendő lenne:

határsugár: 15 képpont;
sarokforma: ferde;

Olvassa el is

Ellipszis beírása a szöveg végére többféle módon is megvalósítható, rendelkezésünkre áll css és js.

Először is vessünk egy pillantást a problémára. Van egy blokk elrendezés

• Sok érdekes szöveg a stílusokról, az elrendezésről, a programozásról és még sok más érdekesség a webhelyekről


• De hogyan tehetünk ellipszist, ha nem tudjuk korlátozni a blokk méretét?


• Mit szólnál egy js szkripthez? Meg tudja csinálni, tényleg.


• Hm, biztosan lehet. Itt van a kód, megszámolja a Unicode karaktereket, és szükség esetén levágja

Most el kell érnünk azt a hatást, hogy a lista minden elemében levágjuk a szöveget, ezen kívül még egy ellipszist kell hozzáadnunk.

css szöveg kivágása

Ehhez hozzon létre egy stílust a cinegeosztály számára
.cinege(
white-space: nowrap; /* Szöveg tördelésének megszakítása */
túlcsordulás: rejtett; /* Tartalom kivágása */
kitöltés: 5px /* Mezők */
szöveg-túlcsordulás: ellipszis; /* Ellipszis */
}

Ennek a megoldásnak az a sajátossága, hogy ha a szöveg belefér a blokkméretbe, akkor az ellipszis nem kerül hozzáadásra. Ami nem mindig megoldás a problémára.

Leggyakrabban a szöveget a hosszára kell vágnia, és csak ezután kell hozzáadnia pontokat.
Vannak olyan feladatok is, amikor mindenképpen pontokat kell hozzáadni (mindegy, hogy milyen hosszú a szöveg, legalább 3 betű). És ha a szöveg hosszabb egy bizonyos méretnél, akkor le kell vágni. Ebben az esetben szkriptek használata szükséges.

Vágja le a szöveget a karakterek számával, és adjon hozzá ellipsziseket a hossztól függetlenül

Mit csinálunk?

Megmondjuk a szkriptnek, hogy mely elemeket kell feldolgozni.
Ehhez a var elem = document.getElementsByClassName("tit") sorban; adja meg az elem osztályát (meg kell egyeznie).

Ezután be kell állítania a szöveg méretét a kivágás előtt. Ezek a mi rövid karakterláncaink, amelyekhez egy ellipszis kerül hozzáadásra. A var size = 75 változó felelős ezért;

Most a szkriptnek végig kell mennie az összes elemen a kívánt osztállyal, és le kell tennie az ellipszist.
A szkript ellenőrzi az egyes sorok hosszát, és levágja a szöveget, ha az hosszabb 75 karakternél. Ha a hosszúság kisebb, akkor egyszerűen egy ellipszis kerül hozzáadásra (az if(elem[i].innerHTML.length > size) sor).

A szkript működését a bemutató oldalon láthatja. Ez minden, most már tudja, hogyan vághat le hosszú szöveget különféle módszerekkel.