I would like to put a shadow on the header image but it didn't work.
URL: http://testjeanschwartz.weebly.com/
I already try something like this:
.wsite-background
{
box-shadow: 0px 10px 5px #888888;
}
Putting a shadow is something I already did a lot of times but this one is not working.
Thanks.
Your box-shadow is covered by the elements that follow it (namely #main-wrap). You can change the z-index of your element to have it show 'above' other elements.
You will need to position your element something other than static for the z-index to be acknowledged:
.wsite-background {
box-shadow: 0px 10px 5px #888888;
position: relative;
z-index: 1;
}
For background image, you need inset property to handle it with the position relative or absolute.
Try this one:
.wsite-background{
position:relative;
-webkit-box-shadow: inset 0px 10px 5px #888888;
-moz-box-shadow: inset 0px 10px 5px #888888;
box-shadow: inset 0px 10px 5px #888888;
}
Related
I want to give my custom border style to all the Webparts available in sharepoint. So that i have added the following class.
.s4-wpcell-plain
{
border:1px solid #d8d8d8;
}
It is applying almost all the webparts. But the problem is it is adding border unnecessarily other places also. Like when search using E-Search page all the results are coming with the borders. It is applying for sharepoint Blog page also.
How can I get rid of those unnecessary borders? or Which CSS I need to apply so that it will only apply for the webparts.
Try applying your border to the following class instead:
.ms-webpartzone-cell {
border: 1px solid #D8D8D8;
}
Okay so I was messing with this as well. The only way it worked for me was to apply the code to the following
.s4-wpcell {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.ms-webpart-chrome {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
.s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
So this will apply it to all web parts (I was using a wiki page so "hidden" parts also had this applied and suddenly appeared). To only apply this style to specific web parts add the .MSOZoneCell_WebPartWPQ# in front of the class.
#MSOZoneCell_WebPartWPQ2 .s4-wpcell,
#MSOZoneCell_WebPartWPQ2 .ms-webpart-chrome,
#MSOZoneCell_WebPartWPQ2 .s4-wpActive {
display: block !important;
-moz-box-shadow: 5px 5px 5px gray !important;
-webkit-box-shadow: 5px 5px 5px gray !important;
box-shadow: 5px 5px 5px gray !important;}
Hope this helps.
I use css3 in my web projects but i don't know how to set a inset little shadow on the top of the box ? I tried to set this following code for ex :
box-shadow:inset 0px 0px 10px #fff
Thanks
How about something like this:
box-shadow: inset 0px 10px 10px -2px #FFF;
JSFiddle
Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.
This question already has answers here:
Creating a CSS3 box-shadow on all sides but one
(10 answers)
Closed 3 years ago.
I want to have box-shadow on three sides of a div (except top side). How could I do that?
Here's a JS Fiddle for you, it only uses one single div to work.
#shadowBox {
background-color: #ddd;
margin: 0px auto;
padding: 10px;
width: 220px;
box-shadow: 0px 8px 10px gray,
-10px 8px 15px gray, 10px 8px 15px gray;
}
You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.
If you are looking for something like Google material design shadows:
.shadow1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
Source: https://medium.com/#Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10
Here's an example of the negative Y value suggested by #Vigrond
box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15);
I like #Chris C answer but I think, we do not need the first line of code. This is shorter and gives the same effect:
box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
10px 8px 15px lightgray; /*right and bottom*/
#note{
position: absolute;
top: 20px; left: 30px;
width:100px; height: 100px;
background-color: #eee;
box-shadow: -10px 8px 15px lightgray,
10px 8px 15px lightgray;
}
<div id="note"></div>
If you have a solid background color, then you can accomplish this by using a combination of background-color and z-index. The trick is to give the element with box-shadow and its previous sibling positioning, then give the previous sibling a background color and set it to have a higher z-index so that it's stacked on top of the element with box-shadow, in effect covering its top shadow.
You can see a demo here: http://codepen.io/thdoan/pen/vNvpKv
If there's no immediate previous sibling to work with, then you can also use a pseudo-element such as :before or :after: http://codepen.io/thdoan/pen/ojJEMj
For translucent shadows with hard corners (i.e. no blur radius) I used this:
.shadow-no-top {
position: relative;
box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
content: "";
position: absolute;
top: 100%;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0,0,0,.2);
}
This uses a shadow for the left and right parts and adds the :after pseudo content as the bottom shadow. This avoids overlaps which make the shadow darker or missing corners.
However, this does require the background of the element to be solid.
I have an button just as have Ask Question on SO and here is the CSS for it:
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}
Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.
Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.
Hope I have made my question clear. Any guidance would be highly appreciated.
Thanks.
The box-shadow property is not yet widely supported, but can be implemented like:
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Not sure what you're asking about the label/box?
Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/
You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.
For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?
EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}
EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}