I'm pretty new to css, so please go easy on me :-)
I am trying to flip the gradient on a button when it's hovered on, but the hover function is not working when I test.
<head>
<style type="text/css">
.button_new{
border:1px solid #fab32f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:12px;
font-family: arial, helvetica, sans-serif;
padding: 0px 8px;
text-decoration: none;
display: inline-block;
color: #a60201;
-webkit-font-smoothing: antialiased;
background-color: #fab32f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030);
background-image: -webkit-linear-gradient(top, #fccd78, #f8b030);
background-image: -moz-linear-gradient(top, #fccd78, #f8b030);
background-image: -ms-linear-gradient(top, #fccd78, #f8b030);
background-image: -o-linear-gradient(top, #fccd78, #f8b030);
background-image: linear-gradient(to bottom, #fccd78, #f8b030);
}
.button_new:hover{
border: 1px solid #ffa700;
background-color: #ffa700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78));
background-image: -webkit-linear-gradient(top, #f8b030, #fccd78);
background-image: -moz-linear-gradient(top, #f8b030, #fccd78);
background-image: -ms-linear-gradient(top, #f8b030, #fccd78);
background-image: -o-linear-gradient(top, #f8b030, #fccd78);
background-image: linear-gradient(to bottom, #f8b030, #fccd78);
}
</style></head>
<body>
<a class="button_new" href="#">Posters <span style="color:#fff; font-weight:bold; font-size:14px;">></span></a>
</body>
Thanks in advance for your help!
Your syntax for -webkit-gradient is incorrect. Remove these two lines and it works :
background-image: -webkit-gradient(linear, left top, left bottom, from(#fccd78), to(#f8b030);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f8b030), to(#fccd78));
Demonstration
update your css with this:
.button_new{
border:1px solid #fab32f;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:12px;
font-family: arial, helvetica, sans-serif;
padding: 0px 8px;
text-decoration: none;
display: inline-block;
color: #a60201;
-webkit-font-smoothing: antialiased;
background: #fccd78; /* Old browsers */
background: -moz-linear-gradient(top, #fccd78 0%, #f8b030 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fccd78), color-stop(100%,#f8b030)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fccd78 0%,#f8b030 100%); /* IE10+ */
background: linear-gradient(to bottom, #fccd78 0%,#f8b030 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fccd78', endColorstr='#f8b030',GradientType=0 ); /* IE6-9 */}
.button_new:hover {
background: #f8b030; /* Old browsers */
background: -moz-linear-gradient(top, #f8b030 0%, #fccd78 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b030), color- stop(100%,#fccd78)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8b030 0%,#fccd78 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8b030 0%,#fccd78 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b030', endColorstr='#fccd78',GradientType=0 ); /* IE6-9 */
}
Related
I'm having a border transition on a focus. When I focus the input field, I want the border to change color. This works.
What I don't want is to let the border load when the page load, which it does now. Why is it doing this?
<input type="stad" name="stad" value=""/>
input {
border: 7px #227a7b solid;
height: 20px;
width: 200px;
background: #1a5a78;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1a5a78), color-stop(100%, #11c7b8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #1a5a78 0%, #11c7b8 100%);
/* IE10+ */
background: linear-gradient(135deg, #1a5a78 0%, #11c7b8 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5a78', endColorstr='#11c7b8',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
padding: 5px;
margin-top: -50px;
transition: 1s border;
}
input:focus {
outline: none;
border: green 7px solid;
}
I'm not sure why this downdown menu won't show up in IE. Can anyone see what the problem is? It works in all the other browsers, just not IE. I know gradients in IE take a lot of thought. Here is my code.
.menu {
border: 1px solid #ccc;
background: #006699; /* Old browsers */
background: -moz-linear-gradient(top, #006699 0%, #1f416b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(100%,#1f416b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #006699 0%,#1f416b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #006699 0%,#1f416b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #006699 0%,#1f416b 100%); /* IE10+ */
background: linear-gradient(to bottom, #006699 0%,#1f416b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#1f416b'); /* IE6-9 */
}
.menu li a {
padding: 15px 45px;
text-decoration: none;
font-size: 0.9em;
color: #fff;
font-family: Arial, sans-serif;
}
.menu li.current > a,
.menu li.current > a:hover,
.menu li.current.hover > a {
background: rgb(70,168,217); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
color: #fff;
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
cursor: default;
}
.menu li a:hover,
.menu li.hover > a {
background: #b32416; /* Old browsers */
background: -moz-linear-gradient(top, #b32416 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b32416), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b32416 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #b32416 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b32416', endColorstr='#6d0019'); /* IE6-9 */
}
Which IE version?
I know that you need something like this in the head of your html page. Has to do with SVG or something. Conditional Formatting.
<!-- following class is conditional for IE9 and must be put in elements for css gradient to work -->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Then apply this gradient class to elements using the gradients.
http://www.colorzilla.com/gradient-editor/
EDIT
OK. Did a little research and found that the filter should have an 8 digit hex code where the first two are the opacity. I think FF for 100% and 00 for 0%. Also, use double quotes ". Might make a difference.
So do something like this:
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr="#ff7abcff",endColorstr="#ff4096ee",GradientType=0);
I would like to create this shape using just css. I am pretty sure this can be done. But i am having trouble with gradients involved.
This shape will contain some text inside. Suggested html markup is:
<div class="container">
... more html contents...
</div>
A jsFiddle would be highly appreciated.
Thanks in advance.
Try this, http://jsfiddle.net/HshfF/1/
CSS: (From the fiddle in this comment)
.main {
background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */
position: relative;
width: 150px;
height: 100px;
margin: 10px;
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 20px;
}
.main:before {
content: '';
display: block;
top: -1px;
right: -1px;
width: 20px;
height: 20px;
background: -moz-linear-gradient(top, #ffffff 0%, #e8e8e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e8e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e8e8e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e8e8e8 100%); /* W3C */
position: absolute;
border-radius: 0 0 0 5px;
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
.main:after {
content: '';
display: block;
position: absolute;
top: -1px;
right: -1px;
border-top: 20px solid #fff;
border-left: 20px solid transparent;
}
Please Learn CSS3, Try Nicholas Gallagher tutorials, he has some of the best css3 tutorials:
one you looking for http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
The drop shadow and colors you looking for i think you need to do it yourself.
Nearly there with this: http://jsfiddle.net/Grezzo/52zG7/
You only need one div (thanks to pseudo element), but I haven't "cut" the corner yet.
I am trying to get The degree of color of the box in the picture
http://i46.tinypic.com/iefcpl.png
i like the box in the picture and i want make similar one
This is my code, and i can't make similarty
<style>
.b{
background:-moz-linear-gradient(top, #fff, #ebebeb);
height:25px;
border:1px #efefef solid;
}
</style>
<div class="b">
</div>
.b{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
height:25px;
border:1px #DDDDDD solid;
}
I used Ultimate CSS Gradient Generator to generate the gradient for all browsers.
DEMO
I've got a link that I want to make look like a button with round corners and a gradient fill. It works fine in Chrome, but not in IE.
I've found that if I set display: inline-block, it shows the gradient, but removes the rounded corners. Does anybody know how to get around this issue in IE?
Demo in JSFiddle
HTML:
Hello World
CSS:
a {
color: white;
padding: 8px;
background: #7db9e8;
background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
background: -moz-linear-gradient(top, #7db9e8, #1e5799);
background: -ms-linear-gradient(top, #7db9e8, #1e5799);
background: -o-linear-gradient(top, #7db9e8, #1e5799);
background: linear-gradient(top, #7db9e8, #1e5799);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0);
zoom: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
I know this question is quite old, however since it is unaswered and if this can help people, here is my solution to get a linear Gradient working in all mayor Browsers:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #BDBDBD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BDBDBD 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #BDBDBD 100%);
There is also an onlie tool to create this CSS gradients, chek it here:
http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
You need to use the Microsoft filter:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#7db9e8', endColorstr='#1e5799');
Use that as a fallback for IE--it works in most versions.
See the specifications:
http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
Instead of using a filter, you can always fallback with an image:
a {
color: white;
padding: 8px;
background: #7db9e8;
background: transparent url('gradient.png') 0 0 repeat;
background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
background: -webkit-linear-gradient(top, #7db9e8, #1e5799);
background: -moz-linear-gradient(top, #7db9e8, #1e5799);
background: -ms-linear-gradient(top, #7db9e8, #1e5799);
background: -o-linear-gradient(top, #7db9e8, #1e5799);
background: linear-gradient(top, #7db9e8, #1e5799);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}