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

Create multi-layered backgrounds

Use PNG format to help create multi-layered backgrounds

The PNG format has revolutionised how web designers can implement images in a webpage. Typically, web designers were using JPEG or GIF with no transparency. This meant they needed to create an image combined with the appropriate background. Creating an image with a transparency is simple using Photoshop. Create a new file with the Background Contents set to Transparent. Create the image, crop etc and then save as a PNG-24 file. Make sure the Transparency checkbox is ticked. An image can be saved using the PNG-8 format but the quality’s not as good. Using the PNG format makes creating multi-layered backgrounds much simpler and offers more flexibility. The first step is to add a base background via the body tag, this can be a colour or image. The following adds a colour:

body {background-color: #FC0;}
The next part adds an image
body { background-image: url(images/image01.png);}

A background image, using the PNG transparency, can now be placed in any layout element across the site to the desired finish. The beauty of using the PNG format is that the base background can be changed without compromising the layout and look of a page.

TECHNIQUE | Styling header tags

01. Simple styling
To style a header, create the following in the style sheet: h1 {}. Now add the desired font, size, colour etc to style. The newly defined style will now apply to any text that is placed with a set of h1 tags.

02. Special headers
Styling the h1, h2 etc tags restrict the flexibility and use of the tag. If a certain element, ie a div tag called #news, needs a different header style a pseudo class is created. This will include the element name, the relevant header tag and code.

#header h1 {
 font: bold 60px Cambria;
 color: #FFDE00;
 padding: 10px;

TECHNIQUE | Add Google Maps to a website

01. Find location

This step is simple and straightforward. Head to Google Maps ( and enter the location to be included in the site. This can be a generic location like a county, ie Dorset, or a more precise location, ie a street name, or even the address of a specific location.

02. Choose type

Google Maps comes in a variety of guises. There is the standard issue map, a satellite view or a hybrid view. Select the option that is to be used. Alternatively, to get a Street View of the chosen location drag the peg to the desired location and adjust accordingly until correct.

03. Get the link

Click the Link link in the top-right of the map to view the related window. This includes the necessary HTML code to add to a page. Before copying the code click Customize and preview the embedded map link. Use one of the predefined sizes or click Custom and add width and height.

04. Copy and paste code

Once the map window has been resized, copy (Ctrl/Cmd+C) the HTML code in the copy and paste box. Now head to the web where the map is to exist and paste in the code. This will present a grey box where the map resides. Save the page and preview in the chosen browser.

05. My Maps

To create a more custom map, users will need a Google account, click My Maps>Create new map. Now add a title and description for the map. By default the map is Public, click Private to share with selected users. Alternatively, if a map has already been created select from the list.

06. Add places

The hand icon is the selection tool, use this to drag the map to the desired location. Use the pin icon to locate a placemark and click in the desired location. Now add a title and description and press OK. When finished click Link and copy and paste the code and add to the webpage.


Amazee Labs site creator Mike Kus gives a quick insight into the design process.
“I wanted to convey the message that Amazee Labs were vibrant, friendly experts in their field. This led me to the lightbulb concept on the homepage which is packed with words which explain what Amazee Labs is all about. This idea is backed up with a simple but striking colour palette and an illustrative theme that runs through the entire site.”

TECH TIP | CSS hover effect

To create a rollover/hover effect using CSS a pseudo class needs to be created. The ‘a’ tag is the HTML tag that represents the hyperlink. The pseudo class a:link {#FFCC00;} would be the default link, this can be styled by adding a specific colour and style. To create the rollover/hover effect add the a:hover {color:#FF0000;} pseudo class. To make a hover effect more interesting a background colour can be applied to the text. To do this a background colour is added to the a:hover pseudo class, ie a:hover {color: #FFF;background-color: #CF0;}.