CSS3

150 CSS Examples

Category: CSS, CSS Expert Ideas | 3,858 views | 3 Comments |

CSS Pagination

Pagination is a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Can be referred to by numbers, hints, arrows as well as “previous” and “next”-buttons.

CSS Pagination Links- Inspired by the pagination interface you see at the footer of Digg.com.
Pagination 101- Pagination 101, that will give you some clues as to what makes good pagination.
Some styles for your pagination- Styles for WP-Digg style pagination plugin, Digg Style pagination Class, the modular version, and the original programed bye strangerstudios.

Block Hover Effect Links

How to Create a Block Hover Effect for a List of Links- Learn how to create hover effect when you mouse over the list items to see the block hover effect in the demo here.
How To Make Clickable Areas Bigger - One basic principle of interaction design is that the larger the link you’re trying to click on, the easier it is to click it. With this in mind, if you are using text-based links (for example in a navigation bar), the actual ‘clickable’ area should be as large as possible.
Anchor tags for block elements- You can see a demo here.
CSS Examples and demos

Top CSS Best Hacks

Category: CSS, CSS3 Tutorial | 1,037 views | 2 Comments |

If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers.

Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.

Min-Height

selector {
min-height:500px;
height:auto; !important
height:500px;
}

Autoclear

.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */

Introduction to CSS3

Category: CSS, CSS3 Tutorial | 475 views | Add a Comment |

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.

At this point you have some choices of how to use the CSS, either internally or externally.

Internal Stylesheet

First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS. The format for this is shown in the example below.

<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>

With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.

External Stylesheet

Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.

Or you can also use the @import method as shown below Read more…

What it’s all about CSS3

Category: CSS, CSS3 Tutorial | 855 views | Add a Comment |

Cascading Style Sheets (CSS3) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

The above quote, taken from the W3C website, is one of the reasons for this site. Whilst I agree that it is a mechanism for adding style to web documents, I do not agree that it is a SIMPLE mechanism. It can be very complicated, as I found out when I took my first steps down this path.

CSSplay, by the way, is now listed on the w3c.org website.

So I have created this site in the hope that it will help newcomers to CSS and show old hands that it is more than just a mechanism for styling your documents. It is oh so much more.

CSS3 Opacity

Category: CSS Tutorials, CSS3 Tutorial | 1,661 views | Add a Comment |

Need for Handling Transparency:

Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.

This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.

CSS3 Advantages

Category: CSS3 Tutorial | 396 views | Add a Comment |

Having got a detailed idea of CSS3 and its features with some of the vital attributes of CSS3 let us see the advantages or uses of CSS3 in brief in this section. There are numerous and variety of areas in which CSS3 makes it mark and thus users finds it one of the comfortable and powerful tools for usage thus making it a reason for its popularity. Let us see some of the important advantages and uses of CSS3 in detail.

Usage of style sheet:

Long before introduction of CSS3 in fact the Cascading style sheets concepts designers of web were using HTML markup to denote the font colors, background styles, border size. But after the introduction of Cascading style sheets concept all these got moved into a separate style sheet area thus making the users to have an easier and comfortable HTML markup. This gives another associated advantage of CSS3 are easier maintenance by which updations and changes are made only to the individual modules needed and testing of the individual modules is carried out and then integrating with the total system thus making the maintenance part very simple.

CSS3 Multi Column Feature

Category: CSS3 Tutorial | 1,171 views | 1 Comment |

CSS3 Multi-Column Module is a vital feature present in CSS3.This feature enables users to flow the content of an element into multiple columns. The CSS3 Multi-Column Module is a important feature because it gives users the following features or advantages there is no need to for users to scroll up and down while reading the text from one column to the next column,

it prevents the need for horizontal scrolling, wraps text user friendly and easier to read without making too short words or lines and most of all everything could be embedded in a single page making it comfortable and economical. This feature is supported by most of the famous and commonly used browsers like Mozilla and Firefox.

CSS3 Introduction

Category: CSS3 Tutorial | 361 views | Add a Comment |

Cascading Style Sheets Level 3 is known as CSS3 for short. Cascading Style Sheets level 3 is the most recent approach of CSS which has a modularized approach which helps to differentiate the connections between the different parts of the specification and also helps in attaining a systematic approach with more flexibility.

The popularity of Cascading Style Sheets Level 3 is because of its modularized capability which gives greater flexibility. That is in other words the Cascading Style Sheets Level 3 has the capability of building of specific tests on a per module basis. By this modularized capability users or developers can develop and maintain the system very easily as it allows to update individual modules and test the particular module and then integrate and test it on whole as and when needed thus making development and maintenance easier .Thus to support the modularized capability of Cascading Style Sheets Level 3 each of the module of Cascading Style Sheets Level 3 modules have syntax, grammar and so on.

What is CSS3

Category: CSS3 Tutorial | 456 views | Add a Comment |

Cascading Style Sheets (CSS) is a style sheet format, endorsed by the World Wide Web Consortium (W3C) that works with HTML documents using simple syntax and various style properties denoted by English language keywords.

CSS1 (Version 1.0) incorporated innumerable layout settings suitable for downloadable HTML pages. CSS2 (Version 2.0) provides additional XML support, downloadable fonts and audio presentations for visually impaired users. CSS3 (Version 3.0) continues in development and its improved highlights include: vertical text, extensive backgrounds and borders, speech recognition and user interaction.

CSS3 Previews Lists

Category: CSS3 Tutorial | 396 views | Add a Comment |

Borders

border-color
border-image
border-radius
box-shadow

Backgrounds

background-origin and background-clip
background-size
multiple backgrounds

Categories

Popular Tags

Comments

Friends

Sponsored Links

Latest CSS Examples

Links

CSS Experiments

Free Resources

150 CSS Examples

CSS Pagination

Block Hover Effect Links

Top CSS Best Hacks

Introduction to CSS3

External Stylesheet

What it’s all about CSS3

CSS3 Opacity

Need for Handling Transparency:

CSS3 Advantages

Usage of style sheet:

CSS3 Multi Column Feature

CSS3 Introduction

What is CSS3

CSS3 Previews Lists

Borders

Backgrounds