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.
Related
So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.
CSS Box-Shadow adds arbitrary white border to Div
To show specifically what I want removed:
The little small white border on the left of the blue.
Here is a JSFiddle and the code:
https://jsfiddle.net/pg5omtqq/
.floating-card {
background-color: white;
border-left: 5px solid blue;
box-shadow: 0px 0px 10px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.
This will remove the shadow on the left
-webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
You can adjust this by using this generator box shadow.
source: https://www.cssmatic.com/box-shadow
Add to your CSS
box-shadow: none;
remove left box-shadow by using below css.
.floating-card{
background-color: white;
border-left: 5px solid blue;
-webkit-box-shadow: 0px 0px 10px 0px grey;
-moz-box-shadow: 0px 0px 10px 0px grey;
box-shadow: 0px 0px 10px 0px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
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;
I have this design of a table with a menu next to it: fiddle, The problem is that the corners of the #settingNev ul li a is shown on the border-right so there are little white dots and the border the is connected to the menue and the table(you can se the in the fiddle easly).
How can i do hat they wont be? i want that the ul's li background-color will stay white and will not transparent(transparent solves it)?
Also i dont want to set the left,top and bottom borders as 0px becaus ethen when its hover one li the other move
similar to musefans answer but with a fix^^
#settingNev ul li a {
display: block;
border-radius: 6px 0px 0px 6px;
color: #666;
//padding: 5px 3px;
padding: 6px 3px 6px 4px;
border: none;
border-right: 1px solid black;
//margin: 1px 0 1px 1px;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
#settingNev .active a {
border: 1px solid black;
border-right: 1px solid white;
//margin: 0;
padding: 5px 3px;
}
here is a fiddle(updated)
also you have some duplicated css in you fidle
UPDATE: use padding instead of margin this works now you can see it in my updated fiddle
Anyone know how to get around this problem? I'm doing some custom button styling. It looks fine in Firefox:
But it doesn't look right in Chrome 15.0.874.106:
The top border has some dark pixels in the center of the button. They only show up when the button gets to be at least a certain width.
Here's the CSS:
.mybutton, .mybutton:visited {
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
background-color: #ccc;
}
.mybutton:active {
top: 1px;
}
.mybutton:hover {
background-color: #aaa;
color: #fff;
}
I've searched for other mentions of this problem but so far haven't found anything. Anyone else encounter this before?
It appears to be this
border-bottom: 1px solid rgba(0,0,0,0.25);
that is causing the problem.
When I remove it, all is good... even with many words in the button.
Example: http://jsfiddle.net/kW3u4/2/
Tested on Chrome 15.0.874.106 on Windows