Posts tagged with “pure css”

Pure CSS DropDown Menu using :target pseudo class

Friday, 17 June, 2011
Pure CSS3 DropDown Menu Using :target Pseudo Class - Free

Today, CSS3 has become a buzzword of modern web designers and developers around the globe. With its ground-breaking features, CSS3 has made a profound impact on the web designer community by making the lives of web designers easier and fun filled. Here in this post I am going to explain such a cool CSS3 feature called :target Pseudo Class. By playing around and experimenting with the :target pseudo class, I have developed a cool looking pure CSS dropdown menu. This menu is developed wholly using CSS and HTML, no images or javascripts used. Hence it is easily customizable for anyone with very basic css/html knowledge.

Before we continue about how to create the menu, let’s take a look at the fully-functional menu here…

CSS Pseudo Classes

CSS pseudo-classes are used to add a special state or relation to a selector. A pseudo class normally starts with a colon (:) and is appended to a type selector or universal selector without any whitespace in between the selector name and the pseudo class. Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. So, in simple words pseudo classes are really helpful to pick a CSS element in its various states.

Syntax

1
selector:pseudo-class { property:value; }

Example

1
a.navigation:hover { color: #ff0000; }

Read the rest of this entry »

Cool Sprites – Free overlapped CSS menu using CSS Sprites

Monday, 18 January, 2010
free overlapped pure css menu using css sprites

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average).

Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

What is CSS sprite?

CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properites. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.

Cool Sprites – Free Pure CSS menu for download

Here I am presenting a cool overlapped pure CSS menu created using CSS sprites. This is an initial draft version, so far I have checked it only in Firefox 3.5, IE 7, Chrome 3.0 & Opera 9.02 and it looks fine. If anyone of you finds any issues in any other browsers, please lemme know. Cool sprites is a pack of four different versions of the same menu. The photoshop source is also available for download, so that you can customize it as per your need. Since this menu is largely dependent on the background image, you need to customize the image to alter the link label, color, size etc.

Cool Sprites – LIVE PREVIEW

Read the rest of this entry »