Read more about web design Cork and drop us a message!

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; }


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 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; }

- Posted - Categories

Back to Top

Random Web Design Testimonials

“Hilary is quite an exceptional web designer and has a great eye for detail. After we gave her our concept from the outset she returned with an excellent offering. Superb designs, very efficient web design, best advice and we always got the feeling she was always looking after us. At every stage in dealing with her she has out done herself and truly is a gifted designer. Comes highly highly recommended by us and we have gotten huge praise from others we have referred to her. Keep up the excellent work Hilary.” January 24, 2011

Owen Purcell -