So i'm creating a navbar (with Twitter Bootstrap) and pick a color for it, and set it to slightly different color when certain element are hovered. but the problem is, the transition doesn't seem to work on chrome, it's working on IE and Firefox so far. any ideas? here's the css transition code (i put it in the normal state, not on :hover):
-webkit-transition: All .50s ease-out;
-moz-transition: All .50s ease-out;
-o-transition: All .50s ease-out;
-ms-transition: All .50s ease-out;
transition: All .50s ease-out;
the color css is like this, if somehow needed:
background-color: hsl(0, 86%, 24%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1b1b", endColorstr="#710808");
background-image: -khtml-gradient(linear, left top, left bottom, from(#ed1b1b), to(#710808));
background-image: -moz-linear-gradient(top, #ed1b1b, #710808);
background-image: -ms-linear-gradient(top, #ed1b1b, #710808);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed1b1b), color-stop(100%, #710808));
background-image: -webkit-linear-gradient(top, #ed1b1b, #710808);
background-image: -o-linear-gradient(top, #ed1b1b, #710808);
background-image: linear-gradient(#ed1b1b, #710808);
border-color: #710808 #710808 hsl(0, 86%, 17%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.46);
Related
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 4 years ago.
Good morning:
I have several problems with CSS transition command in a button. I am trying to do a background color change with a transition effect, and surprisely it only works in Internet Explorer, and it doesn't work in Firefox, Chrome or Opera, I don't know why.
My code:
#button_example{
background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#button_example:hover {
background: -webkit-linear-gradient(#FFFFFF, #0CA5E2); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#FFFFFF, #0CA5E2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, #0CA5E2); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, #0CA5E2); /* Standard syntax */
background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
}
<button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>
I don't know how to do, I have view all tutorials, but none of them fix my problem. Any solution please?
Thanks.
#button_example{
background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
display: block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
}
#button_example::after{
content: "";
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* Standard syntax */
background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index:1;
}
#button_example:hover::after{
opacity: 1;
}
#button_example span{
position: relative;
z-index:2;
}
#button_example:hover {
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<button id="button_example" type="button" onclick="window.location.href='www.google.es'"><span>Google<span></button>
Since we can't transition CSS gradients (to another gradient) yet, I've provided a lil' workaround using a pseudo element. The shown transition is triggered by the opacity property.
To add on answer above: change the gradient in transition effect (using background position):
#button_example {
background: -webkit-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* IE10+ */
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px #DEDEDE;
-moz-box-shadow: 0px 1px 1px #DEDEDE;
box-shadow: 0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-size: 100% 200%;
background-repeat: repeat-y;
}
#button_example:hover {
background-position: 0 100%;
}
<button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>
Afternoon, is there a reason as to why the css attribute -webkit-transition: all .8s ease-in-out;isn't doing what it's supposed to?
Browser is MS Edge, my code is below.
Thanks
Todd
.callToActionDefault:hover {
color: white;
text-decoration: none;
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #0d89ca), color-stop(100%, #0d89ca));
background: -webkit-linear-gradient(top, #0d89ca 20%, #0d89ca 100%);
background: linear-gradient(to bottom, #0d89ca 20%, #0d89ca 100%);
}
.callToActionDefault {
padding: 8px;
font-size: 15px;
margin-top: 20px;
letter-spacing: 0.5px;
color: white;
width: 60%;
display: block;
position: relative;
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #219cdd), color-stop(100%, #0d89ca));
background: -webkit-linear-gradient(top, #219cdd 20%, #0d89ca 100%);
background: linear-gradient(to bottom, #219cdd 20%, #0d89ca 100%);
bottom: 0;
font-weight: 700;
-webkit-transition: all .8s ease-in-out;
}
<a class="callToActionDefault" href="#">This is a button</a>
It doesn't work, because Edge is not a Webkit-based browser. The -webkit- prefix is a feature of old Webkit-based browsers such as Google Chrome.
In order to achieve maximum compatibility with older and newer browsers use the following code:
-webkit-transition: all .8s ease-in-out; // Old Chrome, Safari
-moz-transition: all .8s ease-in-out; // Old Firefox
-ms-transition: all .8s ease-in-out; // Internet Explorer
-o-transition: all .8s ease-in-out; // Old Opera
transition: all .8s ease-in-out; // Newer Browsers
I am using a gradient to set the background color on one element. The thing is, I am also having an "hover" background but not using the gradient. At the minute, when I hover on an element having the class .tinted it flashes as it first display no background and then apply the rgba(0,0,0,0.65)
Is there any way that the transition could directly go from background: gradient(left, rgba(0,0,0,0.65), rgba(0,0,0,0.30)) to rgba(0,0,0,0.65) ?
.tinted {
transition: background-color 500ms linear;
background: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}
.tinted:hover {
background: rgba(0, 0, 0, 0.65);
}
You need to define the gradients with background-image and the plain color with background-color:
.tinted {
transition: background-color 500ms linear;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: -o-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: -moz-linear-gradient(right, rgba(0,0,0,.65), rgba(0,0,0,.30));
background-image: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.30));
}
.tinted:hover {
background-color: rgba(0, 0, 0, 0.65);
}
DEMO
This Is What you Can Use For This Approach:
#box{
width: 200px;
height: 300px;
background-color: orange;
background-image: -webkit-linear-gradient(top, crimson 0%, transparent 100%);
transition: all 1s ease-in-out;
}
#box:hover{
background-color: crimson;
}
<div id="box"></div>
A posibility is to set a gradient that has 2 parts, one with the color changing, and the other with a constant color.
And change the part of the gradient that you are showing with background-image.position
.test {
width: 300px;
height: 100px;
background-image: linear-gradient(to right, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.3));
background-size: 200% 100%;
background-position: 100% 0%;
transition: background-position 1s;
margin: 10px;
}
.test:hover {
background-position: 0% 0%;
}
#test2 {
background-image: linear-gradient(to right, blue 50%, red 100%);
}
<div class="test"></div>
<div class="test" id="test2"></div>
I have a menu that has one gradient type for default state, and one for the hover/active state. The current page is just like the hover/active state, but with an arrow under it. I can't figure out the best way to get that arrow to show up. I tried a border image, but that didn't look right since the button size is different depending on the length of the menu item. Here is the current CSS I am using to create the two different styles:
.main-nav li a {
float: left;
font-size: 15px;
color: #333;
padding: 10px 15px;
text-shadow: 1px 1px #DDD;
border-right: 1px solid rgba(0, 0, 0, .3);
border-left: 1px solid rgba(255, 255, 255, .5);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, #B3D09E),
color-stop(0.75, #A0B88E)
);
background-image: -o-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -moz-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -webkit-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: -ms-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);
background-image: linear-gradient(to bottom, #B3D09E 0%, #A0B88E 75%);
transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
-webkit-transition: all 300ms;
}
.main-nav .current-menu-item a, .main-nav .current-page-ancestor a, .main-nav li a:hover {
color: #FFF;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #043420),
color-stop(1, #075A36)
);
text-shadow: none;
background-image: -o-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -moz-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -webkit-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: -ms-linear-gradient(bottom, #043420 0%, #075A36 100%);
background-image: linear-gradient(to bottom, #043420 0%, #075A36 100%);
}
I would like to avoid using jquery if I can. I feel like there should be some way to do this using just CSS instead of placing an image in the center of the button with jquery. Do I place an invisible div under each button with the arrow image centered and display it on the current page?
This is what I was given to follow for my menu. They didn't use quite the correct terminology. The 'Active' part of the image is the Current Page style:
You can use pseudo elements in CSS to add content, like ::after. By using the border property with different widths and colors you get a triangle shape. The only thing that can be a bit tricky is if you need the gradient to continue on to the arrow.
I put together a small demo. Hover the links in the menu to see the arrow.
DEMO
li:hover::after {
content: ' ';
position: absolute;
border: solid 10px transparent;
border-top: solid 0px transparent;
border-width: 10px;
left: 50%;
margin-left: -10px;
border-color: #222 transparent transparent transparent;
}
I have some menu items that are styled using a background gradient on hover using the following styling:
#sidebar ul li a:hover {
background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(68,68,68)),
color-stop(1, rgb(51,51,51))
);
color: #f0f0f0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
My question is, is it possible to make the new background (defined by gradients) slide in from the right using CSS3 transitions or animations? Or will I have to resort to using a sprite image or Javascript?
Animation on gradients aren't supported yet. However this site provides a pleasing approach for a animated kind of feel on hover-
http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
Sample css:-
#DemoGradient{
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E);
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
background-size:1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor:pointer;
width: 150px;
height: 100px;
}
#DemoGradient:Hover{
background-position:100px;
}
It seems gradients don't support transitions yet (still):
Use CSS3 transitions with gradient backgrounds
If you use a background image rather than a css3 gradient, then you can use css transition to animate it in and out.
Try this as a hack:
<div class="background-animate">
<div class="content">Hi im content</div>
</div>
And style it
.background-animate {
position: relative;
z-index: 10;
display: block;
background: transparent;
}
.background-animate:before {
content: "";
position: absolute;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
top:0; left: 0; right: 0; bottom: 0; z-index:-1;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #e9eae9 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 40%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:before {
opacity: 0;
}
.background-animate:after {
content: ""; opacity: 0;
transition: opacity .35s ease-in-out;
-moz-transition: opacity .35s ease-in-out;
-webkit-transition: opacity .35s ease-in-out;
position: absolute;
top:0; left: 0; right: 0; bottom: 0; z-index:-1;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 80%, #e9eae9 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 80%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 80%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:after {
opacity: 1;
}
It basically does an opacity switch between to gradients. Demo found here https://codepen.io/anon/pen/eWOEoR