How could you eliminate the top box-shadow. It would be perfect if CSS had something already built in, but anything rarely is.
Here's a live example.
Scroll down to the bottom of the page to the footer. I want to eliminate the top box-shadow on the pseudobottom.
Thanks
Use this:
#Background
{
-webkit-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
box-shadow: 0px 1px 30px rgba(0,0,0,.4);
}
Apply this CSS to your #wrapper2
#wrapper2{border-radius: 0 0 12px 12px;
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;
}
This will solve your design and give the same output that you have desired by including a div with pseudobottom class.
Further, I am also curious to know the purpose of including a div with pseudobottom class. Is it just to resolve the design or it will have the contents too?
Used to this add one more box shadow for top and bottom Shadow
*as like this*
.container-wide{
-webkit-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
}
If u show only top shadow than apply this css
.container-wide{
-moz-box-shadow: -1px -1px 1px 1px #ccc;
-webkit-box-shadow: -1px -1px 1px 1px #ccc;
box-shadow: -1px -1px 1px 1px #ccc;
}
Related
Hello I want to use box shadow for div.
Any idea how to do that ?
I have use
box-shadow: 3px 3px 5px 6px #ccc;
but not working in firefox.
Use :
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
following documents shows it perfectly :
1
2
3
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Certain versions of Firefox may still require the use of the -moz prefix. Could that be the issue?
-moz-box-shadow: 3px 3px 5px 6px #ccc;
This looks fine to me
-moz-box-shadow: 3px 3px 3px 3px #cccccc;
box-shadow: 3px 3px 3px 3px #cccccc;
Try this:
-moz-box-shadow: 3px 3px 5px 6px #ccc;
Check the MDN for reference
if you want to using in mozilla using tag -moz-box-shadow:.. if chrome using tag -webkit-box-shadow:.. or in opera using tag -o-box-shadow:... for more details open
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_image_gallery
for inner box-shadow use this
-moz-box-shadow: inset 0 0 10px #f00;
-webkit-box-shadow: inset 0 0 10px #f00;
box-shadow: inset 0 0 10px #f00;
And for outer box-shadow use this
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
box-shadow:3px 3px 5px 6px #ccc;
-webkit-box-shadow:3px 3px 5px 6px #ccc;
-moz-box-shadow:3px 3px 5px 6px #ccc;
-o-box-shadow:3px 3px 5px 6px #ccc;
-ms-box-shadow:3px 3px 5px 6px #ccc;
Use this code useful for you.
Please use -moz- prefix for older version of firefox.
-moz-box-shadow: 3px 3px 5px 6px #ccc; /*will work only in firefox*/
box-shadow: 3px 3px 5px 6px #ccc; /*will work on all browser and latest firefox also*/
Check it out here.
Just use it: http://css3gen.com/box-shadow/
It saves a lot of time.
I want to get a textfield effect using CSS3 like this :-
I tried to do that using CSS3 but yet not succeeded to get exactly the same look, please find my code here in jsfiddle.net
CSS
.field {
-webkit-box-shadow: inset 0px 1px 4px 1px #929292;
-moz-box-shadow: inset 0px 1px 4px 1px #929292;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
width: 277px;
height: 18px;
border-top: #9f9e9e 1px solid;
border-right: #c9c9c9 1px solid;
border-bottom: #ececec 1px solid;
border-left: #c9c9c9 1px solid;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
outline: none;
padding: 6px 8px;
font-size: 13px;
line-height: 16px;
color: #333;
}
HTML
<input type="text" name="name" value="" class="field">
Thanks in advance.
It is difficult to define "exactly the same look". Any way, that is my try:
updated demo
I have changed box-shadow, and given it a second shadow
box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, 0.3),
inset 0px -1px 1px 1px rgba(0, 0, 0, 0.2);
The key issue here is that you can set as many shadows as you want, even of the same kind (I mean both being "inset"). This way, you can get almost whatever you want. Even more, if you are using alpha in the colors.
By the way, I think you can drop -webkit-border-radius.
I have tried this css code for menu button, but its not look like the one which i wanted, can any one help me out in this.
button.menu
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
padding: 5px 0px 8px;
text-align: center;
text-shadow: 0 1px 0 #fff;
width: 45px;
float:left;
margin-left:15px;
font-family:Segoe UI Semibold, Calibri;
margin-top:-1.5px;
}
button.menu:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: black;
}
You can give your buttons an inner shadow with ccs like this:
.shadow {-moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;}
the text may have a text-shadow which is not supported by IE
.text-shadow {text-shadow: #c0c0c0 3px 3px 5px;}
to achieve the rounded edges you have to use
#example1 {-moz-border-radius: 15px;border-radius: 15px;}
Hope it helps you build your menu!
I'm trying to apply a box-shadow on all four sides. I could only get it on 2 sides:
It's because of x and y offset. Try this:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
edit (year later..): Made the answer more cross-browser, as requested in comments :)
btw: there are many css3 generator nowadays..
css3.me, css3maker, css3generator etc...
See: http://jsfiddle.net/thirtydot/cMNX2/8/
input {
-webkit-box-shadow: 0 0 5px 2px #fff;
-moz-box-shadow: 0 0 5px 2px #fff;
box-shadow: 0 0 5px 2px #fff;
}
Just simple as this code:
box-shadow: 0px 0px 2px 2px black; /*any color you want*/
This looks cool.
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
Understand box-shadow syntax and write it accordingly
box-shadow: h-offset v-offset blur spread color;
h-offset: Horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box - Required
v-offset: Vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box - Required
blur: Blur radius (The higher the number, the more blurred the shadow will be) - Optional
color: Color of the shadow - Optional
spread: Spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow - Optional
inset: Changes the shadow from an outer shadow to an inner shadow - Optional
box-shadow: 0 0 10px #999;
box-shadow works better with spread
box-shadow: 0 0 10px 8px #999;
use 'inset' to apply shadow inside of the box
box-shadow: 0 0 8px inset #999;
(or)
box-shadow: 0 0 8px 8px inset #999;
use rgba (red green blue alpha) to adjust the shadow more efficiently
box-shadow: 0 0 8px inset rgba(153, 153, 153, 0.8);
(or)
box-shadow: 0 0 8px 8px inset rgba(153, 153, 153, 0.8);
The most simple solution and easiest way is to add shadow for all four side. CSS
box-shadow: 0 0 2px 2px #ccc; /* with blur shadow*/
box-shadow: 0 0 0 2px #ccc; /* without blur shadow*/
I found the http://css-tricks.com/forums/topic/how-to-add-shadows-on-all-4-sides-of-a-block-with-css/ site.
.allSides
{
width:350px;height:200px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
box-shadow: 0px 0px 4px 4px #000;
Where:
The first 2 values are the offset-x and offset-y of the shadow
The 3rd value - blur radius
The 4th value - spread radius
Else, you can generate a box-shadow online, using CSS box shadow generator
CSS3 box-shadow: 4 sides symmetry
each side with the same color
:root{
--color: #f0f;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background: #ccc;
}
.four-sides-with-same-color {
box-shadow: 0px 0px 10px 5px var(--color);
}
<div class="four-sides-with-same-color"></div>
each side with a different color
:root{
--color1: #00ff4e;
--color2: #ff004e;
--color3: #b716e6;
--color4: #FF5722;
}
div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 50px auto;
width: 200px;
height: 100px;
background-color: rgba(255,255,0,0.7);
}
.four-sides-with-different-color {
box-shadow:
10px 0px 5px 0px var(--color1),
0px 10px 5px 0px var(--color2),
-10px 0px 5px 0px var(--color3),
0px -10px 5px 0px var(--color4);
}
<div class="four-sides-with-different-color"></div>
screenshots
refs
https://css-tricks.com/almanac/properties/b/box-shadow/
https://www.cnblogs.com/xgqfrms/p/13264347.html
Just simple as this:
box-shadow: 3px 3px 5px rgb(186 195 78), -3px -3px 5px rgb(186 195 78);
Use this css code for all four sides:
box-shadow: 0px 1px 7px 0px rgb(106, 111, 109);
You can different combinations at the following link.
https://www.cssmatic.com/box-shadow
The results which you need can be achieved by the following CSS
-webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(0,0,0,1);
Using (v1)px (v2)px (v3)px (v4)px as an example.
v1px when positive gives right side shadow whiles negative value gives left side shadow.
v2px when positive gives top side shadow whiles negative value gives bottom side shadow.
v3 is used for making the shadow blur. 10px will make shadow more blur than 5px and so on
So using a div (mydiv) with style below. We will get the image below
box-shadow:
30px 0px 5px 0px red,
0px 30px 5px 0px blue,
-30px 0px 5px 0px green,
0px -30px 5px 0px yellow;
width:200px;
height:200px;
margin-left:100px;
}
<br><br>
<div class="mydiv"></div>
This should give you the div below
view the result from this link: https://i.stack.imgur.com/bUjRN.jpg
Add this line to your box style.
box-shadow: 0 0 0 width color;
as example:
box-shadow: 0 0 0 5px yellow;
You can find more details here MDN Web Docs - Setting zero for offset and blur
Make the x and y offsets negative to apply the shadows on left and top sides of the container as well.
div { box-shadow: 1px 1px 1px 1px #BDBDBD, -1px -1px 1px 1px #BDBDBD; }
In the above code block,
1px 1px 1px 1px #BDBDBD is for adding shadows to the right and bottom sides.
-1px -1px 1px 1px #BDBDBD is for adding shadows to the top and left sides.
I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
Martti Laine
to display box-shadow in webkit browsers you have to use the following statement at the moment:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
To make it compatible with most modern browsers use this:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
This works well enough, but please note that best practice is to place the non-proprietary declaration last.
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);