Yksi- tai monirivisen tekstin leikkaaminen korkeuden mukaan lisäämällä ellipsin. Kuinka käyttää CSS:ää pitkän tekstin Css-pisteiden leikkaamiseen, jos se ei sovi
Ongelma
Kulmien leikkaaminen ei ole vain kyse nopea tapa saavuttaa tavoitteen, mutta myös suosittu muotoiluvaihtoehto sekä paino- että web-suunnittelussa. Useimmiten se sisältää yhden tai useamman säiliön kulman leikkaamisen 45° kulmassa. Viime aikoina tämä vaikutus on erityisen suosittu, koska skeuomorfismi on alkanut menettää jalansijaa litteälle suunnittelulle. Kun kulmat leikataan vain toiselta puolelta ja jokainen kulma vie 50 % elementin korkeudesta, syntyy nuolen muotoinen muoto, jota käytetään usein myös painikkeiden ja navigointielementtien suunnittelussa.
CSS:llä ei kuitenkaan vieläkään ole tarpeeksi työkaluja tämän tehosteen luomiseen yksinkertaisilla, puhtailla yksikerroksilla. Tämän vuoksi monet kehittäjät käyttävät taustakuvia: joko peittämällä leikatut kulmat kolmioilla (kiinteällä taustalla) tai luomalla koko tausta käyttämällä yhtä tai useampaa kuvaa, jossa kulmat on jo leikattu. Sellaiset menetelmät ovat luonnollisesti täysin joustamattomia, vaikeita ylläpitää ja lisäävät latenssia ylimääräisten HTTP-pyyntöjen ja verkkosivuston tiedostojen kokonaiskoon vuoksi.
Esimerkki verkkosivustosta, jossa leikattu kulma (puoliläpinäkyvän Find & Book -kentän vasemmassa alakulmassa) sopii täydellisesti suunnitteluun
Ratkaisu
Yksi Mahdollinen ratkaisu tarjota meille kaikkivaltiaat CSS-gradientit. Oletetaan, että haluamme vain yhden leikatun kulman, esimerkiksi oikean alakulman. Temppu on hyödyntää gradienttien kykyä ottaa kulman suunta (esimerkiksi 45 astetta) ja värisiirtymän rajojen sijainti absoluuttisina arvoina, jotka eivät muutu, kun elementin kokonaismitat, joihin tausta kuuluu muuttaa. Yllä olevasta seuraa, että yksi lineaarinen gradientti riittää meille.
Lisäämme läpinäkyvän häivytysreunuksen leikatun kulman luomiseksi ja toisen häivytysreunuksen samaan kohtaan, mutta taustaa vastaavalla värillä. CSS-koodi on seuraava (15px-kulmalle):
tausta: #58a;
background:linear-gradient(-45 astetta, läpinäkyvä 15px, #58a 0);
Yksinkertaista, eikö? Voit nähdä tuloksen kuvasta.
Teknisesti emme edes tarvitse ensimmäistä ilmoitusta. Lisäsimme sen vain kiertotapana: jos CSS-gradientteja ei tueta, toinen ilmoitus ohitetaan, joten saamme ainakin tasavärisen taustan. Oletetaan nyt, että tarvitsemme kaksi leikattua kulmaa, sanotaan molemmat alakulmat. Tätä ei voida tehdä vain yhdellä gradientilla, joten tarvitsemme kaksi. Ensimmäinen ajatuksesi voi olla jotain tällaista:
tausta: #58a;
tausta: lineaarinen gradientti (-45 astetta, läpinäkyvä 15px, #58a 0), lineaarinen gradientti (45 astetta, läpinäkyvä 15px, #655 0);
Tämä ei kuitenkaan toimi. Oletusarvoisesti molemmat liukuvärit vievät koko elementin alueen, joten ne peittävät toisensa. Meidän on tehtävä niistä pienempiä rajoittamalla jokainen niistä puoleen elementistä taustakoon avulla:
tausta: #58a;
taustan koko: 50 % 100 %;
Voit nähdä tuloksen kuvasta.
Vaikka käytimme taustakokoa , liukuvärit menevät silti päällekkäin. Syynä on se, että unohdimme kytkeä taustatoiston pois päältä, joten jokainen tausta toistetaan kahdesti. Näin ollen yksi taustoista peittää edelleen toisen, mutta tällä kertaa toiston kautta. Uusi versio koodi näyttää tältä:
tausta: #58a;
tausta: lineaarinen gradientti(-45°, läpinäkyvä 15px, #58a 0) oikea, lineaarinen gradientti(45°, läpinäkyvä 15px, #655 0) vasen;
taustan koko: 50 % 100 %;
Voit nähdä tuloksen kuvasta ja varmistaa, että se on vihdoin siellä! - toimii! Olet luultavasti jo arvannut, kuinka voit soveltaa tätä tehostetta kaikkiin neljään kulmaan. Tarvitset neljä gradienttia ja seuraavan kaltaisen koodin:
tausta: #58a;
tausta: lineaarinen gradientti (135 astetta, läpinäkyvä 15px, #58a 0) vasemmassa yläkulmassa,
lineaarinen gradientti (-135 astetta, läpinäkyvä 15 kuvapistettä, #655 0) Yläoikea,
lineaarinen gradientti (-45 astetta, läpinäkyvä 15px, #58a 0) alhaalla oikea,
lineaarinen gradientti (45 astetta, läpinäkyvä 15px, #655 0) alhaalla vasen;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;
NEUVOT
Käytimme eri värejä (#58a ja #655) vianmäärityksen helpottamiseksi. Käytännössä molemmat gradientit ovat samanvärisiä.
Mutta ongelma edellisessä koodissa on, että sitä on vaikea ylläpitää. Taustavärin muuttaminen vaatii viisi muokkausta ja kulman arvon muuttaminen neljä. Esiprosessorilla luotu mixin voisi vähentää toistojen määrää. Tältä tämä koodi näyttäisi SCSS:ssä:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
tausta: $bg;
tausta:
lineaarinen gradientti (135 astetta, läpinäkyvä $tl, $bg 0)
ylävasen,
lineaarinen gradientti (225 astetta, läpinäkyvä $tr, $bg 0)
Yläoikea,
lineaarinen gradientti (-45 astetta, läpinäkyvä $br, $bg 0)
ala oikea,
lineaarinen gradientti (45 astetta, läpinäkyvä $bl, $bg 0)
alhaalla vasemmalla;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;
}
Sitä voidaan sitten kutsua tarvittaessa, kuten alla on esitetty, 2-5 argumentilla:
SCSS
@sisältää viistetyt kulmat (#58a, 15px, 5px);
Tässä esimerkissä päädymme elementtiin, jonka vasenta ylä- ja alakulmaa on leikattu 15 pikselillä ja sen oikeaa yläkulmaa ja vasenta alakulmaa leikattu 5 pikselillä, samalla tavalla kuin reunasäde toimii määritettäessä alle neljä arvoa. Tämä on mahdollista, koska huolehdimme myös SCSS-sekoituksemme argumenttien oletusarvoista - ja kyllä, nämä oletusarvot voivat viitata myös muihin argumentteihin.
KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners-gradients
Kaarevat leikatut kulmat
Erinomainen esimerkki kaarevien leikattujen kulmien käyttämisestä verkkosivustolla. http://g2geogeske.com suunnittelija on tehnyt niistä keskeisen suunnittelun elementin: ne ovat läsnä navigaatiossa, sisällössä ja jopa alatunnisteessa.
Menetelmän muunnelma gradienteilla mahdollistaa kaarevien leikkauskulmien luomisen - efektiä, jota monet kutsuvat "sisäreunan säteeksi", koska se näyttää pyöristetyistä kulmista käänteiseltä versiolta. Ainoa ero on säteittäisten gradienttien käyttö lineaaristen gradienttien sijaan:
tausta: #58a;
tausta: radial-gradient (ympyrä vasemmassa yläkulmassa, läpinäkyvä 15px, #58a 0) ylävasen,
radial-gradient (ympyrä oikeassa yläkulmassa, läpinäkyvä 15px, #58a 0) yläoikealla,
radial-gradient (ympyrä alhaalla oikealla, läpinäkyvä 15px, #58a 0) alhaalla oikea,
radial-gradient(ympyrä alhaalla vasemmalla, läpinäkyvä 15px, #58a 0) alhaalla vasen;
taustan koko: 50 % 50 %;
taustatoisto: ei toistoa;
Kuten edellisessä tekniikassa, kulman kokoa voidaan ohjata värisiirtymärajojen paikoilla, ja mixin voi tehdä tästä koodista sopivamman jatkohuoltoon.
KOKEILE ITSE!
http://play.csssecrets.io/scoop-corners
Ratkaisu merkkijonolla SVG ja border-image
Vaikka gradienttipohjainen ratkaisu toimii, sillä on muutamia haittoja:
Koodi on erittäin pitkä ja täynnä toistoa. Yleisimmissä tapauksissa, kun meidän on leikattava kaikkia neljää kulmaa samalla määrällä, tämän arvon muuttaminen edellyttää neljä muutosta koodiin.
Samoin taustavärin muuttaminen vaatii neljä muokkausta, ja jos ottaa huomioon vararatkaisun, niin kaikki viisi; Muutosten animointi leikatun kulman kokoon on uskomattoman vaikeaa, ja joissakin selaimissa se on täysin mahdotonta. Onneksi halutusta tuloksesta riippuen voimme käyttää paria muuta menetelmää. Yksi niistä liittyy yhdistymiseen raja-kuva merkkijonolla SVG-koodilla, jossa kulmat luodaan.
Tietäen kuinka se toimii raja-kuva(jos sinun täytyy päivittää tätä tietoa muistissasi, löydät vihjeen), voitko jo kuvitella miltä vaaditun pitäisi näyttää? SVG-koodi?
Koska mitat ovat meille merkityksettömiä (reunakuva huolehtii skaalauksesta ja SVG-kuvat skaalautuvat täydellisesti koosta riippumatta - ole siunattu Vektorigrafiikka!), kaikki koot voidaan rinnastaa yhtenäisyyteen, jotta niitä voidaan käyttää kätevämmällä ja lyhyemmällä arvolla. Leikatun kulman arvo on yksi, ja myös suorat sivut ovat yhtä. Tulos (suurennettu helpottamaan katselua). Tätä varten tarvittava koodi näkyy alla:
reunus: 15px läpinäkyvä;
leveys=”3″ height=”3″ fill=”%2358a”>\
’);
Huomaa, että viipalointivaiheen koko on 1. Tämä ei tarkoita yhtä pikseliä; todellinen koko määräytyy SVG-tiedoston koordinaattijärjestelmän mukaan (siksi meillä ei ole yksiköitä). Jos käyttäisimme prosenttiosuuksia, meidän pitäisi arvioida 1/3 kuvasta murto-osalla, kuten 33,34 % . On aina riskialtista turvautua likimääräisiin arvoihin, koska eri selaimet Arvot voidaan pyöristää eri tarkkuudella. Ja pitämällä kiinni SVG-tiedoston koordinaattijärjestelmän muutosyksiköistä säästymme päänsärkyltä, joka liittyy kaikkeen pyöristykseen.
Kuten näet, leikatut kulmat ovat läsnä, mutta taustaa ei ole. Tämä ongelma voidaan ratkaista kahdella tavalla: joko määrittelemällä tausta tai lisäämällä avainsana täytä border-image-ilmoitus, jotta keskiosan elementtiä ei hylätä. Esimerkissämme määritämme mieluummin erillisen taustan, koska tämä määritelmä toimii myös kiertotavana selaimille, jotka eivät tue tätä ratkaisua.
Lisäksi olet todennäköisesti huomannut, että leikatut kulmat ovat nyt pienempiä kuin edellisellä tekniikalla, mikä voi olla hämmentävää. Asetamme kehyksen leveydeksi 15px! Syynä on se, että gradienttiratkaisussa nämä 15 pikseliä mitattiin gradienttiviivaa pitkin, joka on kohtisuorassa gradientin suuntaan nähden. Kehyksen leveyttä ei kuitenkaan mitata diagonaalisesti, vaan vaaka-/pystysuoraan.
Tunnetko minne olen menossa tämän kanssa? Kyllä, kyllä, jälleen kaikkialla läsnä oleva Pythagoraan lause, jota käytimme aktiivisesti. Kuvan kaavion pitäisi selventää asioita.
Lyhyesti sanottuna, saman visuaalisen tuloksen saavuttamiseksi tarvitsemme reunuksen leveyden, joka on 2 kertaa suurempi kuin gradienttimenetelmässä käyttämämme koko. Tässä tapauksessa se on pikseli, joka on järkevintä arvioida 20 pikseliä, ellemme joudu saamaan lävistäjän kokoa mahdollisimman lähelle arvostettua 15 kuvapistettä:
border-image: 1 url('data:image/svg+xml,\
leveys=”3″ height=”3″ fill=”%2358a”>\
0,2″/>\
’);
tausta: #58a;
Kuten näette, tulos ei kuitenkaan ole aivan sitä mitä odotimme.
Mihin meidän huolella leikatut kulmat katosivat? Älä pelkää, nuori Padawan, kulmat ovat edelleen paikoillaan. Ymmärrät heti, mitä tapahtui, jos asetat erilaisen taustavärin, kuten #655.
Kuten alla oleva kuva osoittaa, syy kulmiemme katoamiseen johtuu taustasta: yllä määrittämämme tausta peittää ne yksinkertaisesti. Ainoa mitä meidän tarvitsee tehdä tämän haitan poistamiseksi, on käyttää taustaleikettä estämään taustaa hiipimästä kehysalueen alle:
reunus: 20px läpinäkyvä;
border-image: 1 url('data:image/svg+xml,\
leveys=”3″ height=”3″ fill=”%2358a”>\
0,2″/>\
’);
tausta: #58a;
Nyt ongelma on ratkaistu ja alamme näyttää täsmälleen samalta kuin ennen. Lisäksi tällä kertaa voimme helposti muuttaa kulmien kokoa yhdellä muokkauksella: yksinkertaisesti säädä kehyksen leveyttä. Voimme jopa animoida tämän tehosteen, koska reunan leveys tukee animaatiota!
Ja taustan muuttaminen vaatii nyt kaksi muokkausta viiden sijasta. Lisäksi, koska taustamme ei riipu kulmiin kohdistetusta tehosteesta, voimme antaa sille gradientin tai minkä tahansa muun kuvion, kunhan reunojen väri on edelleen #58a .
Käytämme esimerkiksi säteittäinen gradientti väristä hsla(0,0%,100%,.2) läpinäkyvään. Ratkaisettavana on vain yksi pieni ongelma. Jos reunakuvaa ei tueta, vararatkaisu ei rajoitu leikattujen kulmien puuttumiseen. Koska tausta on rajattu, kentän reunan ja sen sisällön väliin jää vähemmän tilaa. Korjataksemme tämän, meidän on määritettävä sama väri kehykselle, jota käytämme taustalle:
reunus: 20px kiinteä #58a;
border-image: 1 url('data:image/svg+xml,\
leveys=”3″ height=”3″ fill=”%2358a”>\
’);
tausta: #58a;
taustaleike: pehmustelaatikko;
Selaimissa, joissa määritelmämme raja-kuva on tuettu, tämä väri ohitetaan, mutta jos reunuskuva epäonnistuu, ylimääräinen reunaväri tarjoaa tyylikkäämmän vararatkaisun. Sen ainoa haittapuoli on, että se lisää tarvittavien muokkausten määrää taustavärin muuttamiseen kolmeen.
KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners
Ratkaisu Rajauspolku
Vaikka border-image-ratkaisu on erittäin kompakti ja noudattaa hyvin DRY-periaatteita, se pakottaa tiettyjä rajoituksia. Esimerkiksi taustamme tulisi silti olla joko kokonaan tai ainakin reunoilta täytetty yhtenäisellä värillä.
Entä jos haluamme käyttää erityyppistä taustaa, kuten tekstuuria, kuviota tai lineaarista gradienttia? On olemassa toinen menetelmä, jolla ei ole tällaisia rajoituksia, vaikka sen käytölle on tietysti tiettyjä rajoituksia.
Muista omaisuus leikepolku salaisuudesta "Kuinka tehdä rombi"? CSS-leikkauspoluilla on hämmästyttävä ominaisuus: niiden avulla voit sekoittaa prosenttiarvoja (tapa, jolla määritämme elementin kokonaismitat) absoluuttisiin arvoihin, mikä tarjoaa uskomattoman joustavuuden. Esimerkiksi koodi syväyspolulle, joka rajaa elementin 20 kuvapisteen suorakulmioon, jossa on viistetyt kulmat (mitattuna vaakasuunnassa), näyttää tältä:
tausta: #58a;
leikepolku: polygon(
20px 0, laskettu (100% - 20px) 0, 100% 20px,
100 % laskettu (100 % - 20 kuvapistettä), laskettu (100 % - 20 kuvapistettä) 100 %
20px 100%, 0 calc(100% - 20px), 0 20px);
Vaikka tämä koodi on lyhyt, se ei noudata DRY-periaatteita, ja tästä tulee yksi suurimmista ongelmista, jos et käytä esiprosessoria. Itse asiassa tämä koodi on paras esimerkki WET-periaatteesta kaikista ratkaisuista puhdas CSS esitetty tässä kirjassa, koska kulman koon muuttaminen edellyttää jopa kahdeksan (!) muokkausta.
Toisaalta taustan voi vaihtaa yhdellä muokkauksella, joten ainakin meillä on se. Yksi tämän lähestymistavan eduista on, että voimme käyttää täysin mitä tahansa taustaa tai jopa rajata korvaavia elementtejä, kuten kuvia. Kuvassa on leikattujen kulmien avulla tyylitelty kuva. Mikään aiemmista menetelmistä ei voi saavuttaa tätä vaikutusta. Lisäksi clip-path-ominaisuus tukee animaatiota, ja voimme animoida kulman koon muutoksen lisäksi myös siirtymiä eri muotojen välillä.
Sinun tarvitsee vain käyttää erilaista syväyspolkua. Sen lisäksi, että se on monisanainen ja sillä on rajoitettu selaintuki, tämän ratkaisun haittapuoli on se, että jos emme varmista, että täyte on riittävän leveä, myös teksti leikataan pois, koska elementin rajaus ei ota mitään sen komponentteja huomioon. Sitä vastoin gradienttimenetelmä sallii tekstin yksinkertaisesti ulottua leikattujen kulmien ulkopuolelle (ne ovat loppujen lopuksi vain osa taustaa), ja border-image -menetelmä toimii samalla tavalla kuin tavalliset reunukset - se kääri tekstin uudelle linja.
KOKEILE ITSE!
http://play.csssecrets.io/bevel-corners-clipped
TULEVAISUUDEN LEIKKAUKSET
Tulevaisuudessa meidän ei tarvitse turvautua leikattujen kulmien vaikutuksen toteuttamiseen CSS-gradientit, leikkaus tai SVG. Uusi omaisuus kulman muotoinen, mukana CSS-taustat ja reunat, taso 4
, pelastaa meidät tältä päänsärkyltä.Sillä luodaan eri muotoihin leikattujen kulmien vaikutus yhdessä rajaussäteen ominaisuuden kanssa, joka on välttämätön rajausmäärän määrittämiseksi. Esimerkiksi kuvaamaan 15 pikseliä leikattuja kulmia kuvan kaikilta puolilta seuraava yksinkertainen koodi riittää:
reunan säde: 15px;
kulman muoto: viisto;
Lue myös
On mielivaltaisen pituista tekstiä, joka on näytettävä kiinteän korkeuden ja leveyden lohkossa. Tässä tapauksessa, jos teksti ei mahdu kokonaan, tulee näkyviin tekstikatkelma, joka sopii täysin annettuun lohkoon, minkä jälkeen asetetaan ellipsi.
Tämä tehtävä on melko yleinen, mutta samalla se ei ole niin triviaali kuin miltä näyttää.
Vaihtoehto yksiriviselle tekstille CSS:ssä
Tässä tapauksessa voit käyttää text-overflow: ellipsis -ominaisuutta. Tässä tapauksessa säiliöllä on oltava omaisuus ylivuoto yhtä suuri piilotettu tai leike
Estä ( leveys : 250 pikseliä ; välilyönti : ei rivitystä ; ylivuoto : piilotettu ; tekstin ylivuoto : ellipsi ; )
Vaihtoehto moniriviselle tekstille CSS:ssä
Ensimmäinen tapa leikata monirivistä tekstiä on käyttää CSS-ominaisuudet käyttää pseudoelementtejä :ennen Ja :jälkeen. Aloitetaan HTML-merkinnät
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 exercitation 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 felisinit te auguciga feisiga deleitnit.
Ja nyt itse kiinteistöt
Laatikko ( ylivuoto : piilotettu ; korkeus : 200px ; leveys : 300px ; rivin korkeus : 25px ; ) .box :before (sisältö : "" ; float : left ; leveys : 5px ; korkeus : 200px ; ) .first > -lapsi ( kellua : oikea ; leveys : 100 % ; margin-vasen : -5px ; ) .box :after ( sisältö : "\02026" ; laatikon koko : content-box ; float : oikea ; sijainti : suhteellinen ; yläosa : -25px ; vasen : 100 % ; leveys : 3em ; margin-vasen : -3 em ; täyte-oikea : 5px ; tekstin tasaus : oikea ; taustan koko : 100 % 100 % ; tausta : lineaarinen gradientti (oikealle , rgba (255 , 255 , 255 , 0 ), valkoinen 50 % , valkoinen );)
Toinen tapa on käyttää sarakkeen leveysominaisuutta, jolla asetamme sarakkeen leveyden moniriviselle tekstille. Tätä menetelmää käytettäessä ei kuitenkaan ole mahdollista asettaa ellipsiä loppuun. HTML:
Estä ( ylivuoto : piilotettu ; korkeus : 200 pikseliä ; leveys : 300 kuvapistettä ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; sarakkeen leveys : 0%:x1)
On olemassa kolmas tapa ratkaista monirivinen teksti käyttämällä CSS:ää selaimille Webkit. Siinä meidän on käytettävä useita erityisiä ominaisuuksia etuliitteen kanssa -verkkopaketti. Tärkein niistä on -webkit-line-clamp, jonka avulla voit määrittää lohkossa tulostettavien rivien määrän. Ratkaisu on kaunis, mutta melko rajallinen, koska se toimii rajoitetussa selainryhmässä
Estä ( ylivuoto : piilotettu ; teksti ylivuoto : ellipsi ; näyttö : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : pystysuora ; )
Vaihtoehto moniriviselle tekstille JavaScriptissä
Tässä käytetään ylimääräistä näkymätöntä lohkoa, johon tekstimme sijoitetaan alun perin, minkä jälkeen se poistetaan merkki kerrallaan, kunnes tämän lohkon korkeus on pienempi tai yhtä suuri kuin halutun lohkon korkeus. Ja lopussa teksti siirretään alkuperäiseen lohkoon.
var block = asiakirja. querySelector(.block"), teksti = lohko. innerHTML, klooni = asiakirja. createElement("div"); klooni tyyli. sijainti = "absoluuttinen" ; klooni tyyli. näkyvyys = "piilotettu" ; klooni tyyli. leveys = lohko. clientWidth + "px" ; klooni innerHTML = teksti ; asiakirja. kehon. liitäLapsi(klooni); var l = teksti . pituus - 1; for (; l >= 0 && clone . clientHeight > block . clientHeight ; -- l ) ( klooni . innerHTML = teksti . alimerkkijono ( 0 , l ) + "..." ; ) lohko . innerHTML = klooni . innerHTML ;
Tämä on sama kuin jQueryn laajennus:
(funktio ($ ) ( var truncate = funktio (el ) ( var teksti = el. teksti (), korkeus = el. korkeus (), klooni = el. klooni (); klooni . css (( sijainti : "absoluuttinen", näkyvyys : "piilotettu" , korkeus : "auto" )); el. jälkeen (klooni ); var l = teksti . pituus - 1 ; for (; l >= 0 && klooni . korkeus () > korkeus ; -- l ) ( kloonaa . teksti ( teksti . alimerkkijono ( 0 , l ) + "..." ); ) el. teksti ( kloonaa . teksti ()); kloonaa . poista (); ); $ . fn . truncateText = toiminto () ( palauta tämä . every (funktio () ( katkaista ($ (this )); )); ); )(jQuery ));
Tässä artikkelissa kerromme sinulle 3 nopea ja yksinkertaisia menetelmiä CSS, jonka avulla voit näyttää vain osan kuvasta sivullasi.
Kaikki tässä käytetyt menetelmät vaativat itse asiassa vain muutaman rivin CSS koodi. Tämä ei kuitenkaan ole ympärileikkausta sanan varsinaisessa merkityksessä ( CSS ei voi tehdä tätä vielä), piilotamme ja näytämme vain sen osan kuvasta, jonka haluamme nähdä.
Nämä tekniikat voivat olla erittäin hyödyllisiä, jos haluat saada kuvan tiettyyn kokoon, eli haluat luoda siitä esimerkiksi esikatselun (pienen kopion kuvasta) uutisosioon tai jotain vastaavaa.
Tekniikka 1 - Negatiivisten marginaalien käyttäminen ( Negatiiviset marginaalit)
Jos et halua käyttää negatiivisia marginaaleja, suosittelemme käyttämään tekniikkaa №2 . Se sisältää yläosan (kappaleen), jolla on tietty leveys ja korkeus. Tällä kappaleella on ominaisuus paikannus asetettu suhteelliseksi. Leveys ja korkeus määrittävät näytettävän kentän mitat. Ja kappaleen sisään sijoitetulla kuvalla on ominaisuus paikannus asetettu absoluuttiseksi. Sitten voimme käyttää ominaisuuksia alkuun Ja vasemmalle Järjestä kuva haluamallasi tavalla ja määritä, mikä osa kuvasta näytetään ja mikä ei.
HTML identtinen edellisen tekniikan koodin kanssa:
< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p > |
Rajaa ( kellua: vasen; marginaali: . 5em 10px . 5em 0; ylivuoto piilotettu; /* Tämä on tärkeää */ asema: suhteellinen; /* tämäkin on tärkeää */ reunus: 1px kiinteä #ccc; leveys: 200px; korkeus: 120px; Rajaa kuva ( sijainti: absoluuttinen; alkuun : - 40px ; vasen : - 50px ; |
Tekniikka 3 - Viipalointiominaisuuden käyttäminen ( Leikkeen ominaisuus)
Tämän tekniikan pitäisi olla helpoin, koska leikkeen omaisuutta määrittää näytettävän elementin osan. Tämä kuulostaa täydelliseltä ratkaisulta, mutta se on olemassa yksi saalis: leikattu elementti on sijoitettava ehdottomasti. Jotta voisimme käyttää elementtiä, meidän on lisättävä ylimääräinen elementti, laskettava kuvan näkyvän alueen koko, lisättävä tämä koko yläpäähän, käytettävä yläelementtiä... Paljon työtä, oikein?
Voi, vielä yksi ongelma: rajatun elementin kokoa ei pienennetä rajauskokoon, vaan se säilyy alkuperäisenä (kuva rajauksen ulkopuolella on yksinkertaisesti piilotettu). Meidän on käytettävä absoluuttista sijoittelua siirtääksesi näkyvän alueen ylätason vasempaan yläkulmaan.
Sitä ei kuitenkaan voi jättää mainitsematta viipalointiominaisuus. Ja koodi taas...
< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "css-malli" / > < / a > < / div > |
Vlad Merževitš
Huolimatta siitä, että suuret diagonaaliset näytöt ovat tulossa edullisemmiksi ja niiden resoluutio kasvaa jatkuvasti, joskus syntyy tehtävänä sovittaa paljon tekstiä rajoitettuun tilaan. Tämä voi olla tarpeen esimerkiksi mobiiliversio sivustolle tai käyttöliittymälle, jossa rivien määrä on tärkeä. Tällaisissa tapauksissa on järkevää leikata pitkät tekstirivit jättäen vain lauseen alku. Tällä tavalla saamme käyttöliittymän kompaktiin muotoon ja vähennämme näytettävän tiedon määrää. Itse rivin trimmaus voidaan tehdä palvelinpuolella samalla PHP:llä, mutta se on helpompaa CSS:n kautta, ja voit aina näyttää koko tekstin esimerkiksi viemällä hiiren osoitinta sen päälle. Seuraavaksi tarkastellaan menetelmiä tekstin leikkaamiseen kuvitteellisilla saksilla.
Todellisuudessa kaikki johtuu ylivuotoominaisuuden käyttämisestä arvon piilossa . Erot ovat vain tekstimme erilaisessa näytössä.
Ylivuotoa käyttämällä
Jotta ylivuoto-ominaisuus näyttäytyisi tekstin kanssa kaikessa loistossaan, sinun on purettava teksti välilyönnillä arvolla nowrap . Jos tätä ei tehdä, tarvitsemamme vaikutus ei tapahdu; tekstiin lisätään yhdysviivat ja koko teksti näytetään. Esimerkki 1 näyttää, kuinka pitkää tekstiä leikataan tietyillä tyyliominaisuuksilla.
Esimerkki 1. tekstin ylivuoto
HTML5 CSS3 IE Cr Op Sa Fx
Tulos tämä esimerkki esitetty kuvassa. 1.
Riisi. 1. Tekstin ulkoasu ylivuotoominaisuuden käytön jälkeen
Kuten kuvasta näkyy, siinä on yleensä yksi haittapuoli - ei ole ilmeistä, että tekstillä on jatkoa, joten tämä on saatettava käyttäjän tietoiseksi. Tämä tehdään yleensä gradientin tai ellipsin avulla.
Liukuvärin lisääminen tekstiin
Selventääksesi, että oikealla oleva teksti ei pääty, voit asettaa sen päälle liukuvärin läpinäkyvästä väristä taustaväriin (kuva 2). Tämä luo vaikutuksen, että teksti liukenee vähitellen.
Riisi. 2. Liukuväriteksti
Esimerkki 2 näyttää, kuinka tämä tehoste luodaan. Itse elementin tyyli pysyy käytännössä samana, mutta itse gradientti lisätään pseudoelementillä ::after ja CSS3. Tätä varten lisäämme tyhjän pseudoelementin sisältöominaisuuden läpi ja lisäämme siihen gradientin erilaisilla etuliitteillä tärkeimmille selaimille (esimerkki 2). Liukuvärin leveyttä voidaan helposti muuttaa leveystoiminnolla, voit myös säätää läpinäkyvyyden astetta korvaamalla arvon 0,2 omallasi.
Esimerkki 2: Liukuväri tekstin päälle
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Sisäinen diskreetti arpeggio muuttaa polysarjan; tämä on kertaluonteinen pystysuora superpolyfonisessa kankaassa.
Tämä menetelmä ei toimi Internet-selain Explorer versioon 8.0 asti, koska se ei tue liukuvärejä. Voit kuitenkin luopua CSS3:sta ja tehdä gradientin vanhanaikaisesti PNG-24-muodossa olevan kuvan avulla.
Tämä menetelmä voidaan yhdistää vain tavallinen tausta ja taustakuvan tapauksessa tekstin päällä oleva kaltevuus on havaittavissa.
Ellipsi tekstin lopussa
Voit myös käyttää ellipsiä rajatun tekstin lopussa liukuvärin sijaan. Lisäksi se lisätään automaattisesti käyttämällä text-overflow -ominaisuutta. Sen ymmärtävät kaikki selaimet, myös IE:n vanhemmat versiot, ja tämän ominaisuuden ainoa haittapuoli on, että sen tila on tällä hetkellä epäselvä. CSS3 näyttää sisältävän tämän ominaisuuden, mutta sen sisältämä koodi ei läpäise vahvistusta.
Esimerkki 3 näyttää tekstin ylivuotoominaisuuden käytön arvoellipsin kanssa, joka lisää ellipsin. Kun siirrät hiiren tekstin päälle, se näkyy kokonaisuudessaan ja korostetaan taustavärillä.
Esimerkki 3: Tekstin ylivuoto
HTML5 CSS3 IE Cr Op Sa Fx
Tämän esimerkin tulos on esitetty kuvassa. 3.
Riisi. 3. Teksti ellipsillä
Näiden menetelmien suuri etu on, että gradienttia ja ellipsiä ei näytetä, jos teksti on lyhyt ja sopii kokonaan tietylle alueelle. Joten teksti näytetään tavalliseen tapaan, kun se on täysin näkyvissä näytöllä, ja se leikataan pois, kun elementin leveyttä pienennetään.
Hei kaikki, nimeni on Anna Blok ja tänään puhumme siitä, kuinka rajata kuvia ilman grafiikkaohjelmia.
Missä tästä voi olla hyötyä?
Ensinnäkin sivustoilla, joissa kuvia sisältävää sisältöä ei todennäköisesti rajata minkään tietyn lohkon osalta.
Näyttävä esimerkki: blogi WordPressissä.
Oletetaan, että haluat artikkelisi kannen kuvasuhteen 1:1 (neliö). Toimintasi:
- Lataa sopiva kuva Internetistä;
- Rajaa se Photoshopissa haluttuihin mittasuhteisiin;
- Julkaise artikkeli.
Kun vierailet sivustolla, näet odottamasi tuloksen.
Mutta oletetaan, että olet unohtanut rajata kuvan Photoshopissa ja ladannut satunnaisen kuvan kanneksi Internetistä, mitä sitten tapahtuu?! Aivan oikein, asettelu katkeaa. Ja jos et ole käyttänyt CSS:ää ollenkaan, HD-kuva voi peittää tekstin koko näkymän kokonaan. Siksi on tärkeää pystyä rajaamaan kuvia milloin CSS-apua tyylejä.
Katsotaanpa erilaisia tilanteita, kuinka tämä voidaan toteuttaa paitsi CSS:n, myös SVG:n avulla.
Esimerkki 1
Yritetään rajata kuvaa, joka on sijoitettu taustakuvan avulla. Luodaan pieni HTML-merkintä
Jatketaan CSS-tyyli. Taustakuvaa käyttämällä lisäämme kuvan, määritämme kuvallemme kehykset, keskitämme kuvan käyttämällä taustakuvaa ja asetamme taustan koon:
jpg); background-position: center center; background-size:cover; leveys: 300px; korkeus: 300px; )
Tämä oli ensimmäinen ja yksinkertaisin tapa rajata kuvaa. Katsotaanpa nyt toista esimerkkiä.
Esimerkki 2
Oletetaan, että meillä on edelleen sama laatikkosäiliö, jonka sisällä on img-tunniste, jossa on kuva, jonka nyt muotoilemme.
Keskitämme myös kuvamme suhteessa luotavaan kohteeseen. Ja käytämme ominaisuutta, jota käytetään melko harvoin: objekti-sovitus .
Laatikko ( sijainti: suhteellinen; ylivuoto: piilotettu; leveys: 300 pikseliä; korkeus: 300 kuvapistettä; ) .box img ( sijainti: absoluuttinen; ylhäällä: 50%; vasen: 50%; muunnos: käännä (-50%, -50%); leveys: 300 pikseliä; korkeus: 300 kuvapistettä; objektiin sopiva: kansi; )
Mielestäni tämä on paras tapa. Se on ihanteellinen blogeille, jos käytät postauksissa täysin eri mittasuhteisia kuvia.
Voit lukea lisää HTML:stä ja CSS:stä täältä:
Esimerkki 3
Voimme myös rajata kuvia tällä hetkellä, jos lisäämme ne SVG-elementteihin. Otetaan esimerkiksi ympyrä. Voimme luoda SVG:tä käyttämällä tunnisteita. Luo svg border -tunniste, joka sisältää ympyrätunnisteen ja kuviotunnisteen. Mallitunnisteeseen kirjoitamme kuvatunnisteen. Siinä määritämme xlink:href-attribuutin ja lisäämme kuvan. Lisäämme myös leveys- ja korkeusmääritteet. Mutta siinä ei vielä kaikki. Meidän on lisättävä täyttöarvo. Jotta työtämme pidettäisiin valmiina, lisäämme kuvatunnisteeseen apuattribuutinmegőrzésAspectRatio, jonka avulla voimme täyttää kuvamme "alusta loppuun" koko ympyrän ympäri.
En voi kutsua tätä menetelmää universaaliksi. Mutta sitä voidaan käyttää poikkeustapauksissa. Jos esimerkiksi kosketimme blogin aihetta, tämä menetelmä voisi ihanteellisesti sopia artikkelin kirjoittavan kirjoittajan avatariin.
Voit lukea lisää HTML:stä ja CSS:stä täältä:
Tulokset:
Tarkastelimme 3 tapaa kuvien rajaamiseen verkkosivustoilla: taustakuvan käyttäminen, img-tunnisteen käyttäminen ja svg-kuvion yhdistäminen bittikarttakuvien upottamiseen kuvatunnisteen avulla. Jos tiedät muita menetelmiä kuvan rajaamiseen, milloin apua SVG, jaa ne sitten kommenteissa. Heistä ei ole hyötyä vain minulle, vaan myös muille.
Älä unohda esittää kysymyksiäsi asettelusta tai käyttöliittymän kehittämisestä ammattilaisilta FrontendHelpissä verkossa.