Style Links Depending On What They Are Linking To In CSS3

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;
}

I am happy to announce that I have a CSS3 Accordion tutorial featured on Hongkiat.

Hongkiat - How To Build A CSS Only Content Accordion

Horizontal Accordion

Read more...

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. Read more...

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 Read more...

CSS3 Tooltips

Demo

In all browsers you can get the basic tooltips on HTML elements by using the title attribute like the below example. Read more...

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.

Coveloping

coveloping

Coveloping currently has over 30 tools to speed up your daily web development tasks.

Some of the tools include:

  • CSS Button Generator
  • CSS Pricing Table Generator
  • CSS Animation Generator
  • CSS Box Shadow Generator
  • CSS Shapes Generator

Have a look at some of the tools and see if they can help you with your website.

Coveloping

CSS3 Generator

CSS Generator Read more...

Zocial CSS3 Button

In previous article I shown some of best CSS button generators on the web, but these are just a starting point. If you want a framework to build on Zocial is a button CSS framework to create Social Media buttons. Read more...

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.

CSS Button Generator - coveloping

CSS Button Generator

CSS Button Generator

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

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.

Read more...

CSS has a good trick which allows you to change the style of an element when the visitors mouse moves over the element.

To change the style of an element on mouse over you need to use the pseudo :hover. Read more...