Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Create border rollovers and stylish lists

Discover how to create image border rollovers and stylish lists

Fixed aspects
The fixed navigation and shopping cart ensures that they are always in view. This ensures that users have access to the essential elements when needed.

Build up the layers
Typical of many websites is a selection of background images. Brew Shop uses multiple background layers, a body background and the main image to create the complete canvas.

The rollover effect
Rollovers give prominence to the selected item and Brew Shop makes good use of them. The product images have border rollovers and text has standard hover effects.

inspiration: www.brewshop.co.nz

To emphasise a product, the Brew Shop uses a border rollover effect with the original border changing colour on the rollover. Re-creating this simple but effective technique involves a single line of HTML and a few lines of CSS. This lightweight example uses a div tag to contain the images and adds the border to the images in the container tag. First create the container tag, name it accordingly, ie #nav01, then set the Width to 100% and the Height to auto. Alternatively, a fixed width can be used, if needed. Now insert an image or the images into the code and add the relevant link:

001 <a href=”link01.html”><img src=”images/wwtv.jpg” width=”80” height=”80” /></a>

This will add the images with the standard border. Now it is time to create the border for each of the images in the container tag by adding the following code:

001 #nav01 img {
002 border: 10px solid #000;
003 float: left;
004 margin-right: 5px; }

The border uses a solid style with a Width of 10 pixels and is black. All the elements can be modified to suit. The image is floated left to ensure correct positioning with multiple use of image, and the margin is to ensure there is a uniform space between each image. To create the rollover, add the following code:

001 #nav01 img:hover {
002 border: 10px solid #CCC; }

TECHNIQUE | Use multiple backgrounds

Body background
A body background creates the canvas for a page and gives designers a foundation to build on. In this example we are going to add a repeating gradient accompanied by a background colour. Inside the body tag, add the code shown. This will produce a small black gradient at the top of the page and a solid colour at the bottom.

001 body {
002 margin: 0px;
003 background-image: url(images/blackgradback.jpg);
004 background-repeat: repeat-x;
005 background-color: #FFF;
006 }

Overlay images
To overlay an image over the background image, the image will need to be transparent or at least have the same background colour as the body background. To insert an image simply add the following code to display a single instance of the new background image.

001 #title {
002 height: 100px;
003 width: 100%;
004 background-image: url(images/syt2011.png);
005 background-position: 0px 5px;
006 background-repeat: no-repeat;
007 }

TECHNIQUE | Create practical and beautiful lists

List creation
The basis of a list is the ul (unordered list) or ol (ordered list). The favoured choice for non-specific lists is the ul tag. The first step to creating an unordered list involves adding a set of ul tags. Split these and add a set of li (list) tags for each item to appear.

001 <ul>
002 <li></li>
003 <li></li>
004 <li></li>
005 <li></li>
006 </ul>

Add text and links
To start the list-building process, add the desired text between each list item. Typically, this would include one or two words, but any length is allowed. To add a faux link the # can be added instead of an actual address. Perfect for just a test link!

001 <ul><li><a href=”#”>Home</a></li>
003 <li><a href=”#”>Podcasts</a></li>
004 <li><a href=”#”>Features</a></li>
005 <li><a href=”#”>About Us</a></li>
006 <li><a href=”#”>Contact</a></li>
007 </ul>

List type
By default, the unordered list tag adds bullet points to each list item. To remove these in and create a simple list, the list type needs to be defined in the CSS. First create a pseudo class in the CSS that adopts the tag or class name where the list appears, and add the li after. Then add the list type and set to none.

001 #leftside li
002 {
003 list-style:none; }

Text style
By default, the text in the list will adopt the font defined on the body tag and the standard link blue colour with an underline. To smarten up the text the font, font size, style and colour need to be redefined. First create a new related pseudo class and add the following code:

001  #leftside li a{
002 font: bold 16px Corbel;
003 color: #FFF;}

No underline
By default, links are assigned the underline to indicate the text is a link. You can remove the underline completely, only show on rollover or hide the underline on rollover. To remove the underline completely, add the code shown below. To show while on hover, change ‘none’ in a:hover to ‘underline’.

001 a:link {text-decoration: none;}
002 a:visited {text-decoration: none;}
003 a:hover {text-decoration: none;}
004 a:active {text-decoration: none;}

Finishing touches
To add a graphic for each item in the list, add the code show below. Use an image that is similar in size to the text, a good guideline would de around 12 x 12 pixels or 15 x 15 pixels. The left padding is added so the text does not interfere with the graphic.

001 background-image: url(images/arrow.png);
002 background-repeat: no-repeat;
003 padding-left: 15px;
004 background-position: 0px 4px;}

TECH TIP | Short URLs

The short URL has become an integral part of the online experience thanks to the likes of Twitter. There are a host of services providing a shortening service, with well-known examples being bit.ly and tinyurl. However, users need to copy in a link, click a button, copy the new shortlink and paste into a retweet or post. The Shorten URL add-on for Firefox makes the whole process just that little bit easier and quicker. Two clicks shorten the URL of the page and a third copies it to the clipboard. Another effective add-on definitely worth trying out is Url Shortener 1l2.us found at https://addons.mozilla.org. This shortens the current URL, copies and links it to Twitter, among others


×