I have a loading Image (while page loading) which was surrounded by box like shadow as like this:
I want this Image to show as like this:
This is the code I tried to fix
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
background-color:transparent;
}
Can some one help to fix this?
For example you have .selector and .selector.noshadow class
.selector {
-webkit-box-shadow: 0 3px 5px #333;
-moz-box-shadow: 0 3px 5px #333;
box-shadow: 0 3px 5px #333;
}
.selector.noshadow {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Related
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've successfully configured the featured-top and footer elements of my CSS so that they are displaying correctly. My only problem is that I can't get rid of the white line between the two elements. When I use Google Chrome to Inspect Element I don't so where this could be occurring?
.agentpress-gray .featured-top.featured-top {
-moz-box-shadow: 0 1px 3px #666;
-webkit-box-shadow: 0 1px 3px #666;
background-color: #ddd;
box-shadow: 0 1px 3px #666;
clear: both;
margin: 0 auto 20px;
overflow: hidden;
padding: 20px;
width: 920px;
}
AND footer element:
.agentpress-gray #footer {
background-color:#000;
}
Try this:
.featured-top {
margin-bottom: 0;
}
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.
Basically, I need to make a header, styled like this:
Is there a full css way, or do I need to use background-images?
Yes, you can do it using only CSS, but it's not easy and the result is... well, ugly.
You might want to check this as well: CSS for inverted curved tabs
EDIT: I got a better idea today, check this http://dabblet.com/gist/2762234
The CSS is as follows:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
It can be made to look prettier, but that would require a fixed width for the heading and a pseudo-element on the div.
You can probably achieve this by using a couple of elements stacked over eachother.
I don't think that is something you would want for production, so my advice would be to go for the background image.
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