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.
Related
Suppose I've a table where columns are separated from each other by the use of a left white border:
td, th {
&:not(:first-child) {
border-left: 10px solid #fff;
font-family: monospace;
}
}
It looks the following:
Looks pretty nice. And now I need to separate all rows from the summary row by the use of a dark line:
tbody {
tr {
&:last-child {
background: #EAF0F6;
border-top: 1px solid #000;
}
}
}
I get the following picture:
The separating border becomes dotted, how to fix that?
http://jsfiddle.net/m1a530td/40/
You can use padding with a inner box-shadow instead of a border to get the white space between columns and a border without gaps (demo):
td, th {
&:not(:first-child) {
padding-left: calc(10px + 1em);
-webkit-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
box-shadow: inset 10px 0px 0px 0px rgba(255,255,255,1);
font-family: monospace;
}
}
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 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">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wondering if it is possible to create button looks like this:
With CSS only (no additional images).
What do you think?
Yes, it is possible using box-shadow. The example uses an anchor (a) tag but can very easily be adapted to a button also.
a {
background: beige;
border-radius: 4px;
text-decoration: none;
display: block;
padding: 4px;
width: 100px;
text-align: center;
color: black;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
}
<a href='#'>Text hover</a>
Applying on button element: (Note to use border: 0px as buttons have a default border).
.shape {
background: beige;
border-radius: 4px;
padding: 4px;
width: 100px;
text-align: center;
-webkit-box-shadow: 0px 3px 1px maroon;
-moz-box-shadow: 0px 3px 1px maroon;
box-shadow: 0px 3px 1px maroon;
border: 0px;
}
<button class='shape'>Text hover</button>
Not sure why everyone is suggesting to use box-shadow, you can do this with border-radius and a bottom border alone:
body {
background: #000;
}
button {
background: #B6B694; /* Guesswork, you can find the actual colour yourself. */
border: none;
border-bottom: 2px solid #f00;
border-radius: 5px;
display: inline-block;
font-size: 14px;
padding: 10px 14px;
text-align: left;
width: 150px;
}
<button>Text hover</button>
You should post the code what tried so far. Any way try this one.
body {
background-color: #333;
text-align: center;
padding-top: 20px;
}
button {
background: beige;
border-radius: 3px;
box-shadow: 0px 5px 0px maroon;
border: 0;
color: #333;
font-size: 17px;
padding: 10px 30px;
display: inline-block;
outline: 0;
}
button:hover {
background: #eaeab4;
box-shadow: 0px 5px 0px #4d0000;
}
button:active {
box-shadow: none;
margin-top: 5px;
}
<button type="button">Text hover</button>
From http://www.css3.info/preview/box-shadow/:
Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}
Example R shows the same shadow with a blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}
.example {
moz-border-radius:20px;
webkit-border-radius:20px;
border-radius:20px;
}
You want to make sure the radius works in every browser so use this code make the radius to work in all browsers.
try it your own
border-radius:20px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
When hovering on a nav list item (arranged horizontally) that gets larger and gets a margin to create a gap between it and the other list items adjacent to it how do you make it that the hovered item stays centered to its pre-hover location while the adjacent items spread away, to the left and right? Below is the code I have so far (you can also check it out on CodePen).
Thanks,
TJ
#nav {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 15px;
right: 15%;
font-weight: bold;
}
#nav:hover {
}
#nav li {
float: left;
padding: 5px 10px;
text-align: center;
}
li:first-child {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 4px solid white;
}
li:nth-child(2) {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
li:nth-child(3) {
border-top: 4px solid white;
border-right: 2px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
li:nth-child(4) {
border-top: 4px solid white;
border-right: 4px solid white;
border-bottom: 4px solid white;
border-left: 2px solid white;
}
#nav li:hover {
box-shadow:
2px 2px 6px rgba(0, 0, 0, 0.2),
-2px -2px 6px rgba(0, 0, 0, 0.2),
-2px 2px 6px rgba(0, 0, 0, 0.2),
2px -2px 6px rgba(0, 0, 0, 0.2);
z-index: 5;
text-align: center;
background-color: white;
color: black;
border: 4px solid rgba(0, 0, 0, 0.2);
font-size: 1.2em;
margin: 0 10px;
}
I have done it using only CSS. So the key is to use:
display: inline;
on the li, and to wrap the ul in a div that will allow you to:
text-align: center;
Now that it is centered it will grow from the center. I made the changes here - http://codepen.io/anon/pen/uIdsr
Took a bit of manipulating, but here's the code that will do this for you: http://codepen.io/anon/pen/cIEno. Please note, this requires jQuery, as you need to move the other elements to keep the hovered one centered.