Paulund

 
 
 

Collection Of CSS Resets

Now with the difference in the multiple browsers that are being used we need to a way of trying to standardise them so we have a chance of creating a consistent design for each of the browsers. There are some small differences with the different browsers on how some elements behaviour, for example IE tend to add extra padding and margins to elements than the other browsers. This can cause your designs to look different or even throw some design off depending on the browser.

Other browsers might behaviour differently to floats and clears, which can make your designs look off. To get around this problem we can use a bit of CSS that will reset the browser defaults to something we setup making all the browsers render elements the same.

Read More

How To Create A CSS Slide Out Fixed Navigation

In today’s tutorial we are going to learn how we can make it easy for your visitors to always have access to the main links on your site by creating a fixed position main navigation. But what we are going to do is hide half of the navigation off the page so it will not move over your content.

Here is the end result of the tutorial, navigation positioned on the left side of the page.

CSS Slide Out Fixed Navigation

Demo
Read More

How To Create Pretty Search Forms

In this tutorial we are going to style text boxes and buttons to create pretty search forms. We are going to create three forms which will match the image above.

The three styles are dark grey, light grey and a lighter grey just like the image below.

Search Boxes

The HTML

Each of the search forms will have a textbox and a button which we can submit the search.
Read More

CSS3 Buttons With Pseudo Classes

Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class { property: value; }, simply with a colon in between the selector and the pseudo class.

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links.

  • Link – This is the for the default link.
  • Visited – This Is the state you give to links which have already been visited.
  • Hover – This is the state when the mouse is over the link.
  • Active – This is the state you give when the visitor clicks on the link.

In this tutorial you will learn how you can use this Pseudo classes with CSS3 to create different states for your web buttons.

Demo

We are going to use the Link, Hover and active classes to give the button different styles depending on how the visitor is interacting with it.

The image below shows the different styles we are going to create.

CSS Web Button
Read More

How To Build A Simple Tabbed Menu

In this tutorial we are going to take a PSD and turn them into HTML and CSS. I previously done this with other tutorials such as building a CSS pricing table.

In this tutorial you will learn how you can create a simple tabbed menu in CSS.

The style we are going to create is going to look this.

Build A Simple Tabbed Menu
Read More

12 Annoying jQuery Functions

Angry Face

You will always come across websites that add some code in to try and stop you from doing things on there website, but the things they are trying to stop you doing are standard activities you would normally expect your be able to do.

Such as highlighting text on the page, right clicking to copy, right clicking to go to search or opening an image in a new tab. I’ve seen some websites that put in bits of Javascript to stop you doing these tasks. I’m not sure why they would waste time trying to stop people doing this as it’s easy to get around by turning Javascript off, the only thing it does is annoy it’s visitors. Then I thought about all the other annoying stuff you see with Javascript such as pop up boxes.
Read More

Turn On HTML5 In IE8 or Lower

HTML5

HTML5 is becoming more and more popular, with this has some issues. If you want to support some of the older browsers which are still being used such as IE8 and lower then using HTML5 you are going to have some trouble.
Read More

Create A Weather Application With Google API Using PHP

Weather

Google has a lot of APIs which any developer can use to add a bit more interaction to your application. Some of the APIs need an API key to access the data you want, but there are others which don’t need any API key at all.

Previous examples of using a Google API is getting the feedburner count using PHP. Today we are going to use another hidden Google API to get the weather for a certain area. The Google weather API allows you to send it a location from anywhere in the world and get the current weather and the future weather.
Read More

HTML5 Details Tag

HTML5

In past articles I have wrote about some of the new features which have come with HTML5. We have gone over some of new features with HTML5 forms and HTML5 placeholders.

In todays tutorial we are going to investigate another HTML5 tag called Details.
Read More

Freebies: Free Files For Feburary 2012

Each month Paulund bring you FREE files you can download from the Envato Marketplace.

Last month freebies brought you an nice selection of freebies from jquery animation tool, online resume template, cubes logo and more.

Envato is a web marketplace where you can get premium files for different areas of your website. My favourite marketplaces is the script marketplace CodeCanyon and the Blog theme marketplace ThemeForest.

Now For This Months Freebies

Read More