I'm trying to design a button with orange background and rounded borders but the problem is background overflows. I cant see any problem on Chrome.
I used overflow: hidden but no help. Have any idea?
Here is the code:
display: inline-block;
padding: 8px 15px 6px;
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
Firefox
Chrome
What you probably want to use in Firefox is background-clip:
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
background-clip: padding-box;
Here's an example. Remember the background property will reset values for any of the sub-properties not specified, so put background-clip last.
If the box-shadow is not mandatory, remove it. That will fix the issue :)
Related
I'm trying to give my headings a nice embossed look. It works great in Chrome, but Firefox bows out. How can I make this effect work in both? Here's the fiddle:
https://jsfiddle.net/7p15s3nv/
And my CSS:
h1 {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
Thanks for any help.
maybe without background-clip, but a more 'classical' approach ?
h1:first-of-type {
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
h1+h1 {
color: rgba(255,255,255,0.4);
text-shadow: 0 -2px rgba(0,0,0,0.6);
}
<h1>Hello there! webkit</h1>
<h1>Hello there! FF ?</h1>
fiddle to play with https://jsfiddle.net/7p15s3nv/5/
to test side by side in chrome and any other browser such as IE or FF
Is this the desired output?
h1{
font-size: 100px;
color: rgba(255,255,255,0.4);
text-shadow: 1px 2px 3px #eee, 0 0 0 #000, 1px 2px 3px #eee;
}
<h1>This is text</h1>
UPDATE
This update is to cover the last comment from question author:
h1 {
margin-top: 0;
font-size: 200px;
color: rgba(255,0,0,0.8);
text-shadow: 1px 2px 0 #EEE, 0 0 0 #000, 1px 2px 0 #EEE;
}
<h1>This is text</h1>
While background-clip is a valid CSS3 property, the text value in non-standard. That's why it does not work in most browsers.
A trick that might work for you is a combination of semi-transparent text (with rgba) and text-shadow like this:
h1 {
color: rgba(0,0,0, 0.6);
/* #FFF should be the same as background color of the text */
text-shadow: 3px 3px 6px #fff, 0 0 0 #666, 3px 3px 6px #fff;
}
<h1>TEXT</h1>
I think that the only solution is to duplicate the text in a pseudo.
Not very easy to maintain, but it can work
In case you go with this solution, to make it easier to maintain would be to set the text in an attr in the element, and use this attr for the content of the pseudo
.demo {
font-size: 200px;
color: darkgreen;
position: relative;
}
.demo:after {
content: "Hello";
position: absolute;
left: 0px;
top: 0px;
color: transparent;
text-shadow: 0px 20px 30px rgba(255, 255, 255, 0.91);
}
<div class="demo">Hello</div>
Currently I have creating some pure CSS buttons for a few customer pages. They display fine in all browsers except IE 8/10. They do however display the styles (mostly) if the css is applied as an inline style OR if I turn on compatibility mode (which is off by default).
Here is the page: http://www.americasfinestpolice.com/patrolmens-benevolent-association-custom-watches.aspx
#btn-a-1, #btn-a-3, #btn-a-5, #btn-a-7, #btn-a-9, #btn-a-11 {
outline: none !important;
cursor: pointer !important;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
-webkit-border-radius: .5em !important;
-moz-border-radius: .5em !important;
border-radius: .5em !important;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2 !important);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
color: #FFF !important;
border: solid 1px #F61208 !important;
background: #F61205 !important;
background-color: #F61205 !important;
background: -webkit-gradient(linear, left top, left bottom, from(#F61205), to(#9F0601)) !important;
background: -moz-linear-gradient(top, #F61205, #9F0601) !important;
background-image: -ms-linear-gradient(top, #F61205 0%, #9F0601 100%) !important;
background-image: linear-gradient(to bottom right, #F61205 0%, #9F0601 100%) !important;
height: 1% !important;
width: 230px !important;
color: #FFF !important;
overflow: hidden !important;
display: block !important;
}
<div class="btn btn-1"><a href="/nycpbawatches.aspx">
<div class="btn-text btn-2">
NYC PBA Mens<br />Chronograph Watch<br />(CLICK HERE)
</div>
</a>
</div>
Please and thank you for your assistance.
I am using CSS3 pie and am calling it by attached js files just before the head tag.
For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.
Below is the css.
.linkButton {
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
-pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
padding: 10px 10px 10px 11px;
display: inline-block;
color: #ffffff;
font-weight: bold;
box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
border: 1px solid #c85400;
text-shadow: #813700 2px 2px 1px;
line-height: 12px;
margin-bottom: 7px;
width: 326px;
display: block!important;
position:relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;`enter code here`
z-index:1;
}
First of all you don't need -pie-background for plain old image + background color.
If you do want to use -pie remember that paths are relative to html not css.
(I assume that you've set up mime-type etc and pie works for you in different cases.)
.linkButton{
behavior: url(PIE.htc);
}
Also, try adding a .index file with the following content in the same location as the PIE.htc file:
more info http://css3pie.com/
http://css3pie.com/documentation/
Try linking it without dots and slash like this:
-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;
I'm using PIE for shadows, radius borders and gradients but none of these are working in IE8.
Here is an example of the code I'm using for radius and shadow.
.conflict-suggestion-body-left{
border-right:2px solid #FDFDFD;
border-bottom:2px solid #FDFDFD;
border-top:1px solid #B8B8B8;
float: left;
width: 49%;
margin-left:1px;
-moz-box-shadow: 1px 1px 2px #000;
-webkit-box-shadow: 1px 1px 2px #000;
box-shadow: 1px 1px 2px #000;
border-radius:0 0 2px 2px;
behavior: url(PIE.htc);
}
Here is an example of the code I'm using for the gradient.
.yui3-widget-hd {
background: #C9D2DD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8DA', endColorstr='#B6CAD5');
background: -webkit-gradient(linear, left top, left bottom, from(#D8D8DA), to(#B6CAD5));
background: -moz-linear-gradient(0% 100% 90deg, #B6CAD5 35%, #D8D8DA 83%, white 100%) repeat scroll 0 0 transparent;
border: 1px solid #F3FAFE;
border-radius: 0.435em 0.435em 0 0;
behavior: url(PIE.htc);
height: 33px;
margin: 0;
width: 97%;
cursor: default;
}
Thanks in advance for your assistance.
You should specify the behavior url as absolute path:
http://css3pie.com/documentation/known-issues/#relative-paths
Maybe this solves your problem.
I think its your url problem.. try this one
behavior: url(//Yoursite.com/path/to/PIE.htc);
I have problem with CSS <buttons> in Google Chrome, it shows space between <buttons>, but in Opera and IE it is OK, why?
Here is the full CSS code:
button {
border: 1px solid #bdbdbd;
text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif;
padding: 6px 8px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
cursor: pointer;
text-decoration: none;
margin-right: -1px;
}
Here is HTML code:
<div><button type="button">Send</button><button type="button">Reset</button></div>
Thanks for help.
Each set of buttons is contained within a div which has a margin-left of three (3) pixels.
EDIT Chrome also applies a default margin of one (1) pixel. You need to set the margin to zero (0) for the buttons to get rid of this spacing.
Seems to be a left margin as well. This corrects it in Chrome (not sure what it'll do in other browsers)... I edited the margin property.
button {
border: 1px solid #bdbdbd;
text-shadow: 0 1px 1px white;
font: bold 11px Sans-Serif;
padding: 6px 8px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
cursor: pointer;
text-decoration: none;
margin: 0 -1px 0 0;
}