CSS Snippets

3 posts

Create a ‘|’ bar Separated Horizontal Menu with CSS3

A simple CSS3 code that will generate a menu like this:  Home | About | Contact | Sitemap – each link separated with ‘|’ (vertical) bar. <style type=”text/css”> ul#nav li{ float:left; margin-right:20px; list-style:none; } ul#nav li:after{ content:’|’; margin-left:20px; } ul#nav > li:last-child:after{ content:”; margin-left:0; } </style> <ul id=”nav”> <li><a href=”#”>Home</a></li> […]

Show Link URL from HREF Attribute Using CSS

We can use CSS to display the URL of a link after the link. For this we don’t need to modify HTML as all work is done by CSS. This is the complete CSS to do this: a:after{ content: ‘ ‘ attr(href); // Style URL font-style:italic; color:blue; } The CSS […]

Scaleable Full Screen Background Image with CSS3

With the background-size property in CSS3, we can get a full page scaleable background image. Here’s the CSS code: html { background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Background image is centered, automatically resized according to browser size, and retains the aspect […]