Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change text size and color incrementally

I want to know if it's possible to change the text size and color incrementally on the same line, like this:

enter image description here

I want to use CSS only if possible. Any other solution, that at least doesn't force me to put each letter in its own span, is welcome, too.

body {   font-family:monospace; }
<span style="font-size:50px;">L</span><span style="font-size:45px;opacity:0.7">o</span><span style="font-size:38px;opacity:0.5">r</span>...
like image 378
noClue Avatar asked Mar 05 '18 09:03

noClue


People also ask

What changes the color and size of a text?

You can change the color and size of your text right inside its tag with the color and font-size properties. This is known as inline CSS. You do it with the style attribute in HTML.

Which tag is used to change the text color and size?

The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.

How do you change font size and color in HTML?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.

How do I change the text size in vary?

Change the size of selected text To change the font size of selected text in desktop Excel, PowerPoint, or Word: Select the text or cells with text you want to change. To select all text in a Word document, press Ctrl + A. On the Home tab, click the font size in the Font Size box.


1 Answers

What about some transformation and gradient without all these markup:

body {    perspective: 250px;    perspective-origin: bottom;  }    div {    font-size: 70px;    background: linear-gradient(to right, black,rgba(0,0,0,0.3),rgba(0,0,0,0.2));    display: inline-block;    -webkit-background-clip: text;    background-clip: text;    -webkit-text-fill-color: transparent;    color: transparent;    transform: rotateY(70deg);    transform-origin: left;  }
<div>    Lorem Ipsum Lorem  </div>
like image 147
Temani Afif Avatar answered Sep 21 '22 23:09

Temani Afif