Decoreren regels tekst met vak-decoratie-break

0
51

Een instelling is het motto van een kunstenaar intro, een bedrijf, slogan, een gemeenschap principe, een service voor de begroeting van… allemaal hebben ze één ding gemeen: ze zijn één korte alinea weergegeven op een website van de homepage — of op zijn minst de pagina!

Het is zeldzaam dat een woord of een regel tekst en verwelkomt u in een website. Dus, laten we eens kijken naar een aantal interessante manieren waarop we kunnen de stijl van de regels van een alinea.

Om te zien hoe de dingen op dit moment zijn, laten we proberen geven de grens aan van alle lijnen van een tekst in een inline-span en zie hoe het eruit ziet:

<p><span>Kolibries zijn vogels van…</span></p>
span {
border: 2px solid;
}

Zie de Pen Gebroken inline box. door Preethi (@rpsthecoder) op CodePen.

De randen worden weergegeven gebroken, dat ze technisch zijn, als de inline box is verdeeld in meerdere lijnen. Maar we kunnen vaststellen die gebroken randen met vak-decoratie-break!

De vak-decoratie-break-eigenschap in CSS kan versier de randen van de scherven van een gebroken inline box (evenals van een pagina, kolom en regio dozen).

De waarde van deze kloon, doet dat met hetzelfde ontwerp dat wordt weergegeven in het vak is omgeslagen randen, en de standaard waarde, slice, wordt geen kopie maken van de decoraties aan de randen, het bijhouden van de break erg zichtbaar als je zag in de demo hierboven.

Laten we het proberen:

span {
border: 2px solid;
vak-decoratie-break: kloon;
}

Zie de Pen Gebroken inline box w/ box-decoratie-break. door Preethi (@rpsthecoder) op CodePen.

De eigenschap is van invloed op niet alleen de grens, maar ook de schaduw, afstand, en de achtergrond van de gebroken randen.

Laten we spelen met de achtergrond voor het eerst. Tijdens het schrijven van het bericht op knock-out van tekst, ik was aan het werken met de background-clip eigendom en wilde om te zien of het ontwerp aangehouden voor meerdere regels tekst. Het zag er niet.

Het verloop van de achtergrond heb ik toegepast werd niet gerepliceerd in elke lijn, en na het knippen, alleen de eerste was vertrokken met een achtergrond. Dat is, tenzij vak-decoratie-break: kloon is toegevoegd:

<p><span>Singapore:<br>Lion City</span></p>
span {
background-image: linear-gradient(135deg, geel, violet);
background-clip: tekst;
kleur: transparant;
padding: .5em;
vak-decoratie-break: kloon;
}

Zie de Pen Verloop multi-line text w/box-decoratie-break. door Preethi (@rpsthecoder) op CodePen.

De background-clip eigenschap met de tekst waarde clips achtergrond om de vorm van de voorgrond tekst. Sinds we gebruikt vak-decoratie-break, de achtergrond is weergegeven en geknipt gelijkmatig over alle lijnen van de tekst.

Terug te gaan naar de grens, laten we zien hoe de vorm en de schaduw worden gekopieerd, aan de overkant van de gebroken randen, samen met padding:

<img src=”boom.png”>
<p><span>Supertrees zijn boom-achtige structuren…</span></p>
<img src=”boom.png”>
<p><span>Supertrees zijn boom-achtige structuren…</span></p>
span {
achtergrond: rgb(230,157,231);
border-radius: 50% 0%;
box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inzet;
padding: .5em 1.3 em;
vak-decoratie-break: kloon;
}

p:nth-of-type(2) span {
background-clip: content-box;
}

Zie de Pen Inline grens vorm en schaduw w/box-decoratie-break. door Preethi (@rpsthecoder) op CodePen.

In de tweede alinea van de demo, de achtergrond is bijgesneden tot de inhoud van de doos (background-clip: content-box). Zoals u kunt zien, de oogst gebeurt in de gebroken randen, want van vak-decoratie-break: kloon.

Een andere manier kunnen we de stijl van de grenzen is met beelden. Misschien zie je een verloop rand rond de lijnen van onderstaande tekst, die de gebroken randen, als de browser die je nu gebruikt ondersteunt border-image en de toepassing van de vak-decoratie-break over het resultaat.

<p><span>De Maleisië–Singapore Tweede Koppeling…</span></p>
span {
border: 2px solid;
border-image: linear-gradient(45deg, #eeb075, #2d4944) 1;
achtergrond: #eef6f3;
padding: .5em 1.3 em;
vak-decoratie-break: kloon;
}

Zie de Pen Inline grens beeld w/ box-decoratie-break. door Preethi (@rpsthecoder) op CodePen.

Een extra probleem we kunnen aanboren voor het versieren van de individuele lijnen is van overzicht. Ondersteunde browsers, vak-decoratie-break kunt u een overzicht aan elke regel van de tekst, met inbegrip van de gebroken randen, dat is handig voor het maken van tweekleurig gestreepte randen.

<p><span>Cloud Forest, een replica van…</span></p>
span {
overzicht: 2px onderbroken rgb(216,255,248);
box-shadow: 0 0 0 2px rgb(39,144,198);
achtergrond: #fffede;
padding: .5em 1.3 em;
animatie: 1s animateBorder gemak oneindig;
vak-decoratie-break: kloon;
}

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

Zie de Pen Inline overzicht w/ box-decoratie-break. door Preethi (@rpsthecoder) op CodePen.

Zoals is te zien in de demo -, vak-decoratie-break bestand tegen animatie.

Naast randen en achtergronden, vak-decoratie-break kan ook het beheer van de vormen aangebracht over de elementen. Er is niet veel te gebruiken voor het inline-vakken, en het is misschien beter in een kolom of pagina box, maar de toepassing is nog niet breed ondersteund in de browsers.

Maar om aan te tonen een voorbeeld van wat dat doet, laten we proberen het toepassen van de clip-pad eigenschap de levensduur.

Het eigendom clip-pad zelf is alleen volledig ondersteund door Firefox, dus alleen in, zie je misschien een verwachte uitkomst. Maar na zijn twee afbeeldingen: de resultaten van de toepassing van een circulaire clip pad over de spanwijdte, zonder en met vak-decoratie-break.

span {
clip-pad: de cirkel(van 50% bij 202.1165 px 69.5 px);

}

Ronde clip-pad op een span

span {
clip-pad: de cirkel(van 50% bij 202.1165 px 69.5 px);
vak-decoratie-break: kloon;

}

Ronde clip-pad op een span met vak-decoratie-break: clone

U zult merken in de eerste afbeelding die de 50% straal waarde is afgeleid van de breedte van het inline box (de langste lijn) waar vak-decoratie-break wordt niet gebruikt.

De tweede afbeelding laat zien hoe doos-decoratie-break: clone herdefinieert de berekende waarde voor 50% door het te baseren ze op de breedte van de individuele lijnen, terwijl het houden van het centrum.

En hier is hoe de inzet van de functie van de clip-pad (een inzet rechthoek) toegepast over de span clips zonder en met vak-decoratie-break:

span {
clip-pad: inzet(0);

}

Inzet clip-pad op een span

span {
clip-pad: inzet(0);
vak-decoratie-break: kloon;

}

Inzet clip-pad op een span met vak-decoratie-break: clone

Zonder doos-decoratie-break, slechts een deel van de eerste regel die overeenkomt met de lengte van de kortste zichtbaar is, en met vak-decoratie-break: kloon, de eerste lijn is volledig zichtbaar, terwijl de rest van de box is geknipt.

Dus, misschien als je ooit wilt tonen alleen de eerste regel en het verbergen van de rest, dit kan van pas komen. Maar, zoals ik al zei, deze toepassing is meer geschikt voor andere typen dozen zijn dan degenen die inline. Either way, ik wilde je laten zien hoe het werkt.

Inpakken

De vak-decoratie-break: clone kopieën van een grens, ruimtelijke en achtergrond ontwerpen toegepast op een gefragmenteerde inline box ononderbroken randen te zijn gebroken. Dit zorgt voor een nog ontwerpen voor alle lijnen van de tekst, decoreren gelijkmatig en kan super handig voor al die blurbs van de tekst die wij vaak gebruiken op websites.