I've got a div with border radius, background gradient, and background image working in FireFox, but not in IE8 or IE10. Gradient and background image work in IE8, but when I apply the border radius, the border disappears.
.add-to-carttest {
border: 1px solid #004f9e;
padding: 5px 5px 5px 50px;
width:100px;
height: 40px;
font-weight:bold;
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -webkit-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -ms-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, -o-linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
background: url(https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png) no-repeat, linear-gradient(#e1f0ff, #73b9ff);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(../../Graphics/PIE/PIE.htc);
position:relative;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e1f0ff", endColorstr="#73b9ff",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png");}
border-radius is not available in IE8
http://www.quirksmode.org/css/backgrounds-borders/
oops - just noticed your behavior entry...may want to double check your path
Ok here is what I've come up with:
CSS:
.common
{
width: 100px;
height: 40px;
border: 1px solid #004f9e;
padding: 5px 5px 5px 50px;
margin: 0px;
font-weight: bold;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
!behavior: url(../../Graphics/PIE/PIE.htc);
position: relative;
border-collapse:collapse;
}
.add-to-carttest
{
background-image: url('https://www.storesmart.com/mm5/graphics/00000001/add-to-cart-plus.png');
background-position:20px 20px;
background-repeat:no-repeat;
background-attachment:fixed;
top:-6px;
left:-51px;
}
.gradient
{
background: -moz-linear-gradient(#e1f0ff, #73b9ff);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e1f0ff), to(#73b9ff));
background: -webkit-linear-gradient(#e1f0ff, #73b9ff);
background: -ms-linear-gradient(#e1f0ff, #73b9ff);
background: -o-linear-gradient(#e1f0ff, #73b9ff);
background: linear-gradient( #e1f0ff, #73b9ff);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 );
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1f0ff', endColorstr='#73b9ff',GradientType=0 )";
}
HTML:
<div class="common gradient">
<div class="common add-to-carttest"></div>
</div>
It seems the gradient filter in IE8 overrides and hides or repositions the background image because it seems the gradient itself is rendered as an image. So I broke apart the css and nested the divs. Then repositioned the inner div to overlay the outer. That seems to work, not elegant, but compatible.
Also, positioning via "bottom left" syntax only seems to work in newer browsers so I positioned the background image by pixel position
Hope this helps
Related
Edit : added Codepen
I have a small issue with my css, there us a weird space between border-image and linear background on the top and the left of a button. Could you help me to remove it please? Thank you for your help.
Here is the codepen. The problem is on the button "text". I seems like the problem appears only on certain levels of zoom on Chrome : https://codepen.io/zamehan/pen/ZMXWeg
Here is the associated css, the button has the class .special-button :
.special-button{
background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
color:#616060;
border: 1px solid transparent;
border-image: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}
.color-button {
font-family: "Noxa";
flex: 1 100%;
margin: 6px;
font-weight: 700;
letter-spacing: 0.8px;
}
button {
color:white;
border: none;
text-align: center;
text-decoration: none;
padding: 6px 11px;
font-size: 12px;
margin: 4px 5px;
background-position: center;
cursor: pointer;
&[data-color="dark"] {
$color: #616060;
color: $color !important;
&[data-selected="true"] {
color: lighten($color, 10%) !important;
}
}
border: 1px solid transparent;
}
I ran into this problem too, and found the following article:
https://css-tricks.com/the-backgound-clip-property-and-use-cases/
I set the background-clip property of the element with the linear-gradient to "padding-box" and the line/space went away.
I need to create a button like the one below, but it's proving exceedingly difficult to get that border effect without the use of images:
.
Specifically, the border effects I've seen never have a bevel effect - it's almost as though I need two borders. The colors, shape, and other aspects of the button are not the problem here.
Here's what I have so far, which is pretty close:
button {
border: 1px solid gray;
border-radius: 4px;
text-align: center;
display: inline-block;
padding: 5px 10px;
background: linear-gradient(to bottom, #f9fcff 0%,#93a0c6 100%);
}
<button>OK</button>
You can achieve this effect with one element, using a background: linear-gradient, double border and border-radius.
To apply the background even to the transparent middle part of the border, increase the size of the background (i.e. 140%) and adjust its position.
button {
background: linear-gradient(to bottom, #fff 0%, #8ab 100%);
background-size: 140%;
background-position: 0 50%;
border: 4px double #23538a;
border-radius: 6px;
padding: 5px 8px;
color: #23538a;
}
<button>OK</button>
This will get you close. Use a combination of box-shadow, padding, and 'border-radius`:
.btn-container {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 4px 6px #cde inset;
}
.btn {
display:inline-block;
border: solid 1px #224488;
border-radius: 4px;
padding: 2px;
background:#acd;
box-shadow:0px 5px 10px #e0f0ff inset;
}
<div>
<span class='btn-container'>
<span class='btn'>Click here!</span>
</span>
</div>
Fiddle: https://jsfiddle.net/oqqpccmf/
Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.
You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />
Okay first the code..
<td class="btnSaveBooking">
<div class="btnSaveBookingContainder">
<div id="save">
<span class="btnImage"></span><span class="btnsavebookingspan">
<input type="submit" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" id="btnSaveBooking" value="" name="btnSaveBooking">
(F8)</span></div>
</div>![enter image description here][1]
</td>
The images
Normal
OnMouseOver at the button
OnMouseOver at the imaage
As you can see, when user hovers exactly over the image, then only is the background of image changing, what I want is, when user even hovers over this button, the image should change.
Here's the css
.btnSaveBooking {
border-top: 1px solid #7abbde;
background: #1776a6;
background: -webkit-gradient(linear, left top, left bottom, from(#7ec5e8), to(#1776a6));
background: -webkit-linear-gradient(top, #7ec5e8, #1776a6);
background: -moz-linear-gradient(top, #7ec5e8, #1776a6);
background: -ms-linear-gradient(top, #7ec5e8, #1776a6);
background: -o-linear-gradient(top, #7ec5e8, #1776a6);
padding: 2px 20px 3px 4px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #f7f7f7;
font-size: 17px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.btnSaveBooking:hover {
border-top-color: #000000;
background: #7288c9;
color: #ffffff;
}
.btnSaveBooking:active {
border-top-color: #3c637d;
background: #3c637d;
}
#save .btnImage
{
background: url("../images/save.png") no-repeat scroll 2px 5px transparent !important;
border-color: transparent !important;
height: 24px;
position: relative;
width: 28px;
margin: 1px 1px 1px 10px;
padding: 4px 2px 0 20px;
}
#save .btnImage:hover
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor: pointer;
}
You just need to change where the text ':hover' appears in your rule. As it stands, the img itself needs to be hovered. Change the rule so that when it's parent is hovered it changes.
I.e
#save .btnImage:hover
becomes
.btnSaveBooking:hover .btnSaveBookingContainder .btnImage
This way, the image changes as the button's background does. The answer already given gives you a 'two-stage' approach to the change.
Please try this:
.btnSaveBookingContainder:hover .btnImage
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor:pointer;
width:28px;
height:31px;
}
remove the #save .btnImage:hover css from your existing css, and try with the following style format,
.btnSaveBooking:hover{
/* over border, background & text color */
}
.btnSaveBooking:active
{
/* active border, background & text color */
}
.btnSaveBooking:hover #save .btnImage{
/* provide your hover image style */
}
.btnSaveBooking:active #save .btnImage{
/* provide your active image style */
}
I wish do a rectangle in CSS with graceful degradation to work in IE8+. And work fine in Chrome, Firefox and Safari browsers.
Supposed HTML Tag:
<span class="tag tag-gray">FRETE GRÁTIS</span>
See sample:
http://imageshack.us/photo/my-images/850/roundcutcorner.png/
Thank's
Pure CSS Solution
Here's the jsFiddle example with comparison to original image and the CSS:
span.tag {
margin:4px 5px;
position:relative;
border-radius:5px;
background:red;
display:inline-block;
padding:.6em 4.5em;
text-align:center;
}
span.tag-gray {
background: #7c7d80; /* Old browsers */
background: -moz-linear-gradient(top, #7c7d80 0%, #7c7d80 50%, #66686b 51%, #66686b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c7d80), color-stop(50%,#7c7d80), color-stop(51%,#66686b), color-stop(100%,#66686b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* IE10+ */
background: linear-gradient(top, #7c7d80 0%,#7c7d80 50%,#66686b 51%,#66686b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7d80', endColorstr='#66686b',GradientType=0 ); /* IE6-9 */
color:#fff;
font-family:sans-serif;
font-size:.7em;
font-weight:bold;
}
span.tag:after {
/* right, height, and width should equal eachother */
right:-18px;
height:18px;
width:18px;
content:".";
display:block;
position:absolute;
top:0;
font-size:0;
overflow:hidden;
background:#fff;
-moz-transform-origin:0 0;
-moz-transform:rotate(-45deg) translate(-50%, -50%);
-webkit-transform-origin:0 0;
-webkit-transform:rotate(-45deg) translate(-50%, -50%);
transform-origin:0 0;
transform:rotate(-45deg) translate(-50%, -50%);
}
Assuming the HTML is:
<span class="tag tag-gray">FRETE GRÁTIS</span>
Gotchas
To get it to work with older (and other) browsers, you may want to add the prefixed versions of border-radius
To get it to work in non-webkit/moz browsers, simply add the corresponding prefixed versions of transform and transform-origin
The "cut" cannot be transparent, but you can make it appear to be by setting it to the same color(s) as the background
Due to using border-radius, you cannot set div.cut's overflow to hidden as the div's background will bleed through along the outer edge of the radius, so you have to make sure you have enough room outside of the element to avoid covering other elements/text. A workaround is to set the background to a gradient and have the outer edge be transparent (aka right side)
a funny but probably not the best solution is to cover your image with triangle div using position-absolute and z-index :). To round your corners you can use border-radius (but it will not work in IE8 unless you add js to support css3 properties)
Is this fiddle something similar to what you need?
Here is the code for it
`.tag.tag-gray {
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 300px;
-moz-border-radius: 5px;
-moz-border-radius-topright: 300px;
border-radius: 5px;
border-top-right-radius: 300px;
}`
Try this:
<div class="rounded">FRETE GRÁTIS<div class="tri"></div></div>
CSS:
.tri {
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 20px solid transparent;
border-right:20px solid #ffffff;
position:absolute;
top:0px;
right:0px;
}
.rounded {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 6px 20px;
background: -moz-linear-gradient(
top,
#c0c0c0 0%,
#333333);
background: -webkit-gradient(
linear, left top, left bottom,
from(#c0c0c0),
to(#333333));
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px solid #000000;
width:120px;
position:relative;
}
And for IE8, I'd use CSS3 PIE
If you're okay with using one image, you could make a simple white triangle image with a transparent background (PNG 24), then do something like this:
.tag-grey {
background: grey url(triangle.png) no-repeat right top;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
It's not pure css, but it uses a standard CSS method. The upshot is that this will work in IE7 and up, just without the other rounded corners.