I need inset and outer shadow at a box for a menu.
How can i do that?
Here is my CSS:
li.menu-list:hover {
border:solid 0.1rem white;
background-color: rgba(26, 67, 119, 0.8);
box-shadow: 0 0 1rem 0.2rem white;
box-shadow: 0 0 1rem 0.3rem white inset;
}
You can't do this as you are overwriting your original value. What you should do is this:
box-shadow: 0 0 1rem 0.2rem white, 0 0 1rem 0.3rem white inset;
By adding another box-shadow declaration, you are actually resetting the box shadow and implementing another one, so only one shows up. CSS3 has a lot of these new-fangled options and they can all be chained together using commas to separate them.
Related
I was on the google news page and I was wondering how do google make his border around each sections, because I can't find in the inspector any element with a border property. I find those borders very thin and I think it is not with the border property with CSS.
if you inspect well, then you will see its a box-shadow instead of border, Here is what they used in their css, Please check again,
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
background-color: #fff;
Hint: check for class .lPV2Xe
Because this is not a border. It's a box-shadow.
this effect can be created by
.card {
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04);
}
.card:hover{
box-shadow: 0px 8px 10px 0 grey;
-webkit-transition: box-shadow .3s ease-in;
}
and create a div with the class card.
found a similar pen Link to example
I have a situation where I have an input text field for an email.
It has a focus attribute that displays a blue border.
When the email is in a wrong format, the input is in a red border.
However, When there's already a red border i.e. an error in the field and I set focus on the input field, I see the blue border with the red one.
This is the contents of class for the focus:
.myClass:focus{
box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
-webkit-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 0 3px #50BADE,inset 0 1px 3px rgba(0, 0, 0, .05);
}
This is the class for the red border:
.input.error {
padding: 5px;
border-radius: 5px;
border: 1px solid #DD4B39;
}
Is there a way for my to make sure the focus style will not be displayed when the red border is being displayed?
I can think of two solutions:
If the .error class affects the same property (box-shadow) as focus, it will override it (assuming it has higher or equivalent specificity; use !important otherwise). So either make it a red box-shadow or keep your red border while explicitly removing any box-shadow.
Or refine your :focus selector so it doesn't apply to .error: input:not(.error):focus (requires CSS3)
I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.
Please take a look at this simple code:
http://jsfiddle.net/kerp3/
The box has an inner box shadow o all 4 sides. I need the box shadow to only appear on the left and bottom sides.
How to change this code:
box-shadow: inset 0 0 9px 0 #000;
Does this help, this should work cross browser.
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Here is the original author :
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
See this page:
http://css-tricks.com/snippets/css/css-box-shadow/
With a small change to the color and the offsets it becomes fairly simple:
div { width: 300px; height: 300px;
box-shadow: inset 5px 5px 5px -3px #666;
}
The jsFiddle of it.
I was going to suggest using negative values like so:
div { width: 300px; height: 300px;
/* Try this. */
box-shadow: inset 4px -4px 7px -4px #000;
}
The first 4px pushes the shadow box to the left by 4px, hiding what you would normally see on the right, if you left it at 0.
The second -4px value pushes the shadow vertically down, again hiding the top shadow.
The higher 7px blur value gives me a more than a I need, but if I add a spread of -4px, that extra blur will be clipped. Leaving only a soft grey shadow edge, instead of the hard black one you'll usually see.
See my example here:
http://jsfiddle.net/khalifah/vVUB5/
You can't apply a shadow only to certain sides of a <div>, but you can adjust the X and Y offsets so that the shadow gets clipped on the sides where you don't want it.
This gave me the effect you're looking for in Safari:
box-shadow: 7px -7px 9px #000 inset;
I have the following box-shadow inset css3 styling:
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
The inset styling appears on all 4 sides of the box but I do not want styling on the top. How can I remove the styling from the top but keep the styling on the Left, Bottom, Right?
Thanks
This is what you want:
.right-left-bottom-shadow {
box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
The first one is left, second bottom and last the shadow for the right side. This looks really nice if your border has color #CCC.
You can't do that with just box-shadow so far, but you can composite box-shadow with other possibilities like overflow: hidden. For example, you can push the top shadow outside of parent element and hide that part with overflow: hidden.
See this demo: http://jsfiddle.net/CatChen/Fty2N/3/
No CSS method I know for this but following can be a work around (not a perfect solution)
<div id="mydiv">
<div class="workaround"></div>
</div>
CSS
#mydiv {
background-color:#f00;
height:100px;
width:100px;
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
padding:0 2px;
}
#mydiv .workaround {
background-color:#f00;
width:100%;
height:10px;
}
Check Fiddle http://jsfiddle.net/bZF48/17/