Css colors in words

Multi-colored text in CSS

In this article, we will be creating a super cool effect where we can have multi-colored text in CSS.

I saw this effect a while ago on Twitter done by Adam Argyle and was blown away by how easy this can be achieved in CSS.

Below is a demo of what we’ll be creating today!

See the Pen by Chris Bongers (@rebelchris) on CodePen.

CSS Multi-colored gradient text permalink

To create this effect, let’s first start with our HTML structure. This is super easy as we only need one element!

h1>multi colored text in cssh1>

Then it’s off to our CSS file to magic some magic 🪄.

Let’s start by defining our five colors and our starting angle.

:root  --color-1: #442288; --color-2: #6ca2ea; --color-3: #b5d33d; --color-4: #fed23f; --color-5: #eb7d5b; --angle: 0deg; >

We use the root to define variables as this is valid syntax in basic CSS. No need for SCSS here.

Then let’s add some styling to our body. This is used to center our text and make our background black. The effect works better on black but will also work on different colors.

body  display: flex; justify-content: center; align-items: center; background: #000; >

Then let’s start on styling our h1 element.

I’m breaking these up into a couple of steps to give more of an idea of what’s happening.

1. Basic heading styling permalink

For our basic styling, we want a relatively big heading.

h1  color: #fff; text-align: center; font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 6.5vw; font-weight: 900; line-height: 6vw; text-transform: uppercase; >

This will give us the following output.

2. Each word on its own line permalink

As you can see above, it’s just one big line. We can use the following CSS hack to get each word on its own line.

Making each word space on a single line

3. CSS Text Gradient background permalink

Now we can move to add the gradient effect. We’ll start by splitting the gradient into five steps, resulting in each word being one color.

background: linear-gradient( var(--angle), var(--color-1) 19%, transparent 19%, transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%, transparent 40%, var(--color-3) 40%, var(--color-3) 59%, transparent 59%, transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80% ); background-clip: text; -webkit-background-clip: text; color: transparent;

Here, we define the colors we have in our :root element definition. As well as the basic angle of 0. We add a transparent border between each color for our animation later on. As well as set the clipping mode to text.

Animating a linear background gradient in CSS permalink

To animate the gradient is quite tricky. We are applying the main hack by defining the —angle variable.

Then we can add an animation to our h1 element.

animation: 10s rotate linear infinite;

This animation looks as follows:

@keyframes rotate  to  --angle: 360deg; > >

However, this doesn’t do much yet, because the browser doesn’t know 360deg is a value. We can fix this by defining a @property for the —angle variable.

@property --angle  syntax: '>'; initial-value: 0deg; inherits: false; >

And there we go! A super cool CSS text animation effect. I hope you enjoyed this article.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Источник

How to create multiple-color text in HTML CSS?

To create multiple-color text, you need to write CSS for the different parts of the text.

In this post, I will show you how to use multi-color in a sentence & word .

This is the technique I used on many websites that helped me to make attention-grabbing content.

Let’s see how you can do that.

How to create multicolor text in HTML CSS?

You can use two main different ways to implement multiple colors in a single sentence or word. One is a gradient color and the other one is a simple color property.

Together we will explore all the examples that are used in the real world.

Make a multicolor sentence using the CSS color property

To create a multiple-color sentence, I wrapped the words in tags and gave them unique class names. This is how you can assign different color values to each word in your CSS.

HTML

span.c1 < color: #E53D30; >span.c2 < color: #FCC421; >span.c3 < color: #249544; >span.c4

Output

This is an example sentence .

Make a multiple-color word

In the same vein, you can wrap each of the letters in a tag and unique class name. So you can write different color values for each letter.

I have the following code for the above example:

HTML

p < text-align: center; font-size: 26px; font-weight: 700; >p span.c1 p span.c2 p span.c3 p span.c4 p span.c5 p span.c6 p span.c7

Output

Make multiple colors of text using gradient

As I mentioned earlier, you are just not limited to span tags and writing custom CSS for each span. You can also use the gradient color to make multicolor text (sentence, word & letter).

HTML

This is an example heading that uses gradient colors.

CSS

background: -webkit-linear-gradient(#06ba0f, #E20D0D); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Output

This is an example heading that uses gradient colors.

And it brings me to the end of this post.

Build HTML CSS projects

Popular posts

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Categories

Recent comments

Yes, you can edit the code to make them center aligned. You can contact me on Skype to get customized/extra…

Hi, thank you for this. It almost helped me to achieve what I wanted. Only one problem left: I want…

Thank you, that was so helpful! Especially the ‘Extra help for non-techies and newbies’ part 🙂

You have crafted an amazing guide about the best Fiverr gig image size guide. I found it helpful while doing…

Wow great it worked like a charm. Thanks buddy

Disclosure: I accept suggestions to make improvements to any content & user experience. So if you have any, please feel free to reach out. You will find a few different contact methods on the contact page. But, I may not respond to those persons who intend to get links.

Shihab Ul Haque

You can call me Shihab. I am a web developer and have been working with PHP & WordPress a lot.
I have a master’s degree and left my regular job to fully engage with the field that I love working in. I live in Bangladesh and help business owners to create a stunning online presence.

Источник

CSS Font Color – How to Style Text in HTML

Kolade Chris

Setting text color on a website you’re building might be confusing at first. But in this article, you’ll learn how to do it.

How to Set Text Color in HTML

In CSS, the background-color property is pretty straightforward for setting the background color of anything.

So what if you want to set the foreground color of something on the page? Especially text, which under normal conditions you wouldn’t want to set a background color for.

There’s no foreground-color property in CSS, so what makes this possible is the color property.

In this article, I will walk you through how to set the color of text using the color property. We’ll also look at the various ways it takes values.

The color property takes values in 4 different ways: named color, hexadecimal color, RGB color, and HSL color. Let’s look at each one now.

Named Colors

As the name implies, you bring in the color property and apply the value by naming the color you want. This may be red, green, blue, orange, crimson, cyan, or any other named color. There are around 147 named colors recognized by browsers.

The basic syntax looks like this:

Hexadecimal Colors (or just Hex Colors)

Hex values are used to represent colors with a total of 6 characters. They start with the pound/number sign (#), then any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue. With hex values, there’s no limit to the shades of colors you can use.

RGB Colors

RGB stands for red, green, and blue. With RGB colosr, you specify the color in terms of how much red, green, and blue you want. All three are expressed with numbers between 0 and 255.

There is a type of RGB called rgba . The extra ‘a’ stands for alpha, which lets you specify the opacity of the color. It takes a value from 0.0 to 1.0 – 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha) .

You can limit it to rgba(amountOfRed, amountOfGreen, amountOfBlue) if you don’t want an alpha value.

Here’s the syntax for the regular RGB values:

And here it is demonstrating the alpha value in action with 50% (0.5) opacity:

HSL Colors

HSL stands for hue, saturation, and lightness. It is another way of specifying color for text (and anything else that takes color) in CSS.

• Hue represents the color wheel in 360°. So, 0° is red, 120° is green and 240° is blue.
• Saturation is the amount of gray in the color, expressed as a percentage. 0% is the shade of gray and 100% is the color itself.
• Lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Just like the RGB colors, you can also set the opacity of the color. So, there’s also hsla.

The full basic syntax is hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha) . You can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage) in case you don’t want an alpha value.

You can apply a particular opacity to the hsl color like this:

Should You Use Named Colors, Hex Colors, RGB Colors, or HSL Colors to Assign Colors?

One of the wonderful things about CSS is that there are multiple ways of doing the same thing. You’ve seen this by applying colors to text.

Since you can apply colors in 4 different ways, you must be wondering which is the best to use.

When you use named colors, you’re kind of limited in how far you can go in applying different shades of colors. Red, green, blue, yellow, or any other named color has a lot of variations you won’t get access to with named colors. You’ll only have access to around 147 predefined colors recognized by browsers.

Hexadecimal colors are very dynamic. They are the most commonly used among developers because your limit is your creativity. With hex colors, you can use various shades and even use a color no one has ever used.

RGB colors are as dynamic as hex colors. Apart from being able to specify how much red, green, and blue you want from 0 to 255, you can also set how transparent you want the color to be with the extra alpha value.

HSL is the most dynamic of all. You get to specify the exact color you want in degrees from 0 to 360 within the color wheel, set how saturated and dark you want it to be in percentages, and also set an opacity from 0.0 to 1.0.

So really, it’s up to you and your use case – and just how creative or specific you want to get.

Conclusion

Applying colors to text helps make your website more attractive to visitors. The right color combo can also help your content become more readable too.

In this article, you have learned how to apply colors to text with the 4 different kinds of values you can use with the color property.

Thank you for reading, and keep coding.

Источник