About this trail:
Cool CSS Techniques. I created this trail mainly for myself but it may be helpful for you too. It consists of techniques that I have used or intend to use in upcoming websites.
Trail link: http://www.trailfire.com/Marje/trails/20982
Summary: http://www.trailfire.com/Marje/trailview/20982
Summary: http://www.trailfire.com/Marje/trailview/20982
1
14
Tags
Similar Trails
1
CSS menu - no javascript used. Hover effect is achieved by changing the position of the background image, moving it up 24 pixels when a link is moused over. background-position: 0 -24px;
2
A hugely influential article from A List Apart (part 1)
3
Part II of this very influential article.
4
CSS Tabs for navitation of an entire web site; these tabs are scalable and a secondary menu is included
5
Several examples of CSS drop caps by Mandarin Design
6
Pure CSS drop shadows - no javascript used; no images used
7
lots of CSS .... this man LOVES to play with CSS.
8
I LIKE THIS TECHNIQUE ! Nice tool for creating pure CSS rounded anti-aliased corners without using images or javascript. ... allows you to select class name, foreground and background colors, and the radius of the corners: 3px 5px 9px.
9
Valuable tutorial on creating a horizontal nav bar similar to the one on this site, by Swedish web designer and guru, Roger Johansson.
10
A single background image is used in this horizontal tabbed menu. It is an example of light weight tabs that combine the Sliding Doors method with the Mountaintop corners idea.
11
Example of a horizontal tabbed menu with a sub menu below it. Makes use of absolute positioning.
12
An elegant horizontal menu using CSS/XHTML as opposed to tables. And once CSS is disabled, a nice unordered list remains.
13
Horizontal "mini Tabs menu ... includes CSS and markup.
14
A clean, well-structured menu which combines the dynamism and code-ease of dropdown menus and does away with their main problems (not to mention degrades beautifully. From A List Apart
15
clearing floats leaving no vertical space per Andy Budd
16
CSS/XHTML forms in various formats. Click the link across the top of the page to see various layouts for this form.
17
Nice selection of well-styled forms and links to their web sites.
18
Light-weight 100% CSS buttons that appear depressed onhover.
19
Roger Johansson..."...I spent way too much time creating a total of 224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations. I have created a demo page for each type of form control."
20
21
A pure CSS image gallery that is very attractive and uses no javascript.
22
4 level deep CSS menu system, with hover persistence, in both horizontal and vertical layout modes.
23
based on the Sliding Doors technique; alter the menu graphics to suit your needs. The essence of these menus is the background image which changes position on hover. The benefit is that the background image is already downloaded when you first hover over a menu item ... and it shows up instantly.
24
the Sliding Doors technique; alter the graphics to suit your needs. The essence of these menus is the background image which changes position on hover. The benefit is that the background image is already downloaded when you first hover over a menu item ... and it shows up instantly.
25
based on the Sliding Doors technique; customize the graphics as you like. The essence of these menus is the background image which changes position on hover. The benefit is that the background image is already downloaded when you first hover over a menu item ... and it shows up instantly.
26
These stylish menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.
27
Using the Suckerfish method to create a 4-level deep list ... both horizontal and vertical layouts.
28
Four pages of stylish horizontal CSS menus (some are imageless) from the Dynamic Drive CSS Library- includes the code and the graphic elements needed to create these menus
29
The Listamatic shows the power of CSS when applied to one simple list. Very helpful site to use when creating CSS vertical and horizontal lists.
30
Two pages of stylish vertical CSS menus from the Dynamic Drive CSS Library- includes the code and the graphic elements needed to create these menus
31
The Image Rotator is an easy way to make an image on your website change every time a visitor reloads the page. The Rotator picks a randomly selected image from a folder you specify and displays it to your visitors.
32
Summary and instructions.
33
nifty way to style a site map... mouseover the nested lists image below to see it.
34
A beautiful, standards-compliant, css-styled table ... for the few times you will need ont.
35
flexible and simple techniques for creating bar graphs using XHTML and CSS.
36
A multi-column menu is created by putting unordered or ordered lists within a definition list. A technique that can be used in the "beefy footers" that we see a lot of these days.
37
The Beefy Footer - the format of putting lots of extra content below the main content, which you can see an example of right here on this site, has gotten popular, and it’s still agreed that Powazek was one of the first to do it.
38
This validator efault checks stylesheets against the CSS 2.1 specification. CS 2.1 is the stylesheet language of choices for real world Web designers.
39
This validator checks your markup - XHTML - for conformance to W3C Recommendations and other standards.
40
Based on Veerle's technique, the author states "Rather than force others to wade through Veerle's CSS (wow, that's quite a style sheet!) I thought it'd be helpful to show how to create this "block hover" effect."
41
Horizontal CSS drop-down menu .... honed to the bare minimum. This menu is regularly updated by the author, Stu Nicholls, and is part of a series of menus... the others being "a simple horizontal 6-level drop-down menu with overlap and overrun" and "a 4-level vertical fly-out menu with overlap and overrun".
42
Nifty CSS menu with dotleaders.
43
Some nifty ideas on how to spice up your text. Includes pullquotes, drop caps, shadow effects, pure CSS banners, etc. Before you use these techniques, be sure to check in both browsers ... FF and IE.
44
Create a 50% opaque border to the edge of a photograph. Nice effect. Works in FF, IE & Opera.
45
CSS Opacity in FF, IE & Opera. Includes CS3 Transparency.
46
47
A List Apart: Articles. A hugely valuable site by CSS guru Eric Meyer.
48
how to add your print styles directly to your main stylesheet
49
lots of good articles on Print using CSS
50
A good resource about printing web documents from the css-discuss wiki
51
CSS framework, allowing rapid development of sites with pre-written and tested markup components... includes common layouts done with pluggable stylesheets ... the author Mike Stenhouse states that this is a simple way of skipping the tedious startup on the average project, and getting to the interesting stuff as quickly and efficiently as possible.
52
Various options to cure the page shift.
53
Adrian Senior of Community MX discusses good coding practices when laying out a CSS design and building your style sheet. Also, how to make our style sheets more manageable through the use of comments and see how we can use our style sheets to their greatest effect.
54
Using nested lists you can create a Spruced-up Site Map showing parent elements as folders and child elements as files
55
nice technique by Sergio Villarreal
56
more CSS Drop Shadows by Sergio Villarreal
57
another drop shadow technique ... by Brian Williams at A List Apart
58
An important article written by CSS Guru, Eric Meyer. By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.
59
css-discuss is a mailing list devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications. All serious css coders would greatly benefit themselves by joining .... you meet a lot of cool people this on this list ... too.
60
I use the technique on this page along with Firefox to easily switch between stylesheets.... without php or javascript. Firefox users can switch style sheets using the View > Page Style menu. Another great article from A List Apart.
61
Smashing Magazine has compiled a list of the most interesting and useful CSS tricks, tips, ideas, methods, techniques and coding solutions at 70 Expert Ideas For Better CSS Coding. A super-sized resource!
62
CSS tabbed navigation using a single background image
63
10 quick tips (in no special order) to help make your CSS coding as pain-free as possible.
64
I use backgrounds a lot in my designs. Here's a resource page with a ton of information about backgrounds and CSS.
65
A developing site created by Adobe to help answer your CSS Questions. As it grows, it will become a more and more valuable resource.
66
Pullquote ...a useful device to improve the readability of content-heavy pages, call out important content, break up content on a page, and provide additional visual interest. Examples of well-designed pull quotes.
67
TopStyle is THE BEST CSS authoring tool I have run into. I couldn't make it through a day without my TopStyle. It's always open when I'm working in Dreamweaver. This is Nick Bradbury's (creator of TopStyle) TopStyle blog.
68
Veerle Pieters describes the design of the block-hover effect on the 4 tabbed boxes.
69
The basic idea is to make an extra dummy input text field in your form, and using CSS to make it invisible to the real human users. Thereby, if a post is sent to your php script handling the request and this extra text field contains information, you know that the submit must be spam, and the script can ignore the post.
70
Comprehensive article on specificity.
71
Create a beautiful pullquote with double quote marks in CSS
72
From " ... Talking of Design ... " a blog by web designer and illustrator, Kev Adamson ... includes the HTML and CSS on how to achieve a clever rollover map.... we appreciate his taking the time to teach us how to accomplish this. Makes use of CSS hover.
73
74
An ever growing list of menus (horizonta, vertical, multilevel) by CSS visionary, Stu Nicholls. You will very likely find the menu you want right here.
75
Putting all states into one image makes dynamic changes faster and requires no preload. Just one image is used. No preload is needed. State switching is as fast as possible (moving background position is much faster than replacing background image). AFAIK, it works in every CSS2 capable browser
76
It is the number of packets and not necessarily the overall size of the page that was important. What this means is that the fewer requests that you make for a given page, and the more effectively they fit in a data packet, the faster your page would be.
77
78
Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.
79
80
Centering a box within a box ... properly
81
Example of a page which has user-selectable stylesheets.
82
A combination of sprites and sliding door tabs. From Dynamic Drive CSS Library.
83
This vertical menu uses the Sliding Doors technique with a single background image.
84
Beautiful "glossy" horizontal menu using sliding doors technique. Includes downloadable file.
85
A CSS technique to give you printed page the logo and/or url, or whatever picture you would like to see on the printed paper.
86
A good article on CSS sprites with downloadable examples.
87
Create pretty textual buttons using the sliding doors technique. Has downloadable images.
88
These buttons use the sliding doors technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible oval shaped CSS buttons
89
Some of my favorite techniques all on one page. Includes CSS sprites, rounded corners, image replacement, sliding doors, equal height, navigation lists, CSS headlines, CSS drop shadows, transparency, etc.
90
Konstruktors offers a collection of CSS snippets for constructing grid based layouts, columns, basic typography and navigation elements.
91
CSS shadows applied to images and boxes.
92
93
Tabbed content - cross-browser - NO javascript - just CSS - and it validates. Each tab displays a page of text with a picture and embeded links. A working scroll bar is added for each page as required.
94
This page includes several pure CSS-based tab techniques .... scroll toward the bottom
95
The author's goal was to build CSS tabs without using any images or hacks and with as little CSS asa possible. Neat things about these tabs:
- They don’t use any images.
- They don’t use any CSS or HTML hacks.
- They use very little CSS.
- They can be placed anywhere on a page.
- The HTML doesn’t need to change between pages because the CSS uses the body id to determine the active tab.
96
97
Site referring the best articles on the development of CSS on the Web.
98
vertical menu is same height as image.
99
beautiful menu with downloadable file.
100
Three horizontally aligned boxes: Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials.
101
102
These semantic navigational tabs use the least possible markup and CSS, and are in a word: simple. No frills here, just a two tiny images, (and masthead image), and the rest is done with colors and borders.
103
3-image vertical menu; hover and active states change the position of the 3-part background image
104
Create a double border around an image using CSS
105
Examples of styling unordered list.
106
TabCreatr.com is an application that allows you to create your own tabs and Css menus. You can see all published menus and their code. Also upload your own.
107
A gallery of CSS menus and tabs with links to how to create them.
108
109
CSS Rolling Drop down Menus - two kinds of drop-down menus. One of which scrolls down softly giving an interesting effect.
110
Nice collection of CSS techniques
111
112
Advanced CSS You Can Use with Confidence. Start using them! Includes a browser CSS support chart.
113
114
115
116
LOVE this CSS editor... can't recommend it highly enough!
117
A showcase of some of the exciting new functions and features of CSS3 when they get implemented in either Firefox, Konqueror, opera or Safari/Webkig
118
119
A set of nicely designed menus with their html and css. Included are horizontal, vertical and drop-down menus.
120
The 960 Grid system helps streamline web development by providing cocmmonly used dimensions based on a page width of 960 pixels.
121
Explanation of the 960 Grid System including fonts used, font size and line-height.
122
124
Here is a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. etc, etc.
You saved me from having to do this manually.
Free Online Shop Creator