Style Links Depending On What They Are Linking To In CSS3

Updated: in CSS

Since CSS3 you can actually define CSS styles by using the elements attributes, so I can look for input text box by setting the CSS.

input[type=text]

On links you use the attribute href to define where the link will send the visitor. Therefore you can use the same technique as above on the different things you are likely to link to.

Things like external page, internal pages, email, PDF, ZIP files are all possible media which you could could to.

External Links

If you define your external links with a rel=external then you can easily style these differently.

/* external links */
a[rel="external"]{
     font-size:16px;
}

Email Links

All email links will start with mailto, so in the CSS selector we are looking for all links which start will the words mailto.

This is done by using ^= which will return all likes which start with the follow.

/* email links */
a[href^="mailto:"]{
     font-size:18px;
}

PDF Links And ZIP Links

All you PDF links are going to end with the file extension of .pdf therefore you can use the same technique as the email links but change the logic to search for the end of the string, this is done by using $=.

/* PDF Links */
a[href$=".pdf"]{
     font-size:16px;
}
/* ZIP Links */
a[href$=".zip"]{
     font-size:16px;
}

Instant CSS Documentation

Updated: in Resources

Updated: InstaCSS website is offline, I don't know if the site has been closed or moved to a different domain. If anybody has information on this please let me know.

If you do a lot of CSS and discover new things about CSS then you will always be finding new properties. When you find something new you need to find something that tells you exactly what it can do, we need a single place where we can document all CSS properties.
Continue reading »

Link Indenting With CSS3 Animation

Updated: in CSS

Animation

In website design there is something that your website must always do this is styling your links so that they stand out from normal text on your page. This will make it easy for the user to find where your links are on the page.

Using CSS you can even add a style to the hover event of the link, like what I do on this site on the hover event I change the text to bold. Changing the style on the link allows the link to stand out even more.

I was looking around some sites and saw links in the sidebar of their site and on the link hover event they would indent it so it stood out from the list. I had a look at how they did this effect and they were using jQuery to make the indent animate, I thought you could easily do that in CSS with the new CSS3 animation, in this tutorial I will explain how you can create CSS indenting using CSS3 animation.

Click on the demo button below to see the effect we will be creating.

Demo
Continue reading »

6 Of Best CSS3 Generators

Updated: in Resources

Here is a list of websites you can use to generate your CSS when using the new CSS3 features. If you forget to additional browser specific CSS then remember to use one of these CSS Generators to create your CSS.

CSS3 Generator

CSS Generator
Continue reading »

Top CSS Button Generators

Updated: in Resources

Here is a list of some of the best CSS Button Generators available on the web. All of them have a nice, easy to use user interface that you can generator awesome button and get the CSS and HTML code for your button.

Most of these include some of the best new features of CSS3 such as shadows and border radius. If your browser supports this you can take advantage of these new features.

Button Maker - CSS Tricks

CSS Tricks Button Maker

Button Maker - CSS Tricks

DaButton Factory

DaButton Factory

DaButton Factory

CSS3 Linear Gradient Buttons Generator

Dryicon Button Generator

CSS3 Linear Gradient Buttons Generator

I2Style

I2Style

I2Style Button Generator

CSS Buttons With Icons But No Images

Updated: in CSS

Demo

Since reading the article Just some other awesome CSS3 buttons I become interested about how you can use this effect to get icons on buttons without using any images.

As a web developer I don't really get on with images and if I can avoid using them I will, so when I saw this trick about displaying icons in a button without using any images I wanted to explorer what other icons you can use just by using CSS.

I discovered that there are loads and loads of icons that can be used in your CSS by using Hexadecimal entities.

There are lots of places I found to get the codes for these icons here is a list of places I used to get the most useful icons for this example.

Continue reading »