Dekorera rader text med box-dekoration-paus

0
15

En institution som motto, en artist ‘ s intro, ett företags slogan, ett samhälle princip, en tjänst hälsning… alla av dem har en sak gemensamt: de är en kort punkt som visas på webbplatsens startsida — eller åtminstone om sidan!

Det är ovanligt att bara ett ord eller en rad med text och välkomnar dig till en webbplats. Så, låt oss titta på några intressanta sätt vi kunde stil raderna i ett stycke.

Att se hur saker och ting är nu, låt oss försöka ge gränser för att alla linjer för text i en inline-span och se hur det ser ut:

<p><span>Kolibrier är fåglar från…</span></p>
span {
border: 2px solid;
}

Se Pennan Sönder inline-box. genom att Preethi (@rpsthecoder) på CodePen.

Kanterna visas trasigt, som att de tekniskt sett är, som inline-box har varit splittrade i flera rader. Men vi kan fixa de trasiga kanter med box-dekoration-paus!

Rutan-dekoration-break egendom i CSS kan dekorera kanterna av fragment av en trasig inline-box (liksom av en sida, kolumn och region lådor).

Dess värde, klon, gör som med samma design som visas i rutan är obruten kanter, och dess förinställda värde, skiva, inte kopiera dekorationer på kanterna, hålla bryta mycket synlig som ni såg i demot ovan.

Låt oss prova det:

span {
border: 2px solid;
box-dekoration-break: klon;
}

Se Pennan Sönder inline-box w/ box-dekoration-paus. genom att Preethi (@rpsthecoder) på CodePen.

Egenskapen påverkar inte bara gränsen men också en skugga, avstånd och bakgrunden av den trasiga kanter.

Låt oss leka med den bakgrunden först. När du skriver inlägg på knockout text, arbetade jag med den bakgrunden-klipp egendom och ville se om den design som hålls upp för flera rader text. Det gjorde det inte.

Bakgrunden gradient jag sökte var inte replikeras i varje rad, och efter klippning det bara den första som var kvar med en bakgrund. Det är, om box-dekoration-break: klon läggas till:

<p><span>Singapore:<br>Lion City</span></p>
span {
background-image: linear-gradient(135deg, gul, violett);
bakgrund-klipp: sms: a;
färg: transparent;
stoppning: .5em;
box-dekoration-break: klon;
}

Se Pennan Lutning multi-line text w/box-dekoration-paus. genom att Preethi (@rpsthecoder) på CodePen.

Bakgrund-klipp egendom med texten värde klipp en bakgrund till den formen av dess förgrund text. Eftersom vi använde box-dekoration-paus, tonad bakgrund visas och klippt på ett enhetligt sätt i alla raderna i texten.

Gå tillbaka till gränsen, låt oss se hur dess form och skugga kan kopieras över den trasiga kanter, med stoppning:

<img src=”trädet.png”>
<p><span>Supertrees är trädliknande strukturer…</span></p>
<img src=”trädet.png”>
<p><span>Supertrees är trädliknande strukturer…</span></p>
span {
bakgrund: rgb(230,157,231);
border-radius: 50% 0%;
box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige infälld;
stoppning: .5em 1.3 em;
box-dekoration-break: klon;
}

p:n: te-av-typ(2) span {
bakgrund-klipp: innehåll-box;
}

Se Pennan Inline border form & shadow w/box-dekoration-paus. genom att Preethi (@rpsthecoder) på CodePen.

I andra stycket av demo, bakgrunden är beskuren tills rutan innehåll (bakgrund-klipp: innehåll-box). Som du kan se, är den gröda som händer i trasiga kanter, på grund av box-dekoration-break: klon.

Ett annat sätt kan vi titulera gränser är med bilder. Du kan se en gradient ram runt raderna i texten nedan, som täcker den trasiga kanter, om den webbläsare du använder nu stöder border-image och tillämpningen av box-dekoration-paus över dess resultat.

<p><span>Malaysia–Singapore Andra Länken…</span></p>
span {
border: 2px solid;
border-image: linear-gradient(45deg, #eeb075, #2d4944) 1;
bakgrund: #eef6f3;
stoppning: .5em 1.3 em;
box-dekoration-break: klon;
}

Se Pennan Inline border bild w/ box-dekoration-paus. genom att Preethi (@rpsthecoder) på CodePen.

Ytterligare ett beteende som vi kan utnyttja för att dekorera enskilda raderna är av outline. I webbläsare som stöds, box-dekoration-paus kan lägga till en beskrivning till varje rad i texten, bland annat den trasiga kanter, vilket är användbart för att skapa bicolored streckade kanter.

<p><span>Cloud Forest replikerar…</span></p>
span {
utkast: 2px streckade rgb(216,255,248);
box-shadow: 0 0 0 2px rgb(39,144,198);
bakgrund: #fffede;
stoppning: .5em 1.3 em;
animation: 1s animateBorder lätthet oändlig;
box-dekoration-break: klon;
}

@keyframes animateBorder{
till{
outline-color: rgb(39,144,198);
box-shadow: 0 0 0 2px rgb(216,255,248);
}
}

Se Pennan Inline beskriva w/ box-dekoration-paus. genom att Preethi (@rpsthecoder) på CodePen.

Som observerats i demo -, box-dekoration-break tål animation.

Förutom gränser och bakgrunder, box-dekoration-paus kan också hantera former som tillämpas över element. Det är inte mycket användning för det i inline-boxar, och är kanske bättre som används i en kolumn eller sidan rutan, men programmet är ännu inte ett stort stöd i webbläsare.

Men för att visa ett exempel på vad som gör, låt oss pröva klipp-väg egendom till span.

Fastigheten klipp-vägen i sig är fullt stöds av Firefox, så det är endast i det kan du se ett förväntat utfall. Men följande är två bilder: resultaten av tillämpningen av en cirkulär klipp väg under loppet, utan och med box-dekoration-paus.

span {
clip-bana: circle(50% på 202.1165 px 69.5 px);

}

Cirkulär klipp-väg på en span

span {
clip-bana: circle(50% på 202.1165 px 69.5 px);
box-dekoration-break: klon;

}

Cirkulär klipp-vägen på en sträcka med box-dekoration-break: klon

Du kommer att märka i den första bilden som 50% radie värde härrör från den bredd av inline-box (den längsta linje) där box-dekoration-paus används inte.

Den andra bilden visar hur box-dekoration-break: klon omdefinierar det beräknade värdet för 50% genom att basera dem på bredder på enskilda linjer samtidigt center-samma som innan.

Och här är hur infälld funktion av klipp-sökväg (en invändig rektangel) tillämpas under loppet klipp det utan och med box-dekoration-break:

span {
clip-bana: infälld(0);

}

Infälld klipp-väg på en span

span {
clip-bana: infälld(0);
box-dekoration-break: klon;

}

Infälld klipp-vägen på en sträcka med box-dekoration-break: klon

Utan box-dekoration-break, bara en del av den första raden som motsvarar längden av den kortaste är synliga, och med box-dekoration-break: klon, den första raden är fullt synliga medan resten av lådan är klippt.

Så, kanske om du någonsin vill visa endast första raden och dölja resten, detta kan komma väl till pass. Men, som jag nämnde innan, denna ansökan är mer lämplig för andra typer av lådor än de som är infogade. Hursomhelst, jag ville visa dig hur det fungerar.

Att Linda Upp

Rutan-dekoration-break: klon kopior någon gräns, rumsliga och bakgrund konstruktioner tillämpas på en fragmenterad inline-box är obruten kanter till sin trasiga sådana. Detta skapar en ännu design över alla rader av text, dekorera dem på samma sätt och kan vara super bra för alla de texter av text som vi ofta använder på webbplatser.