Neon Effect on Text – CSS

One of the big advantages of CSS3 is that it allows us to create stunning text effects through some of its properties. Although text-shadow property has been present for some time, it can be enhanced by using the animation property.

The following example will create text with a neon effect and the addition of a glowing effect on hover.

As you might know the syntax for text-shadow is: offset-x offset-y radius color, where offset-x is the horizontal offset of the shadow from text, offset-y its vertical offset, radius is the distance by which the blur of the shadow is calculated and color is the CSS color of the shadow. The result will change the shadow on hover, add animation, thereby creating a more realistic effect. It is given the following markup: Continue reading

The :target CSS pseudo-class

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets.

:target – The target pseudo class is used in conjunction with ID’s, and match when the hash tag in the current URL match that ID. So if you are at URL www.yoursite.com/#home then the selector #home:target will match. Then can be extremely powerful. For example, you can create a tabbed area where the tabs link to hash tags and then the panels “activate” by matching :target selectors and (for example) using z-index to move to the top, or just to highlight a section of your content. Continue reading