Browsing All Posts filed under »rollover«

How to Style the WordPress Menu

July 27, 2011

0

Original Article at How to Style the WordPress Menu.WP Custom Menu with Rollover Effect This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme. The WP Photo Theme — XO Photo The Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones. This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images. We opted for a solution without sprites in this case considering that the difference will not be material on this site. The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab. The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% [...] Copyright © Yorgo Nestoridis - Original Article at How to Style the WordPress Menu. Related posts:Transparent WordPress Semiomantics XO Transparent WordPress Theme Design How to Customize WordPress 2 How to Create an Ad with Rollover Effect Web Design Workshop 4 – Navigation

How to Create an Ad with Rollover Effect

May 12, 2011

0

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/how-to-create-an-ad-with-rollover-effect/.Add Rollover Effects to your Ads The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover. 1. Create your Image The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite). For the purpose of this exercise we will use the CSS Sprite version. The example shows the rollover effect as used on the homepage. For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high. In stead of creating two images we create only one and leave a vertical space between the two [...] Related posts:Create 125 x 125 pixels Ads How to create a Favicon with Photoshop Simple Sprites Menu Create a Favicon with Photoshop Create Apple Touch Icons and Startup Images

Browse

© 2012 Art Vision Opinions.
Semiomantics by Zibog Roy