HTML/CSS Service

150 CSS Examples

Category: CSS, CSS Expert Ideas    |    7,015 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

Read more…

Share/Save/Bookmark

 

Top CSS Best Hacks

Category: CSS, CSS3 Tutorial    |    1,531 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 */

Read more…

Share/Save/Bookmark

 

Introduction to CSS3

Category: CSS, CSS3 Tutorial    |    958 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.

<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />

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

Share/Save/Bookmark