In CSS (Cascading Style Sheet) code, the text is one of the format types for creating the presentation on the web pages. Each text has different fonts, sizes, colors, and alignments. Some text formatting properties style the text, including headings, footers, and other areas. The text-align property aligns these elements on web pages. Furthermore, the color property sets the color of the specified text by using color name values or hexadecimal format. Also, it uses RGB (Red, Green, Blue) format type in the CSS.
Web development, programming languages, Software testing & others
Syntax and Parameters:
We can follow some rules and syntax for customizing the web pages to be more attractive. We use text format type in all the CSS properties and their attributes.
The above code is one of the basic syntaxes for CSS text and color-based presentation on web pages. We can use any number of CSS attributes and their properties parameters, also passing here parameters named as attributes and properties values used for customizing the web page.
How does it work in CSS?
In CSS style codes, we used a lot of attributes and properties with default values. It will be text, numbers, special characters, etc., using these values. We can enable the particular parcel of their css attributes to make the presentation more attractive. We can use the CSS color codes in the html text-based elements by using some default html tags, ID, or Some built-in classes.
When applying CSS color to HTML tag-based elements, the tag is commonly used as a default HTML code to add color using CSS styles. Also, it helps any elements in the CSS. is mostly used in the tag in the html because also declares and initializes in there, so the heading line is probably what we used there in the web pages.
Next, we can utilize CSS colors by using IDs in HTML web pages, similar to how we applied them to heading tags. The elements are assigned with a specific ID, which is defined in the style code within the heading section. Also, the ID can be used and styled the same as in the html tags, but the important point is that the id value should start with a special character like the ‘#’ symbol. After that, we can use any number of formats like alphabets, numbers, etc. We can use text color in CSS with the help of class. It’s one of the methods for adding colors to the CSS style sheet. The symbol in the CSS code.
The prefix value should start compulsory in the dot operator, or the CSS codes are not used in the html web pages. . The same classes are also declared in the tag. The same class names are called in the tag element is
Especially the CSS uses a different set of properties related to the text and color based. Some of them are “color, direction, letter-spacing, word-spacing, text-indent, text-align, text-decoration, text-transform, white-spaces and text-shadow” These are some default properties which has been used in the style codes for each property it has their features and advantages of the CSS.
In CSS sheet, the color is important to contrast because it calculates the ratios for comparing the luminosities of the text-based values with background colors. It does not affect the other content, like images and animations.
Recommended Articles
This is a guide to CSS Text Color. Here we discuss how text color works in CSS, along with appropriate syntax and respective examples. You may also have a look at the following articles to learn more –
38+ Hours of HD Videos 9 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
149+ Hours of HD Videos 28 Courses 5 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
253+ Hours of HD Videos 51 Courses 6 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests 82+ Hours of HD Videos 19 Courses 3 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
Reverse Text Color Based on Background Color Automatically in CSS
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn’t move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background. My first thought was this: how can we replicate this design pattern and what might we learn along the way? Here’s what I came up with, but make sure to check this demo on the latest version of Chrome to see everything working correctly: See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. Pretty cool, huh? This is possible with the awesome magic of mix-blend-mode in CSS.
Let’s take a look at the markup first
The .wrapper will hold our elements in place, .bg will be our loading bar that increases over time and our .text element will be used as the percentage information.
Let’s make the whole thing CSS-only
A “real” loader on the web would likely be powered by JavaScript and reacting to actual data somehow. But while we’re having fun here, let’s make the whole thing, even the counting, happen just in CSS (SCSS for the looping help). We’ll set up our variables and style the .bg element:
$loadingTime: 10s; $color: rgb(255, 0, 0); .bg
Perhaps we could have hidden the overflow and moved the background box with transform property instead (for performance reasons) but in this little demo I think it’s fine to animate the width property alone. To update the content of the .text element with the correct percentage value we have to be a little dastardly and use a mix of pseudo elements and animations. First we’ll keep the empty set the content of its after pseudo element to 0% before defining an animation:
So what we want to do with the percentage animation above is update our content property with each value from 1 to 100, like this:
But instead of making all those @keyframe selectors by hand we can familiarise ourselves with the @for loop syntax in Sass:
If this looks a little scary then not to worry! On the third line we add whichever number is currently in the loop (which we call $i ) and make that a string by appending % to it and assigning it to a variable. Then we can use interpolation to make each @keyframe selector update the content property to the right value.
Finally, all we have to do is set the color and the mix-blend-mode of our pseudo element and there we go; a pure CSS loader where the background color influences the foreground text:
See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen. With the difference blend mode we have to set the text element’s color value to the opposite of the background. So if our background is rgb(0, 0, 0) we’ll need to set the text pseudo element to rgb(255, 255, 255) . I think this little demo helps us recognise how useful the mix-blend-mode property can be. There are going to be all sorts of instances like this in the future where interfaces can reveal information in ways we’d never have thought possible before.
Changing Text Color Entirely
The cool part of this technique is the fact that some of the text is one color and other parts of the text is another color. The reversing happens just based on what is covered and what isn’t, even if it’s just a part of a letter. If you were looking for more of an accessibility-based “change the text color to make sure it has enough contrast” thing, Sass can also help with that.
The XOXO site used mix-blend-mode: darken; quite a bit to to have backgrounds, shapes, and text all interact in subtle/interesting/beautiful ways that we haven’t seen a whole lot on the web yet.
The mix-blend-mode property isn’t well supported at the moment and neither is the animatable content property. So make sure to provide fallbacks if you decide to use either of these tricks.
