🚀 KesslerTech

Is it possible to apply CSS to half of a character

Is it possible to apply CSS to half of a character

📅 | 📂 Category: Javascript

Styling matter is a cardinal facet of internet plan. We tin alteration fonts, colours, sizes, and equal adhd shadows. However what astir styling conscionable fractional of a quality? The motion of whether or not it’s imaginable to use CSS to fractional a quality is a communal 1, and the reply, piece not simple, opens ahead absorbing potentialities successful typography and net plan. This exploration delves into the methods and limitations of quality-flat styling, providing insights into however originative results tin beryllium achieved.

Knowing Quality Rendering

Earlier we dive into the specifics, it’s important to realize however characters are rendered connected the net. Browsers dainty all quality arsenic a azygous part. This means that conventional CSS properties similar colour, font-dimension, and font-importance use to the full glyph. You tin’t straight mark the near oregon correct fractional with these properties unsocial. Nevertheless, location are intelligent workarounds that mimic the consequence of styling fractional a quality.

This regulation stems from the manner fonts themselves are designed. Font records-data incorporate glyphs, which are basically vector shapes representing all quality. CSS properties manipulate these full shapes, not parts of them.

Deliberation of a quality arsenic a azygous representation. You tin use filters to the entire representation, however you tin’t straight alteration the colour of conscionable fractional the representation with out any representation enhancing methods. The aforesaid rule applies to characters and CSS.

Methods for Mimicking Fractional-Quality Styling

Piece nonstop styling of fractional a quality isn’t imaginable with modular CSS, respective strategies make the phantasm of this consequence.

Utilizing Pseudo-components and Overflow

1 effectual attack includes utilizing pseudo-parts similar ::earlier oregon ::last mixed with the overflow: hidden place. You tin make a duplicate of the quality with the desired styling connected the pseudo-component and past assumption it to screen fractional of the first quality. This creates the quality of styling lone 1 fractional.

Gradient Matter Results

CSS gradients message a visually interesting manner to accomplish a akin result. By making use of a linear gradient crossed the matter, you tin modulation betwixt 2 colours, creating a divided-colour consequence. This method is peculiarly utile for stylistic decisions, specified arsenic creating a metallic oregon 2-toned matter quality.

SVG and Masking

For much analyzable eventualities, SVG (Scalable Vector Graphics) and masking supply a almighty resolution. SVG permits for good-grained power complete vector shapes, enabling exact styling of parts of characters. By masking components of the quality, you tin accomplish the desired fractional-styled consequence with large accuracy.

Limitations and Concerns

Piece these methods message originative options, it’s crucial to admit their limitations. The pseudo-component and overflow technique tin beryllium difficult to align absolutely, particularly with various font sizes. Gradients whitethorn not beryllium appropriate for each plan contexts, and SVG tin adhd complexity to the markup.

Moreover, accessibility ought to beryllium thought of. Analyzable styling methods whitethorn contact surface scholar compatibility. Guaranteeing that the ocular consequence doesn’t compromise the that means and readability of the matter is indispensable.

For circumstantial usage circumstances, similar creating analyzable typographic results for logos oregon headers, these methods are invaluable instruments. Nevertheless, for broad assemblage matter, easier styling approaches are frequently most popular for maintainability and accessibility.

Applicable Functions and Examples

Ideate creating a header with a metallic sheen wherever 1 fractional seems golden and the another metallic. This consequence may beryllium achieved utilizing a linear gradient. Different illustration is highlighting circumstantial components of a statement to stress definite syllables oregon prefixes, providing a alone manner to gully attraction to cardinal accusation.

Present’s an ordered database showcasing however to use a gradient consequence:

  1. Fit the inheritance-clip place to matter.
  2. Use a linear-gradient arsenic the inheritance-representation.
  3. Set the gradient absorption and colour stops to accomplish the desired divided consequence.

For much intricate designs, SVG and masking unfastened doorways to creating visually gorgeous typography.

Infographic Placeholder: An infographic present would visually show the methods mentioned, showcasing examples of fractional-quality styling and their implementation utilizing CSS, gradients, and SVG.

  • See the limitations of all method earlier implementing.
  • Prioritize accessibility and readability.

Piece straight styling fractional a quality with CSS isn’t technically imaginable, originative strategies utilizing pseudo-components, gradients, and SVG supply effectual workarounds. By knowing the limitations and selecting the due technique, you tin accomplish visually compelling matter results that heighten your internet designs. Research these strategies to unlock fresh potentialities successful typography and make genuinely alone ocular experiences for your customers. Larn much astir precocious CSS strategies and typographic results done assets similar MDN Internet Docs and CSS-Methods to refine your abilities and propulsion the boundaries of internet plan. Experimenting with these approaches volition grow your originative toolkit and empower you to trade visually partaking and impactful net contented.

FAQ: Tin I animate the divided consequence connected a quality?

Sure, utilizing CSS transitions oregon animations, you tin animate the gradient, pseudo-component assumption, oregon SVG disguise to make dynamic results.

Question & Answer :
What I americium wanting for:

A manner to kind 1 Fractional of a quality. (Successful this lawsuit, fractional the missive being clear)

What I person presently searched for and tried (With nary fortune):

  • Strategies for styling fractional of a quality/missive
  • Styling portion of a quality with CSS oregon JavaScript
  • Use CSS to 50% of a quality

Beneath is an illustration of what I americium making an attempt to get.

x

Does a CSS oregon JavaScript resolution be for this, oregon americium I going to person to hotel to photos? I would like not to spell the representation path arsenic this matter volition extremity ahead being generated dynamically.

Present connected GitHub arsenic a Plugin!

enter image description here Awareness escaped to fork and better.

Demo | Obtain Zip | Fractional-Kind.com (Redirects to GitHub)

  • Axenic CSS for a Azygous Quality
  • JavaScript utilized for automation crossed matter oregon aggregate characters
  • Preserves Matter Accessibility for surface readers for the unsighted oregon visually impaired

Portion 1: Basal Resolution

Half Style on text

Demo: http://jsfiddle.nett/arbel/pd9yB/1694/

This plant connected immoderate dynamic matter, oregon a azygous quality, and is each automated. Each you demand to bash is adhd a people connected the mark matter and the remainder is taken attention of.

Besides, the accessibility of the first matter is preserved for surface readers for the unsighted oregon visually impaired.

Mentation for a azygous quality:

Axenic CSS. Each you demand to bash is to use .halfStyle people to all component that accommodates the quality you privation to beryllium fractional-styled.

For all span component containing the quality, you tin make a information property, for illustration present information-contented="X", and connected the pseudo component usage contented: attr(information-contented); truthful the .halfStyle:earlier people volition beryllium dynamic and you gained’t demand to difficult codification it for all case.

Mentation for immoderate matter:

Merely adhd textToHalfStyle people to the component containing the matter.

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { assumption: comparative; show: inline-artifact; font-dimension: 80px; /* oregon immoderate font measurement volition activity */ colour: achromatic; /* oregon clear, immoderate colour */ overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ } .halfStyle:earlier { show: artifact; z-scale: 1; assumption: implicit; apical: zero; near: zero; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; colour: #f00; }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1695/))

Portion 2: Precocious resolution - Autarkic near and correct elements

Half Style on text - advanced - With Text Shadow

With this resolution you tin kind near and correct components, individually and independently.

All the things is the aforesaid, lone much precocious CSS does the magic.

``` jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { assumption: comparative; show: inline-artifact; font-measurement: 80px; /* oregon immoderate font dimension volition activity */ colour: clear; /* fell the basal quality */ overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ } .halfStyle:earlier { /* creates the near portion */ show: artifact; z-scale: 1; assumption: implicit; apical: zero; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #f00; /* for demo functions */ matter-shade: 2px -2px 0px #af0; /* for demo functions */ } .halfStyle:last { /* creates the correct portion */ show: artifact; absorption: rtl; /* precise crucial, volition brand the width to commencement from correct */ assumption: implicit; z-scale: 2; apical: zero; near: 50%; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #000; /* for demo functions */ matter-shade: 2px 2px 0px #0af; /* for demo functions */ }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1695/))

Portion three: Premix-Lucifer and Better

Present that we cognize what is imaginable, fto’s make any variations.

-Horizontal Fractional Elements

  • With out Matter Shade:

    Horizontal Half Parts - No Text Shadow

  • Expectation of Matter Shade for all fractional portion independently:

    halfStyle - Horizontal Half Parts - With Text Shadow

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { assumption: comparative; show: inline-artifact; font-dimension: 80px; /* oregon immoderate font dimension volition activity */ colour: clear; /* fell the basal quality */ overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ } .halfStyle:earlier { /* creates the apical portion */ show: artifact; z-scale: 2; assumption: implicit; apical: zero; tallness: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #f00; /* for demo functions */ matter-shade: 2px -2px 0px #af0; /* for demo functions */ } .halfStyle:last { /* creates the bottommost portion */ show: artifact; assumption: implicit; z-scale: 1; apical: zero; tallness: a hundred%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #000; /* for demo functions */ matter-shade: 2px 2px 0px #0af; /* for demo functions */ }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1696/))

-Vertical 1/three Elements

  • With out Matter Shade:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

  • Expectation of Matter Shade for all 1/three portion independently:

    halfStyle - Vertical 1/3 Parts - With Text Shadow

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { /* basal char and besides the correct 1/three */ assumption: comparative; show: inline-artifact; font-dimension: 80px; /* oregon immoderate font measurement volition activity */ colour: clear; /* fell the basal quality */ overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ colour: #f0f; /* for demo functions */ matter-shade: 2px 2px 0px #0af; /* for demo functions */ } .halfStyle:earlier { /* creates the near 1/three */ show: artifact; z-scale: 2; assumption: implicit; apical: zero; width: 33.33%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #f00; /* for demo functions */ matter-shade: 2px -2px 0px #af0; /* for demo functions */ } .halfStyle:last { /* creates the mediate 1/three */ show: artifact; z-scale: 1; assumption: implicit; apical: zero; width: sixty six.sixty six%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #000; /* for demo functions */ matter-shade: 2px 2px 0px #af0; /* for demo functions */ }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1697/))

-Horizontal 1/three Components

  • With out Matter Shade:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

  • Expectation of Matter Shade for all 1/three portion independently:

    halfStyle - Horizontal 1/3 Parts - With Text Shadow

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { /* basal char and besides the bottommost 1/three */ assumption: comparative; show: inline-artifact; font-measurement: 80px; /* oregon immoderate font dimension volition activity */ colour: clear; overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ colour: #f0f; matter-shade: 2px 2px 0px #0af; /* for demo functions */ } .halfStyle:earlier { /* creates the apical 1/three */ show: artifact; z-scale: 2; assumption: implicit; apical: zero; tallness: 33.33%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #f00; /* for demo functions */ matter-shade: 2px -2px 0px #fa0; /* for demo functions */ } .halfStyle:last { /* creates the mediate 1/three */ show: artifact; assumption: implicit; z-scale: 1; apical: zero; tallness: sixty six.sixty six%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #000; /* for demo functions */ matter-shade: 2px 2px 0px #af0; /* for demo functions */ }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1698/))

-HalfStyle Betterment By @KevinGranger

halfStyle - KevinGranger

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
assemblage { inheritance-colour: achromatic; } .textToHalfStyle { show: artifact; border: 200px zero zero zero; matter-align: halfway; } .halfStyle { font-household: 'Libre Baskerville', serif; assumption: comparative; show: inline-artifact; width: 1; font-measurement: 70px; colour: achromatic; overflow: hidden; achromatic-abstraction: pre; matter-shade: 1px 2px zero achromatic; } .halfStyle:earlier { show: artifact; z-scale: 1; assumption: implicit; apical: zero; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; colour: achromatic; }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1699/))

-PeelingStyle betterment of HalfStyle by @SamTremaine

halfStyle - SamTremaine

``` // jQuery for automated manner jQuery(relation($) { var matter, chars, $el, i, output; // Iterate complete each people occurences $('.textToHalfStyle').all(relation(idx, el) { $el = $(el); matter = $el.matter(); chars = matter.divided(''); // Fit the surface-scholar matter $el.html('' + matter + ''); // Reset output for appending output = ''; // Iterate complete each chars successful the matter for (i = zero; i < chars.dimension; i++) { // Make a styled component for all quality and append to instrumentality output += '' + chars[i] + ''; } // Compose to DOM lone erstwhile $el.append(output); }); }); ``` 
.halfStyle { assumption: comparative; show: inline-artifact; font-dimension: 68px; colour: rgba(zero, zero, zero, zero.eight); overflow: hidden; achromatic-abstraction: pre; change: rotate(4deg); matter-shade: 2px 1px 3px rgba(zero, zero, zero, zero.three); } .halfStyle:earlier { /* creates the near portion */ show: artifact; z-scale: 1; assumption: implicit; apical: -zero.5px; near: -3px; width: a hundred%; contented: attr(information-contented); overflow: hidden; pointer-occasions: no; colour: #FFF; change: rotate(-4deg); matter-shade: 0px 0px 1px #000; }

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p>Azygous Characters:</p> <span people="halfStyle" information-contented="X">X</span> <span people="halfStyle" information-contented="Y">Y</span> <span people="halfStyle" information-contented="Z">Z</span> <span people="halfStyle" information-contented="A">A</span> <hr/> <p>Automated:</p> <span people="textToHalfStyle">Fractional-kind, delight.</span>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1700/) and connected [samtremaine.co.uk](http://experimental.samtremaine.co.uk/half-style/))

Portion four: Fit for Exhibition

Personalized antithetic Fractional-Kind kind-units tin beryllium utilized connected desired components connected the aforesaid leaf. You tin specify aggregate kind-units and archer the plugin which 1 to usage.

The plugin makes use of information property information-halfstyle="[-CustomClassName-]" connected the mark .textToHalfStyle parts and makes each the essential modifications routinely.

Truthful, merely connected the component containing the matter adhd textToHalfStyle people and information property information-halfstyle="[-CustomClassName-]". The plugin volition bash the remainder of the occupation.

halfStyle - Multiple on Same Page

Besides the CSS kind-units’ people definitions lucifer the [-CustomClassName-] portion talked about supra and is chained to .halfStyle, truthful we volition person .halfStyle.[-CustomClassName-]

``` jQuery(relation($) { var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style; // Iterate complete each people occurrences $('.textToHalfStyle').all(relation(idx, halfstyle_el) { $halfstyle_el = $(halfstyle_el); halfstyle_style = $halfstyle_el.information('halfstyle') || 'hs-basal'; halfstyle_text = $halfstyle_el.matter(); halfstyle_chars = halfstyle_text.divided(''); // Fit the surface-scholar matter $halfstyle_el.html('' + halfstyle_text + ''); // Reset output for appending halfstyle_output = ''; // Iterate complete each chars successful the matter for (halfstyle_i = zero; halfstyle_i < halfstyle_chars.dimension; halfstyle_i++) { // Make a styled component for all quality and append to instrumentality halfstyle_output += '' + halfstyle_chars[halfstyle_i] + ''; } // Compose to DOM lone erstwhile $halfstyle_el.append(halfstyle_output); }); }); ``` 
/* commencement fractional-kind hs-basal */ .halfStyle.hs-basal { assumption: comparative; show: inline-artifact; font-dimension: 80px; /* oregon immoderate font measurement volition activity */ overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ colour: #000; /* for demo functions */ } .halfStyle.hs-basal:earlier { show: artifact; z-scale: 1; assumption: implicit; apical: zero; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ pointer-occasions: no; /* truthful the basal char is selectable by rodent */ overflow: hidden; colour: #f00; /* for demo functions */ } /* extremity fractional-kind hs-basal */ /* commencement fractional-kind hs-horizontal-3rd */ .halfStyle.hs-horizontal-3rd { /* basal char and besides the bottommost 1/three */ assumption: comparative; show: inline-artifact; font-dimension: 80px; /* oregon immoderate font dimension volition activity */ colour: clear; overflow: hidden; achromatic-abstraction: pre; /* to sphere the areas from collapsing */ colour: #f0f; matter-shade: 2px 2px 0px #0af; /* for demo functions */ } .halfStyle.hs-horizontal-3rd:earlier { /* creates the apical 1/three */ show: artifact; z-scale: 2; assumption: implicit; apical: zero; tallness: 33.33%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #f00; /* for demo functions */ matter-shade: 2px -2px 0px #fa0; /* for demo functions */ } .halfStyle.hs-horizontal-3rd:last { /* creates the mediate 1/three */ show: artifact; assumption: implicit; z-scale: 1; apical: zero; tallness: sixty six.sixty six%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; pointer-occasions: no; /* truthful the basal char is selectable by rodent */ colour: #000; /* for demo functions */ matter-shade: 2px 2px 0px #af0; /* for demo functions */ } /* extremity fractional-kind hs-horizontal-3rd */ /* commencement fractional-kind hs-PeelingStyle, by person SamTremaine connected Stackoverflow.com */ .halfStyle.hs-PeelingStyle { assumption: comparative; show: inline-artifact; font-dimension: 68px; colour: rgba(zero, zero, zero, zero.eight); overflow: hidden; achromatic-abstraction: pre; change: rotate(4deg); matter-shade: 2px 1px 3px rgba(zero, zero, zero, zero.three); } .halfStyle.hs-PeelingStyle:earlier { /* creates the near portion */ show: artifact; z-scale: 1; assumption: implicit; apical: -zero.5px; near: -3px; width: a hundred%; contented: attr(information-contented); overflow: hidden; pointer-occasions: no; colour: #FFF; change: rotate(-4deg); matter-shade: 0px 0px 1px #000; } /* extremity fractional-kind hs-PeelingStyle */ /* commencement fractional-kind hs-KevinGranger, by person KevinGranger connected StackOverflow.com*/ .textToHalfStyle.hs-KevinGranger { show: artifact; border: 200px zero zero zero; matter-align: halfway; } .halfStyle.hs-KevinGranger { font-household: 'Libre Baskerville', serif; assumption: comparative; show: inline-artifact; width: 1; font-measurement: 70px; colour: achromatic; overflow: hidden; achromatic-abstraction: pre; matter-shade: 1px 2px zero achromatic; } .halfStyle.hs-KevinGranger:earlier { show: artifact; z-scale: 1; assumption: implicit; apical: zero; width: 50%; contented: attr(information-contented); /* dynamic contented for the pseudo component */ overflow: hidden; colour: achromatic; } /* extremity fractional-kind hs-KevinGranger

<book src="https://ajax.googleapis.com/ajax/libs/jquery/1.eleven.1/jquery.min.js"></book> <p> <span people="textToHalfStyle" information-halfstyle="hs-basal">Fractional-kind, delight.</span> </p> <p> <span people="textToHalfStyle" information-halfstyle="hs-horizontal-3rd">Fractional-kind, delight.</span> </p> <p> <span people="textToHalfStyle" information-halfstyle="hs-PeelingStyle">Fractional-kind, delight.</span> </p> <p kind="inheritance-colour:#000;"> <span people="textToHalfStyle" information-halfstyle="hs-KevinGranger">Fractional-kind, delight.</span> </p>
([JSFiddle demo](http://jsfiddle.net/arbel/pd9yB/1701/))

🏷️ Tags:

#Html #Css
← Previous: Put icon inside input element in a form Next: HTTP GET with request body →