I have a menu header. The drop shadow effects of it as present in the adobe photoshop are:
Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829
I am trying to use the above code in my CSS for my menu header (adove) but unfortunately for some reasons I am unable to replicate it. The code which I am using for the menu header are:
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
Try this and adjust the pixel values if necessary. The 4th value is the blur size, the 3rd value is the size of the spread. The 1st and 2nd values adjust the X and Y offsets of the dropshadow.
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
Related
everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
I am creating a full width website. The website appears full width on my computer but when I check it on other computers, the website appears to have free space on both left and right.
How can I make this website full width?
.wrapper_boxed {
width: 1000px;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
One solution that I have read is I redevelop using percentage width.
Just change your main container :-
.wrapper_boxed {
width: 100%;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
You will probably need to go through the elements within wrapper boxed to change any width pixel values to percentages.
Percentage is definitely the easiest way, if you post some code we can look at uaing what you have and extending divs to keep the design and essentially stretch the sides. However anyone would just use:
width: 100%;
I'm new to shadow in css can we set shadows for
round image(i mean to a circle image).
if it is possible, please give me a code for this in css.
thanks in advance
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency).
You could make a circle with CSS3 and give a shadow, see this jsFiddle.
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle.
You can use the following code for that, it should work fine
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
UPDATE:
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.
There is great tutorial for box-shadowing with examples here
Also, simple css3 for rounding corners in cross browser
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
This thing worked for me. I wanted a rounded shadow around the image 32x32.
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
Easy peasy! Set border-radius: 50%; on your image element.
It rounds your image tag and it's drop-shadow.
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...)
Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div
.topDiv{
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
border-radius:50%;
}
this will do the work.
so this is driving me crazy. I have two divs, floated left, the bottom one has a drop shadow box shadow, in this JS fiddle http://jsfiddle.net/q79Lg/ the shadow renders correctly, it covers the content, but when I copy literally the exact same thing to a page http://www.klossal.com/portfolio/index_backup2.html the shadow doesn't cover the content in the div above. Why is this happening??
Ultimately I'd like to use it here http://www.klossal.com/portfolio/index_backup5.html but it's just the same issue as listed in the first two sources, but I've taken all the other garbage out.
Thanks so much for helping me.
Try
<div align="center" style="background: #ffffff; position: absolute; bottom: 0px; left: 0px; z-index: 5; border:1px solid red; -webkit-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); width:100%;height:200px;">
for the botttom div, see if that works :)
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;