in a part of my code I have CSS3 animation and it seems does not work very well on safari, but it's fine on other browsers, so, I would like to make and exception, and if the browser is safari then it ignores the animation part of the code.
Here is my code:
download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
transition: opacity .45s ease-in-out;
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out; /* EXCEPTION FOR HERE */
-o-transition: opacity .45s ease-in-out;
}
.download-music:hover {-webkit-opacity:1 !important; -o-opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
Selector hacks
1.
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {}
html[xmlns*=""]:root .selector {}
2.
/* Safari 6- and Chrome 24- */
::made-up-pseudo-element, .selector {}
3.
/* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {}
Media query hacks
/* Safari 3+, Chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {}
JavaScript Hacks
1.
/* Safari 5- */
var isSafari = /a/.__proto__=='//';
2.
/* Safari */
var isSafari = /Constructor/.test(window.HTMLElement);
Source: http://browserhacks.com/
Ditch the prefixed opacity, it's been a couple of years since all browsers have supported it. It interferes with your transition declarations. This should work fine in all browsers.
.download-music {
background: transparent url(../images/dl-music.png) 0 0 no-repeat;
float:left;
width:110px;
height:39px;
text-indent:-9999px;
opacity:0.5;
filter:alpha(opacity=40); /* For IE8 and earlier */
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out;
-o-transition: opacity .45s ease-in-out;
transition: opacity .45s ease-in-out;
}
.download-music:hover {
opacity:1;
filter:alpha(opacity=100);
}
Related
I've been trying to achieve this effect to my site, but it seems that the code isn't working.
Here's the sample site.
And here's the site I'm working on.
I'm mainly changing this part of the theme..
.main-content-area img.wp-post-image {
min-width: 100%;
height: auto;
}
.main-content .wp-post-image {
}
.main-content-area img {
max-width: 100%;
}
Changing the min-width and height would reflect the changes, I'm not sure how to do it when hovering the image. Any advice would help. Thanks!
Maybe try the CSS Transform Scale, paired with CSS Transition (which makes the css changes happen over a set interval of time). Not my Fiddle, but here it is:
http://jsfiddle.net/27Syr/1206/
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Feel free to ask me anything else if you have any questions about it.
I'm kind of new at haml/css and i wanted to know if it was possible to do the following:
having an image with a font awesome icon over it. Then, on the hover effect, change the image and show, instead of the icon, some text.
The image could be consider as a background image, but i couldn't figure out the rest.
haml:
.feature
#dot
%i.fa.fa-list-ul
css:
#dot{
display: inline-block;
background-image: url(../assets/blue.png);
width: 29%;
height: 102px;
}
#dot:hover{
background: url(../assets/hover.png);
}
this just resolves the part of hover effect, but it's not showing my icon. I didn't even start with the text on the hover
Well.. i fixed it doing the following (in case somebody else is interested)
this is my haml:
.dot
%i.fa.fa-list-ul
.read_more Text on hover
this is my css:
.dot{
display: inline-block;
background-image: url(../assets/blue.png);
width: 29%;
height: 102px;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot i{
opacity: 1;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot .read_more{
opacity: 0;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot:hover{
background: url(../assets/hover.png);
-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
-moz-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.dot:hover i{
opacity: 0;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
.dot:hover .read_more{
opacity: 1;
-moz-transition: all 1s; /* For Safari 3.1 to 6.0 */
-webkit-transition: all 1s;
transition: all 1s;
}
the -moz and -webkit is used in order to be supported on all browsers.
the transition: all 1s, says the transition's effect should apply to all the elements and the time set it how long it will take to make the transition.
The opacity is just used as the visibility: hidden/visible, but in order to work with the transition attribute, one must change it to opacity.
I'm attempting to transition an image from a 50% grey scale filter to its filterless state on hover.
The transition doesn't work in firefox however. Is it possible to get the transition running in firefox using only css?
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray alpha(opacity=50); /* IE6-9 */
-webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
Because the standard filter syntax is a url it's not amenable to transitioning. Gecko would have to implement the shorthands part of the under construction Filter Effects specification for this to work.
In the meantime you could do this using SVG animation but not via CSS only.
Is there a way to make a button's background color fade from grey to blue then back to gray using only css3? A good example is a default action button is cocoa? I know this can be done in javascript but I'd rather only use css for this.
Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-
HTML
<input type="submit" value="submit" class="button" />
CSS
.button {
width:100px;
height:20px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}
#-moz-keyframes myfirst /* Firefox */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
see the demo:- http://jsbin.com/osohak/7/edit
read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/
If you need fade animation on hover or such things, CSS3 transition property is your solution.
EDIT:
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}
I'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>