How to Grey Out a Box in CSS

How to grey out a box in CSS

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

$(document).ready(function() {  $("#myDiv").click(function() {    $("#overlay").show();  });});
#myDiv {  width: 100px;  height: 100px;  background-color: yellow;  margin: 50px 50px;  padding: 10px;}
#overlay { display: none; position: absolute; width: 100px; height: 100px; background-color: gray; top: 50px; left: 50px; padding: 10px; opacity: .8;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="myDiv">  <p>Some text</p>  <input type="button" value="A button" /></div>
<div id="overlay"></div>

How to gray out a HTML element

Lower the opacity.

<table class="grayout">
...
</table>
.grayout {
opacity: 0.6; /* Real browsers */
filter: alpha(opacity = 60); /* MSIE */
}

CSS/JavaScript Use Div to grey out section of page

You might try the jQuery BlockUI plugin. It's quite flexible and is very easy to use, if you don't mind the dependency on jQuery. It supports element-level blocking as well an overlay message, which seems to be what you need.

The code to use it is as simple as:

$('div.profileform').block({
message: '<h1>Premium Users only</h1>',
});

You should also keep in mind that you may still need some sort of server-side protection to make sure that Non-Premium users can't use your form, since it'll be easy for people to access the form elements if they use something like Firebug.

How can I grey out page except for one element?

Can do it using css box-shadow.

.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}.box.selected{    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);}
<div class="box">Box 1</div><div class="box">Box 2</div><div class="box selected">Box 3</div><div class="box">Box 4</div>

How to grey out parent div and sibling divs with javascript/css

If I understand the problem correctly, you want a transparent overlay over your page, but with a 'hole' in it for one element to show through?

Here is a first pass at the problem. It uses a pseudo-element over the target element that is just 10 pixels wider on either side with a transparent box-shadow on it that extends across the entire viewport. (100vw should be enough, but could be made bigger if necessary). A second inset box-shadow provides the soft edge.

toggleOverlay.addEventListener('click', () => {
foo.classList.toggle('with-overlay');
});
body {
background: antiquewhite;
}

.foo {
padding: 40px;
margin: 100px;
position: relative;
border: solid 1px black;
}

.foo.with-overlay:before {
content: '';
pointer-events: none;
position: absolute;
border-radius: 10px;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
background: transparent;
opacity: 0.8;
}
<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="foo" class="foo">
hello world
<button id="toggleOverlay">toggle overlay</div>
</div>
<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Gray out image with CSS?

Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div> overlay and set that to be gray (change the alpha to get the effect).

  • html:

    <div id="wrapper">
    <img id="myImage" src="something.jpg" />
    </div>
  • css:

    #myImage {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    }

    /* or */

    #wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    background-color: #000;
    }

Standardized way of graying out normal HTML text

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.

Gray out a section of an image with CSS

Pure CSS Solution with no extra markup

JSFIDDLE DEMO

HTML

<div class="image-container">
<img class="image-grey" src="http://placekitten.com/200/150" />
</div>

CSS

.image-container {
position:relative;
display:inline-block;
}

.image-grey {
display:block;
-webkit-filter: grayscale(100%);
}

.image-container:after {
position:absolute;
content:"";
top:0;
left:50%;
width:50%;
height:100%;
background-image:url(http://placekitten.com/200/150);
background-position:top right;
}

how can I greyout a disabled field?

The JSF input component's disabled attribute doesn't emit a style class like class="disabled" or something like as your CSS declaration seems to expect. It just sets the HTML-standard disabled attribute on the generated HTML element. To see it with your own eyes, open the JSF page in your favourite browser, rightclick and View Source. It'll look something like

<input type="text" disabled="disabled" />

You need to use the CSS attribute selector element[attrname]. If the attribute with attrname is present on the element, then the style will be applied.

#content input[disabled] {
color: #DCDAD1;
padding: 2px;
margin: 0 0 0 0;
background-image: none;
}

(please note that I fixed the background-image declaration as well as it was invalid)

HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

This answer illustrates a pre-HTML5 approach. Please take a look at Psytronic's answer for a modern solution using the placeholder attribute.


HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript:

function inputFocus(i) {
if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}


Related Topics



Leave a reply



Submit