Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Standardized way of graying out normal HTML text

Is there a standardized way of graying (greying) out text that is meant to be ignored, either in HTML, or bootstrap?

I tried looking at both how Slack styles the "(edited)" text, and how Twitter itself (twitter.com) styles timestamps, and it seems they just change the font color. It just seems strange to me that an arbitrary font color is chosen without any semantic information is attached to it, or even a standardized shade of gray.

The bootstrap documentation mentions some semantic colors, but gray isn't included in them - gray is only mentioned in grayscale.

like image 248
Andrew Grimm Avatar asked Jun 27 '16 07:06

Andrew Grimm


People also ask

How do I GREY out an image in HTML?

0% (0) is default and represents the original image. 100% will make the image completely gray (used for black and white images).

How do I GREY out a text box?

In HTML, to “grey out” the text box or to disable it simply mention keyword “ disabled” in your input tag.

How do you color text in HTML?

To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.


2 Answers

There is actually a standard way to do it, in bootstrap, which is to use to use text-muted.

In fact, there is a list of standard text shades and colors that are applied directly.

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

As for HTML, having a CSS with a disabled class and applying that to any of your text would be a better option.

like image 139
Ctc Avatar answered Sep 21 '22 11:09

Ctc


Standard HTML Input Forms

An example of this is disabling HTML input elements, though there's not a standard display of that across browsers.

http://codepen.io/anthonyastige/pen/dXNEmx

<input type=button value="I can do all the things">
<input type=button value="I'm disabled" disabled>

Bootstrap Input Forms

There's also the concept of disabling input elements here with the .disabled class

https://getbootstrap.com/css/#checkboxes-and-radios

Bootstrap text

The .text-muted class implies disabled, though the specs don't say exactly what it means.

https://getbootstrap.com/css/#helper-classes

like image 41
Anthony Astige Avatar answered Sep 21 '22 11:09

Anthony Astige