Paulund

CSS Category

in CSS by Paul // April 2

CSS3 Animated Media Queries

jquery-mobile-devices-beta
A new trend in website design is the use of media queries, this is because of the amount of devices that can now access the internet all the websites need to usable on any device type. This is where responsive design comes into action, this is the process of discovering what device the visitor is using so we can change the design to adapt to the visitor.

For example if a visitor is using a desktop then the screen resolution is a lot more than on a smartphone, because of the higher resolution we can display more on the screen and increase the width of all elements. If the visitor is using a smartphone then we have a limited screen size so we may need to rearrange some of the elements to fit nicely on the screen.
Read More →

in CSS by Paul // March 26

How To Add Text Gradients With CSS

In this tutorial we are going to look at some of the new CSS3 features for dealing with text colours.

If you have used CSS background gradients before then you will know how you can add gradients to the background of elements, but it’s not as easy to change the colour of text to have a gradient just by using CSS.

Before we continue it’s worth noting that this technique will only work with Webkit Browsers (Chrome and Safari).

To achieve this we are going to use the following CSS properties.

  • -webkit-gradient
  • -webkit-background-clip
  • -webkit-text-fill-color

css_text_gradient
Read More →

in CSS by Paul // February 15

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 →

in CSS by Paul // February 14

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 →

in CSS by Paul // January 16

Learn How To Display URL After Link With CSS

Display URL After Link - Demo
I’ve recently been asked if there is an easy way to display the URL of a link after the link.

For example in a list of items you would want to display the title and then display the URL after the title. This was noticed on my page I display a list of websites you can submit your web related articles to increase awareness.

On this page I display 60+ websites which you can submit your articles, in this list I just display the title of the website which has a link to the website, but I have been asked if it’s easy enough to display the list with the URLs after the website title.

The answer is…Yes it is very easy, I can actually do this just by using CSS. In this tutorial we will learn how we can display the URL of a link just by using CSS.

View the demo to see what we will be creating.

Demo
Read More →

← Older Entries