I show box-shadow with this CSS code.
img {
box-shadow: 2px 2px 1px #888;
}
I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,
<img ... class="noborder">
#noborder
{
box-shadow: 0px 0px 0px #888;
}
However, I still have the shadow with the `class="noborder">code, what might be wrong?
Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .
Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.
I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.
.shadow
{
box-shadow: 2px 2px 2px #888;
}
.noShadow
{
2px 2px 2px transparent
}
.noShadow.none
{
box-shadow: none;
}
And here's a jsfiddle demo to show you how it works.
try replacing #noborder with .noborder, you want it to be a class, not an ID.
Additionally, box-shadow: none is a neater alternative to remove the box shadow
Use box-shadow: none to remove the shadow completely.
<div>test</div>
<div class="noborder">test</div>
div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}
Demo
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
I have two buttons next to each other. One of them has a background and the other has a transparent background with a border. The problem is the border is visually outside the button, making it slightly larger than the primary button.
I have searched and come across many solutions for this, but my question is what is the best practice to solve this?
Thanks!
use box-sizing
box-sizing: border-box;
This way the padding, border will be inside.
You have two options, one is to use outline and outline offset, like this:
button{
outline: 1px solid red;
outline-offset: -1px;
}
Or you can use an inset box-shadow, like this:
button{
box-shadow: inset 0px 0px 1px red;
}
I would like to use the color #644220 for the border of my input field. I have tried it like this:
HTML
<input class="my_border" type="text">
CSS
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
}
https://jsfiddle.net/9dss92v6/1/
When I use red or any other HEX code, it will work for me. It won't only accept the code #644220. And #644220 is an existing color as you see here.
Not even the RGB code (border-color: rgb(100, 66, 32);) is working.
What is wrong with it?
From MDN:
Note: The default value of border-style is none. This means that if
you change the border-width and the border-color, you will not see the
border unless you change this property to something other than none or
hidden.
Now I assume that browsers are not following this and they show some solid default border by default. [1]
You need to define a style for your border for example solid
border-style: solid;
Demo
[1] Was playing further with this, turns out that it's weird behavior I think from the browsers point of view. If am using a word like red or tomato as color names, it works but still, the color is not the one we expect it to be for example this vs this.
I will update this thread if I got any solid reasoning for this.
Edit 3:
Debugging further, it turns out that the default value Chrome sets is inset for border, i.e, border-style: inset;, which has grayish border which is like a shadow. Hence, your color does render but it mixes with the inset border being set by Chrome defaults. Now am not sure why the color is not overridden by the color declaration you have in your stylesheet, might be a bug.
Add border-style for it:
.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
border-style: solid;
}
You may want to combine the properties of your border in one line like this:
.my_border {
width:100%;
padding: 20px;
outline: none;
border: 10px solid #644220;
}
You can always change the thickness of the border. I made it in 10px so it will be visible.
box-shadow is not working in Chrome.
I have a table layout in which I have to use display property as table-row-group.
I am trying to put box-shadow in tbody and it's failing.
Please see it here - JSFiddle.
It's working perfectly fine in FF but not in Chrome. I looked on other questions/suggestions and it looks like we can do it in display: block property.
Any workaround for display: table-row-group?
You could create a div within the th or tr tag as a workaround and assign a box-shadow to the div instead. I've implemented this in this JSFiddle to the first th element.
Try this:
tbody {
-webkit-box-shadow: 5px 5px 3px green;
-moz-box-shadow: 5px 5px 3px green;
box-shadow: 5px 5px 3px green;
display: block
}
It works.
I have this JSFiddle
<div class="boo">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
CSS
.boo{
border-left: 12px ridge red;
}
and i want to customize the two colors. I tried to put this outline-color:12px solid darkblue in the class boo but it doesn't work..
To obtain two distinct colours for a 12px left border, just give a 6px-wide red left border for .boo element and another 6px.wide blue left border for the inner paragraph
example fiddle: http://jsfiddle.net/uyTd7/1/
CSS
.boo {
border-left: 6px solid red;
}
p {
border-left: 6px solid blue;
}
But this will work until you have two elements and no margin or padding between: if you had one single element (e.g. a <p>) you could reach the same result on modern browser using box-shadow property (with vendor prefixes where necessary), e.g.
p {
border-left: 6px solid red;
box-shadow: -6px 0 0 blue;
}
example fiddle: http://jsfiddle.net/7cq78/1/
There are several ways you can add another 'border'
1. Using outline (wont work with rounded corners though)
http://www.w3schools.com/css/css_outline.asp
2. Using :after & :before
:after and :before lets you create a whole new element with fully customize-able border (and outline). The limit is your creativity
3. Border style & image
There are many kind of border style such as solid, dashed, dotted, ridge etc. Also you can just easily use repeating image for your border
try this
.boo{
border-left: 12px solid red;
outline:12px solid darkblue ;
}
p{
padding-left:10px;
}
one limitation is IE6 and IE7 don't support the outline property.