<div id="cat"></div>
How to box-shadow for left and right side only?
(no shadow of upper lower side)
set the z-index of woof above meow and grrrr will show up on top of hisssss's shadow.
Here's an overflow hidden approach for one side shadow http://starikovs.com/2011/11/09/css3-one-side-shadow/. Hope it will help you.
With this you can do it http://jsfiddle.net/QkXqU/
CSS:
div {
float: left;
overflow: hidden;
padding: 0px 0px 10px 0px; /* Use padding on the side where you want to show shadow. Padding amount should be same as shadows blur length. */
}
img {
-webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;
}
HTML:
<div>
<img src="http://lorempixum.com/output/nature-q-c-309-249-8.jpg" alt="trees" />
</div>
Related
I learned I can use :hover:after so I tried it myself, however it is not working:
.img-shadow img:hover:after {
-webkit-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
What are you trying to do actually here? If your aim is to use pseudo-element then you can use it to add content before and after through, ::before & ::after. Single colon for pseudo class, double colon for pseudo element. If in the above your aim is to add shadow you can add it directly, you need not use any pseudo-element for that. By using inset you can't see the shadow because it is inner side which is not visible, remove inset to see the shadow outside the image.
Hello
Dear If you use :after pseudo selector you should use
content: "";
position: absolute;
width: 100%;
height: 100%;
and its parent tag must use
position: relative;
but in your selected tag is not possible
position: relative;
in this case If you want to use
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
You should must use padding inside the element, other wise you can not see the box-shadow.
For more Help you can visit this
Demo
I can try to give you full support.
.img-shadow img {
transition: all 0.5s;
padding: 20px;
}
.img-shadow img:hover {
-webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
I'm working on a input text with image and I'm trying to position the image on the right side corner of the input text and it seems that my top positioning has different output in different browsers. So I have this HTML structure like so:
<div class="bcb-box-left-content">
<input type="text" name="skills" id="skills"/>
<img src="assets/images/plus-in-box.png" alt=""/>
<p>Maxiumum 3 skills for a guest account.</p>
</div>
And here is the style for that:
/*----the parent container-----------*/
.bcb-box-left-content
{
max-width:444px;
margin-left:17px;
position:relative;
margin-right:20px;}
/**********the anchor *********/
.bcb-box-left-content a
{
position: absolute;
bottom: 0;
right: 4px;
top:5px;
}
/**********the input text *********/
#skills {
width:100%; padding: 10px 20px 10px 10px;
}
So now is there any approach like this (but not literally the code itself):
/*in this case TOP for chrome*/
-webkit-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for mozilla*/
-moz-box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
/*in this case TOP for normal*/
box-shadow: 0px 3px 3px 0px rgba(57,72,83,1);
DEMO:
http://jsfiddle.net/leonardeveloper/Wm4ML/
Apply margin and default border property to your #skills class. It will give the same result on all the browsers as you mentioned. Update your CSS like below.
#skills
{
width:100%;
padding: 10px 0px 10px 10px;
margin:0;
border:1px solid #ccc;
}
DEMO
I have a simple div with a shadow and I was wondering how/if i can add an extra element to it. Here is the code:
h3.widget-title{
background-color:#aac955;
-webkit-box-shadow: 0px 0px 0px 37px #aed449;
-moz-box-shadow: 0px 0px 0px 37px #aed449;
box-shadow: 0px 0px 0px 37px #aed449;
color:#444; padding:5px 10px;
}
<div>
<h3 class="widget-title">Title</h3>
<p>Content</p>
</div>
Here is what I am looking for:
See the green edge. The idea is to get the h3 title and its style more to the front. Is such a thing possible through CSS?
I used the pseudo-elements :before and :after and used CSS code from this site: http://css-tricks.com/examples/ShapesOfCSS/ in order to make the hooks. Play a little and you will figure it out.
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;
}