I tried this on UX, apparently that was the wrong place and everyone who answered misunderstood the question anyways.
So, what I want is my image(s) to have a 5px WHITE (#fff) border, with the shadow falling off of the border. I've seen it somewhere, read about it, but for some reason my code isn't working. All I see is the img, and the shadow. NO border in between at all.
This is what I've got:
img {
border: 5px solid #fff;
margin: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Which looks like this:
But I want it to look like this:
It is very easy. Add padding to image with the all other properties which you have already defined
img {
border: 5px solid #fff;
margin: 5px;
padding: 5px;
position:relative;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
So, what's happening is the border is larger than the size of your shadow.
Your current shadow declaration, box-shadow: 1px 1px 1px 1px #ccc; is telling the img to display a shadow that is offset 1px to the left, offset 1px to the top, has 1px amount of blur, and a spread of 1px.
This would be fine, however, your border: 5px solid white declaration is greater than that 2px total. You need to increase the size of your shadow.
Here is an example:
img {
border: 5px solid white;
box-shadow: 1px 1px 5px #ccc;
}
<img src="http://placehold.it/200x200">
Related
How to apply shadow to rows with rounded corner in a table ?
When I apply shadow-box to rows the corners appear without radius
https://codepen.io/moonflakes/pen/eYzjOXP
table {
border-collapse: separate;
border-spacing: 0px 20px;
}
.first-td {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
}
.inner-td {
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
}
.last-td {
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
th, td {
padding: 1em;
border-bottom: 2px solid white;
}
.css-mine {
margin-top: 2em;
clear: both;
}
body {
margin: 1.5em;
}
.tr-body {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
Apply the border radius to the table rows like this, which will remove the ugly corners:
.tr-body {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
This will make all 4 corners of the row have a radius of 10px. In your example, you applied the box shadow to the table row, and therefore the shape of the shadow will be the shape of the element it is applied on, which was originally a rectangle. Applying border-radius: 10px; to the table row will change the shape of the row elements and thus also change the shape of the shadow that they produce.
Also, I can see your logic when applying the borders to the data cell elements, but the way you've done it is unnecessary, and you could simply apply border: 1px solid #d1d1d1; to the table row element or .tr-body class.
I need to draw shapes as shown here in the Fiddle page http://jsfiddle.net/wNhjb/824/ with shadow, but shadow seems around the box not around the shape.
#shape {
height: 0;
width: 200px;
border-top: 50px solid blue;
border-right: 50px solid transparent;
box-shadow: 6px 6px 3px rgb(22,73,134);
}
How can use the above code to get proper result.
You can use 'filter:drop-shadow()' instead.
#shape {
height: 0;
width: 200px;
border-top: 50px solid blue;
border-right: 50px solid transparent;
//box-shadow: 6px 6px 3px rgb(22,73,134);
filter: drop-shadow(6px 6px 3px gray);
}
updated fiddle- http://jsfiddle.net/wNhjb/826/
I want to achieve something like this:
1-pixer border around the div and a 2-pixel border for part of the side that creates the shadow effect. What is the best way to achieve this?
Why not use a box-shadow:
.content {
border: 1px solid #000;
box-shadow: 2px 2px 0 2px #ccc;
}
JS Fiddle demo.
best way to achieve this is with two div's. one with the border set to black all around
and the second div partially bordered
like so
DEMO
inner div: border:solid 1px #000;
outer div: border:solid 5px #BBB; border-top:none; border-left:none;
for compatibility sake box-shadow will not work in older browsers
Here's how I'd do it.
div{
border: 1px solid #000;
-moz-box-shadow: 2px 2px 0 0 #000;
-webkit-box-shadow: 2px 2px 0 0 #000;
box-shadow: 2px 2px 0 0 #000;
}
That allows you to have a border you're looking for and the box shadow going down and right.
JS Fiddle
Assuming I understood correctly, try:
.content {
border: 1px solid black; /* The border around the div. */
border-right: 2px solid black; /* The borders where the shadow comes from. */
border-bottom: 2px solid-black;
/* and now the shadow */
-moz-box-shadow: 2px 2px 0 0 #000;
-webkit-box-shadow: 2px 2px 0 0 #000;
box-shadow: 2px 2px 0 0 #000;
}
when you reduce the browser window u will see a different layout for iphone
I see an extra black line below the slider...
how to remove the black line....
i removed the border property but its not getting removed....
providing my code below....
http://jsfiddle.net/CAARt/1/
#slider li div {
border-radius: 4px;
border-top: 1px #fff solid;
background: #F7F9FA;
-webkit-box-shadow: 0px 1px 2px #0D0F11;
-moz-box-shadow: 0px 1px 2px #0D0F11;
box-shadow: 0px 1px 2px #0D0F11;
color: #DDE1E4;
font-size: 12px;
text-align: center;
text-shadow: 0 1px 0 #fff;
color: #A4AEB7;
}
When the window size is reduced, the border that you are seeing is caused by this
#gallery nav {
border-top:1px solid #3A4146;
}
Change that border to 0px or none and it will go away.
I want to set a different color / style / width to each side of the CSS border.
Is there a short-hand for that?
You have to declare each single border:
.my-box {
border-top: 1px solid red;
border-left: 3px dashed black;
border-right: 2px dotted violet;
border-bottom: 1px solid #cccccc;
}
If you want you can override just the borders with the different style:
.my-box {
border: 1px solid red;
border-right: 2px dotted violet;
}
The closest you can get is doing this:
selector
{
border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: #f00 #0f0 #00f #f0f
}
Although if you've got a mostly uniform border with one side different, for example, I'd go with daveoncode's answer.
No, the shortcut is just for one border. There is no way you can fit width, style and color in one shortcut for all borders if those borders differ. Would be nice to have something like
border: 1px solid Red, 2px solid Green, 2px solid darkgeen, 1px solid Pink;
but it's not the case. For the example above you will have to do something like:
border: 1px solid Red;
border-right: 2px solid Green;
border-bottom: 2px solid darkgreen;
border-left-color: Pink;