HTML/CSS Service

CSS3 call to action buttons example

Category: CSS    |    2,224 views    |    3 Comments  |   

In this tutorial i have sharing a CSS3 Call to actions Buttons  resources files and information about how to creating a CSS3 based rounded Buttons. CSS is the most important part in modern standard based web design and Buttons are a very important part of a website.

There are many different buttons available on the web, some JavaScript and some CSS, but none of the ones match that of the CSS3 button styles. demo

Here’s how the call to action button should look like (along with its hover state and Press state).

These buttons supports all browser like ie6, opera, safari, chrome, firefox etc..  Here you will find a collection of Awesome CSS3 Actions Button

Original Source: UX Revisions

Source Files : Download here

Share/Save/Bookmark

  • No Related Post

 

Skype like CSS Menu Example

Category: CSS, CSS Examples    |    2,339 views    |    4 Comments  |   

Now this post i am sharing a Four color scheme  Skype cool Navigation bar (Menu) because I always like Skype and its simple and clean interface cool Navigation  bar (menu) and best color scheme.

You just see the Demo or  download the source code and experiment it.

You can build a Skype rounded navigation menu, with sprite image  and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation.

This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

Original Source Code Demo: UXRevisions.com

Download Sample Link: Download Menu Sample

Share/Save/Bookmark

  • No Related Post

 

Top Useful CSS Tips For Beginners

Category: CSS    |    3,140 views    |    8 Comments  |   
  • Use reset.css

    When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

    Here are few commonly used reset.css frameworks – Yahoo Reset CSSEric Meyer’s CSS ResetTripoli

  • Use Shorthand CSS

    Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

    Instead of creating CSS like this

    1. .header {
    2. background-color: #fff;
    3. background-image: url(image.gif);
    4. background-repeat: no-repeat;
    5. background-position: top left;
    6. }

    It can be short-handed into the following:

    1. .header {
    2. background: #fff url(image.gif) no-repeat top left
    3. }

    More – Introduction to CSS ShorthandUseful CSS shorthand properties

  • Understanding Class and ID

    These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use. Read more…

    Share/Save/Bookmark