Some cute and simple CSS3 and Jquery snippets
Css3 snippets
For browsers that support them, please feel free to add your comments!
Text highlight colour
A cute bit of css I discovered recently for changing the highlight colour on web text, used on this site:
::-moz-selection{
background: #f8eb60;
}
::selection {
background: #f8eb60;
}
Fade in text colour on hover
Put the following code on your a tag:
a{
color: #6B6054;
-webkit-transition:color .5s ease-in;
-moz-transition:color .5s ease-in;
-o-transition:color .5s ease-in;
transition:color .5s ease-in;
}
a:hover{
color: #fff;
}
Done!
Text shadow – outer glow
a{
text-shadow: 0 0 2px #fff;
}
Create a nicer ‘outer glow’ effect by leaving x and y offset at 0!
Jquery snippets
Very subtle bounce/fade on hover
Big thanks to Neil Grosskop.com for the code!
As seen on my twitter button in the header of this site, degrades very nicely with no js, first to animation for webkit enabled browsers, then to simple css hover effect.
Jquery code:
$(document).ready(function(){
$("img#tweet").hover(function(){
$(this).stop().animate({opacity: 0.75, marginTop: 45}, 400); },
function(){
$(this).stop().animate({opacity: 1.0, marginTop: 50}, 400);
});
});
Css styling:
img#tweet{
float: right; border: 0px; margin-top: 50px;
-webkit-transition-property: margin-top, opacity;
-webkit-transition-duration: .4s, .4s;
}
img#tweet:hover{
margin-top: 45px;
opacity: .75;
}