mr-mojo-risin: Webdesign, Social Media, Gadget, Tech and Web 2.0 News

Webdesign, CSS, Social Media, Tech & Geek Stuff

Web news, CSS and HTML tweaks, social media marketing and blog resources, geeky gadgets, mind blowing graphic sites…

Fast loading CSS mouse over effect

Creating buttons for the navigation bar of your website might mutate into a pretty mess, but it shouldn’t. The most simple (fully graphical) solution, creating two images for every menue item, definetly won’t challenge your brains, but will cause headaches, if you intend to change a wording or even integrate more than one language.
The following method provides a pretty simple, easily edible, fully dynamic and completely cross browser functional way to create a cool and stylish navigation using only two graphics, text and simple CSS.

View a plain demo here.

So here we go:



Read the rest of this entry »

share save 171 16 Fast loading CSS mouse over effect

CSS Mouse Over Opacity Effect

Generally this is no rocket science, using the CSS3 attribute “opacity”, unfortunately CSS3 is not supported by many browsers. As an alternative one could use JavaScript, which also might not work everywhere (if disabled due to security measures). So the easy way only works in the latest versions of Firefox and Opera.

css demo 01 CSS Mouse Over Opacity Effect

(Take a look at a live demo here)

In order to get this working in all the browsers (Ok, using IE6 we’ll have to trick a little bit, but we’ll discuss this later) we have to approach this in a sneaky way.
Here is a simple, fast, lean, cross browser functional and JavaScript free method, only using plain HTML, CSS and graphical elements:

Read the rest of this entry »

share save 171 16 CSS Mouse Over Opacity Effect

RSS Feed

Add to Google Reader or Homepage
add to my yahoo
Add to netvibes
Subscribe in Bloglines

Social Media!


Internet Blogs - BlogCatalog Blog Directory
Join the Mojo Community!
Top Blogs


Search Social Media

Lijit Search