Dekorere linjer av tekst med safe-dekorasjon-pause

0
36

En institusjon motto, en artist ‘s intro selskapets slagord, et fellesskap’ s prinsipp, en tjeneste hilsen… alle av dem har en ting til felles: de er et kort avsnitt som vises på en nettside hjemme side — eller i det minste om side!

Det er sjelden at bare ett ord eller en linje med tekst, og ønsker deg velkommen til et nettsted. Så, la oss se på noen interessante måter vi kunne stil linjene i et avsnitt.

For å se hvordan ting er nå, la oss prøve å gi grenser til alle linjer med tekst i en framskutt span og se hvordan det ser ut:

<p><span>Kolibrier er fugler fra…</span></p>
span {
border: 2px solid;
}

Se Penn Brutt inline-boksen. ved Preethi (@rpsthecoder) på CodePen.

De kanter er brutte, som de teknisk er, som den siste boksen har blitt fragmentert i flere linjer. Men vi kan reparere de ødelagte kanter med safe-dekorasjon-pause!

Boksen-dekorasjon-break eiendom i CSS kan dekorere kantene av fragmenter av en ødelagt inline-boksen (så vel som av en side, kolonne, og regionen bokser).

Dens verdi, klone, gjør det med samme design som vises i boksen er ubrutt kanter, og sin standardverdi, slice, ikke kopiere dekorasjoner på kantene, holde bryte veldig synlig som du så i demo ovenfor.

La oss prøve det:

span {
border: 2px solid;
safe-dekorasjon-break: klone;
}

Se Penn Brutt inline-boksen w/ safe-dekorasjon-break. ved Preethi (@rpsthecoder) på CodePen.

Eiendommen påvirker ikke bare grensen, men også skyggen, mellomrom, og bakgrunnen for den ødelagte kanter.

La oss spille med bakgrunn først. Mens du skriver innlegget på knockout tekst, jeg jobbet med den bakgrunnen-klipp eiendom og ønsket å se om utformingen holdt opp for flere linjer med tekst. Det gjorde det ikke.

Bakgrunnen gradient jeg søkte var ikke replikert i hver linje, og etter klipping det, bare det første var venstre med en bakgrunn. Det er, med mindre boks-dekorasjon-break: clone er lagt til:

<p><span>Singapore:<br>Lion City</span></p>
span {
background-image: linear-gradient(135deg, gul, fiolett);
bakgrunn-klipp: text;
farge: transparent;
polstring: .5em;
safe-dekorasjon-break: klone;
}

Se Pen Stigning multi-line tekst w/safe-dekorasjon-break. ved Preethi (@rpsthecoder) på CodePen.

Bakgrunnen-klipp eiendom med teksten verdi klipp en bakgrunn til formen av sin forgrunnen tekst. Siden vi brukte safe-dekorasjon-break, gradient bakgrunn er vist og klippet jevnt over alle linjer av tekst.

Kommer tilbake til grensen, la oss se hvordan formen og skygge kan være kopiert over den ødelagte kanter, sammen med polstring:

<img src=”treet.png”>
<p><span>Supertrees er tre-lignende strukturer…</span></p>
<img src=”treet.png”>
<p><span>Supertrees er tre-lignende strukturer…</span></p>
span {
bakgrunn: rgb(230,157,231);
border-radius: 50% 0%;
box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inset;
polstring: .5em 1.3 em;
safe-dekorasjon-break: klone;
}

p:nth-of-type(2) span {
bakgrunn-klipp: innhold-boks;
}

Se Penn Inline grensen form & shadow w/safe-dekorasjon-break. ved Preethi (@rpsthecoder) på CodePen.

I andre avsnitt av demo, bakgrunnen er beskåret til innhold boksen (bakgrunn-klipp: innhold-boksen). Som du kan se, beskjære skjer i den ødelagte kanter som er godt, på grunn av boksen-dekorasjon-break: klone.

En annen måte vi kan stil grenser er med bilder. Du kan se en gradient ramme rundt linjene i teksten under, som dekker den ødelagte kanter, hvis nettleseren du bruker nå støtter grensen-bilde og anvendelse av boksen-dekorasjon-pause over resultatet.

<p><span>Malaysia–Singapore Andre leddet…</span></p>
span {
border: 2px solid;
border-bilde: linear-gradient(45deg, #eeb075, #2d4944) 1;
bakgrunn: #eef6f3;
polstring: .5em 1.3 em;
safe-dekorasjon-break: klone;
}

Se Penn Inline grensen bildet w/ safe-dekorasjon-break. ved Preethi (@rpsthecoder) på CodePen.

En ekstra atferd vi kan trykke inn for å dekorere enkelte linjer er til disposisjon. I nettlesere som støttes, safe-dekorasjon-break kan legge til en oversikt til hver linje av tekst, inkludert brutt kantene, noe som er nyttig for å lage bicolored stiplede kantlinjer.

<p><span>Cloud Forest replikater…</span></p>
span {
disposisjon: 2px stiplede rgb(216,255,248);
box-shadow: 0 0 0 2px rgb(39,144,198);
bakgrunn: #fffede;
polstring: .5em 1.3 em;
animasjon: 1s animateBorder lette uendelig;
safe-dekorasjon-break: klone;
}

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

Se Penn Inline skissere w/ safe-dekorasjon-break. ved Preethi (@rpsthecoder) på CodePen.

Som observert i demo -, boks-dekorasjon-break tåler animasjon.

I tillegg til kantlinjer og bakgrunner, safe-dekorasjon-break kan også administrere former anvendt over elementer. Det er ikke mye bruk for det i inline-bokser, og er kanskje bedre å brukes i en kolonne eller side-boksen, selv om programmet er ennå ikke utbredt støtte i nettlesere.

Men for å vise et eksempel på hva som virker, la oss prøve å bruke clip-banen eiendom til spennet.

Eiendommen klipp-banen i seg selv er bare fullt ut støttet av Firefox, slik at bare i det du kanskje ser et forventet resultat. Men her er to bilder: resultatene av å bruke en sirkulær klippet vei over span, uten og med boks-dekorasjon-break.

span {
klipp-bane: sirkel(50% ved 202.1165 px 69.5 px);

}

Sirkulær klipp-banen på et spenn

span {
klipp-bane: sirkel(50% ved 202.1165 px 69.5 px);
safe-dekorasjon-break: klone;

}

Sirkulær klipp-banen på et spenn med safe-dekorasjon-break: clone

Du vil legge merke til i det første bildet at 50% radius-verdien er avledet fra bredden av inline-boksen (den lengste linje) der safe-dekorasjon-pause er ikke brukt.

Det andre bildet viser hvordan safe-dekorasjon-break: klone omdefinerer den beregnede verdi for 50% ved å basere dem på bredder på de enkelte linjer mens du holder center samme som før.

Og her er hvordan inset funksjon av klipp-bane (en innfelt rektangel) brukt over span klipp det uten og med boks-dekorasjon-break:

span {
klipp-bane: inset(0);

}

Inset klipp-banen på et spenn

span {
klipp-bane: inset(0);
safe-dekorasjon-break: klone;

}

Inset klipp-banen på et spenn med safe-dekorasjon-break: clone

Uten box-dekorasjon-break, bare en del av den første linjen som tilsvarer lengden av korteste er synlig, og med safe-dekorasjon-break: – klone, den første linjen er fullt synlig, mens resten av boksen er klippet bort.

Så, kanskje hvis du noen gang ønsker å vise bare den første linjen og skjul resten, dette kan komme godt med. Men, som jeg har nevnt før, dette programmet er mer egnet for andre typer bokser enn de som er innebygd. Uansett, jeg lyst til å vise deg hvordan det fungerer.

Innpakning Opp

Boksen-dekorasjon-break: klone kopierer grensen, romlig, og bakgrunnen design anvendt på en fragmentert inline-boksen er ubrutt kantene til sin brutt seg. Dette skaper en enda design på tvers av alle linjene med tekst, dekorere dem jevnt og kan være super nyttig for alle de blurbs av tekst som vi vanligvis bruker på nettsteder.