Nearly every project needs a printer-friendly output option.
Hartija is a CSS framework that aims to simplify creating such outputs.
The CSS file includes styles for common tags to make them look good as a printed material.
It is enough to insert the CSS file with the media value "print" like:
By doing so, when a user tries the print the page, print.css file will be used instead of the website’s standard CSS file.
There are several options for creating rounded corners like: with one image, four images, javascript and plain CSS (and more).
Ask The CSS Guy puts the CSS rounded corners used in Google Analytics under scrutiny.
The technique works by leaving a 1px notch in every corner which creates the rounded corner effect .
This is definitely a nice way of creating rounded corners as it is always more flexible working with CSS rather than static images.
WebDesignerWall has a very nice trick to decorate your images and photo galleries without editing the source images.
The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect.
Typogridphy is a CSS framework that helps web designers and front-end developers in quickly coding typographically pleasing grid layouts.
Typogridphy uses ems which means that the content is zoomable without creating problems for the design.
Based on the popular 960 Grid System (see WRD post), Typogridphy makes creating grid layouts which are versatile and great looking much easier. This CSS framework is made of fully validated, semantic and strict XHTML, and validated CSS.
Dynamic Drive, a great resource for web designers & developers has a nice collection of free CSS menus that you may find handy.
There are several horizontal and vertical menu examples, buttons, pagination samples & more.
Besides these CSS menus, Dynamic Drive is worth to browse deeply & regularly as new resources are added frequently.
Formy is a simple-yet-functional CSS framework which enables you to create form layouts without tables, divs or lists.
Formy is created by Vladimir Carrer who had created the CSS print framework: Hartija (see WRD post). Thanks to him for the suggestion.
Formy uses Reset.css for maximum browser compatibility.
With the download, there are already examples of vertical & horizontal forms.
Perfect multi-column CSS liquid layouts is a series of website layouts use percentage widths and relative positioning and compatible the common web browsers (even Safari on the iPhone and iPod touch).
They’re also ’stackable’ so you can use multiple column types on the one page.
These free CSS layouts include 1-column, 2-column & multi-column ones.
Although there may not be a perfect layout with every new browser version, these layouts are promising.
Emastic is a CSS grid framework aiming to ease creating elastic layouts.
It is created by the author of Hartija (see WRD post) & Formy (see WRD post) CSS frameworks and powers users with:
I analyzed all the Grid CSS frameworks and almost everything connected with the Grid System. But I did not want to reinvent the wheel, just to improve the main defects of the existent CSS Frameworks and to add some new features.
Emastic is lightweight (compressed size is less than 4kb) and several examples can be found in the project page.
Using different CSS properties for different browsers is very common as they are not rendered the same.
Conditional-CSS allows you to use "if statements" for targeting specific browser versions or a group of browsers.
Website has an online compiler that enables you to generate the Conditional-CSS file in PHP, C or C#.
13styles presents beautiful free XHTML - CSS menus which we can use & inspire.
Menus are lightweight, list-based & well coded. This makes them easier to modify.
There are 13 menus which are ready to download. And, all menus are cross-browser compliant.
The CSS Zen Garden is a World Wide Web development resource. The goal of the site is to showcase what is possible with CSS-based design. Style sheets contributed by graphic designers from around the world are used to change the visual presentation of a single HTML file, producing hundreds of different designs. Aside from reference to an external CSS file, the HTML markup itself never changes. All visual differences are the result of the CSS (and supporting imagery).
Here i’ve selected 20 of the cool css zen garden designs, Hope everyone will like this, Here we go
What can be better than simple, useful and handy tools you can use “on the fly” in the development process? Whether you’d like to test font size, generate online-forms, create rollover-navigation, create a slide-show, format CSS code or optimize your code - you can use dozens of tools to make your life easier.
We’ve collected them. At least most of them, and compiled them in a brief and precise overview. And here what we’ve come out with - most useful CSS-Tools you can use developing tableless web-sites.
Links checked: May/14 2008.
1. Triadic Background Setting with CSS
The Silverback web site uses three background images to create the illusion of 3D with simple CSS. No documentation is provided, however the source code is quite intuitive. [via Wilson Miner]
2. Creative Use of PNG Transparency in Web Design
With proper PNG support in Internet Explorer 7, and some handy JavaScript and CSS tricks to account for older browsers, we can use PNG images to greatly enhance our design vocabulary.
3. CSS Server-Side Pre-Processor
5. CSS SiteMap
6. Styling File Inputs with CSS and the DOM
File inputs () are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
7. A Savvy Approach to Copyright Messaging
Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.
9. Advanced CSS Menu Trick
What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.
10. CSS hover effect
11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
12. A Stripe of List Style Inspiration
A different type of list and navbar styling. As stripes.
13. Rediscovering the Button Element
14. Dynamic CSS With Variables
Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails.
15. Hyperlink Cues with Favicons
I wanted to extend the concept of hyperlink cues a little. For links that point to external sites, what if, instead of showing a generic ‘external link’ icon, we showed that site’s favicon?
16. A CSS styled table version 2
17. CSS Step Menu
A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.
18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street
19. Iconize Textlinks with CSS
Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.
20. Better Ordered Lists (Using Simple PHP and CSS)
Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.
21. Circular Menu with CSS
This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example.
22. CSS Dock Menu
23. Digg-like navigation bar using CSS
This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.
24. 13 Awesome Javascript CSS Menus
13 “fresh” JavaScript+CSS-based navigation menus in a brief overview. Among other things Slashdot Menu and Sexy Sliding Menu displayed below.
25. CSS Pricing Matrix
A CSS-based matrix in which clicking on a highlights the associated cell in the top row and left column giving an indication of relationships among the provided information. Similar solution: Tablecloth.
26. CSS List Expander
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects.
27. How to create VISTA style toolbar with CSS
Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.
28. Fade Out Bottom
This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.
29. Scrollovers - A New Way of Linking
Everyone is familiar with hover-effects. This CSS+JavaScript-based techniques creates the Scrolleffect - not really necessary, but it’s nice to know, how it can be done.
30. How to Style an A to Z Index with CSS
31. CSS List 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. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.
32. How-to create a “Table of Contents” Navigation
In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.
34. Partial Opacity
35. Simple Round CSS Links (Wii Buttons)
36. How to make sexy buttons with CSS
37. CSS Pull Quotes
38. Drop Shadow CSS
39. CSS Speech Bubbles
Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.Tested in all major browsers.
40. CSS Double Lists
42. Better Email Links: Featuring CSS Attribute Selectors
Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.
43. CSS: Menu Descriptions
This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.
44. CSS Transparency Settings for All Browsers
45. Time Sensitive CSS Switcher
CSS Switching script that changes style sheet based on time of day.
46. Custom Reading Containers
This amazing little script allows the user to resize any container.
48. PNG Overlay
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.
3. CSS Tabs
4. CSS Bar Graphs (CSS For Bar Graphs)
5. Collapsing Tables: An Example
6. Adam’s Radio & Checkbox Customisation Method
8. CSS Shadows (CSS Shadows Roundup)
9. CSS Rounded Corners Roundup (Nifty Corners)
10. Drop Cap - Capital Letters with CSS
11. Define Image Opacity with CSS
12. How to Create a Block Hover Effect for a List of Links
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS
14. CSS Diagrams
15. CSS Curves
16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
17. CSS Image Map
18. CSS Image Pop-Up
20. CSS Image Replacement for Buttons
21. Link Thumbnail
22. CSS Map Pop
23. PHP-based CSS Style Switcher
24. CSS Unordered List Calender (CSS Styled Calender)
25. CSS-Based Forms: Techniques
26. CSS-Based Tables: Techniques
27. Printing Web-Documents and CSS
28. Improved Links-Display for Print-Layouts with CSS
30. CSS Teaser Box
31. CSS Tricks for Custom Bullets
33. CSS Zooming
34. Creating a Star Rater using CSS
35. The ways to style visited Links
36. PDF, ZIP, DOC Links Labeling
37. Displaying Percentages with CSS
38. Image Floats without the Text Wrap
39. Let visitors decide, whether or not will they open link in a new window
40. Simple accessible external links
41. Zebra Table with JavaScript and CSS
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
44. Image Caption with CSS (Styled Images with Caption)
47. Hierarchical Sitemap with CSS
48. Snook’s Resizable Underlines
49. Switchy McLayout: An Adaptive Layout Technique
This document contains some examples of use of the CSS3 border-radius properties, and is a supplemental document for the entry CSS rounded corners without images at Arve Bersvendsen's Virtuelvis. To view this document correctly, you will need a CSS3 capable browser (none of which exist at the time of writing, or a browser using the Gecko rendering engine from the Mozilla foundation. Please note that parts of the demonstration breaks in Mozilla. These parts are commented specially.
The border-radius property will round all four corners of a corner.
If the second length value is omitted, it is interpreted as being equal to the first, meaning that border-radius: 5px 5px is equal to border-radius: 5px;. Example:
#ex1 {
-moz-border-radius: 1em;
border-radius: 1em;
}When the length values are different, the first length value will be interpreted as horizontal length, and the second one as vertical length, for left to right scripts. Examples
#ex2 {
-moz-border-radius: 2em 1em;
border-radius: 2em 1em;
}Note that Mozilla breaks horribly, and makes the top-left and bottom-right corners circles with radius 2em, and the bottom-left and top-right corners are circles with radius 1em, instead of making all four corners ellipses with horizontal radius 2em and vertical radius 1em.
All of the following properties do not have mozilla equivalent properties.
Example:
#ex3 {
border-top-left-radius: 1em;
}#ex3 {
border-top-right-radius: 1em;
}#ex3 {
border-bottom-right-radius: 1em;
}#ex3 {
border-bottom-left-radius: 1em;
}CSS3 will have properties to make rounded borders, borders consisting of images and boxes with shadows, but with some work you can simulate some of them already with CSS2 — and without any tables or extra mark-up.
This page was inspired by one created by Arve Bersvendsen. He has many more interesting CSS demos.
Of course, rounded borders and shadows will be much simpler with CSS3. For example, to give a paragraph a thick red border with rounded corners, you would need just two lines of CSS3 similar to this:
P { border: solid thick red;
border-radius: 1em }
And to add a blurry drop shadow half an em below and to the right of the paragraph, just one line would be enough:
P { box-shadow: black 0.5em 0.5em 0.3em }
(You can try here if it works already.) But if you need them now and you don't mind the complexity and lack of flexibility, you can use the technique below. At the very least it will be a nice test for buggy browsers…
The main trick is to use generated content ('::before' and '::after') to put four extra images on an element. The '::before' pseudo-element can have a background and a foreground image, the '::after' pseudo-element also, and the element itself can have a background, for a total of five images.
We create five PNG images and put them in the four corners and against the right edge of the element. Here are the images:
And here are the CSS rules to position them:
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote::before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote::after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Since our background image is 620px wide, we can't allow boxes wider than 620px, without getting gaps. That's why the 'max-width' property is there. The 'display: block' property is needed to make sure the generated content forms boxes of its own above and below the main content, instead of being inserted on the first and last line. The 'line-height: 0' makes sure there is no room for left open for ascenders and descenders above and below the images in the 'content' property.
And here is how it looks:
Do you see a pale green box with rounded corners and a drop shadow against a white background? If not, your browser isn't handling the generated content correctly (or maybe not at all).
The HTML source is really no more than it should be:
Do you see a pale green box with rounded corners
and a drop shadow against a white background? If not,
your browser isn't handling the generated content
correctly (or maybe not at all).
And if you want to test if your browser can already do this the CSS3-way, you can try it here.
The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent.
div { background-color: rgb(255,0,0); opacity: 1; }
Webkit, Gecko and Opera browsers all support Opacity.
The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value.
div { background-color: rgba(255,0,0,1); }
This is supported in Webkit and the first alpha of Firefox 3.
The key difference between the two declarations is this:
Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.
Here’s an example.
background-color: rgb(0,0,255); opacity: 0.5;
The background color of the second div has been set to blue, and the opacity set to half. The text inside the div has inherited the opacity value from its parent, and you can see the yellow div showing through.
background-color: rgba(0,0,255,0.5);
The background color has been set to blue, and the opacity set to half. The text inside the div does not inherit the opacity value, as it acts solely on the background-color declaration, so the text does not reveal the yellow div behind.
A first Alpha of Mozilla’s new browser is due for release shortly (probably tomorrow). Firefox 3 saw a lot of work go into speed, stability and the interface, but was slightly disappointing for front-end developers and saw CSS implementation overtaken by Safari and Opera.
3.1 will make up for that with a whole raft of features on their way. Implemented in the current nightlies (and therefore, most likely, in the Alpha) are:
Planned for implementation but not yet landed features include:
For the stat-hungry amongst us, 3.1 currently scores 84 on the Acid 3 test, and the implementation of Media Queries should take that up to 85.
There’s no indication of it, but I personally would like to see their border-radius syntax brought into line with the standard, and Transitions implemented to complement Transforms. I’ve been playing with Transitions recently, and they’re very cool.
What new CSS features would you like to see in Firefox 3.1?
box-sizing and overwriting content. box-sizing). Explorer doesn’t support one bit of CSS3. | Selector | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
^ SelectorSelects an element whose attribute begins with a certain string.» Test Page | No | Yes | Yes | Yes | No | |
| Attribute selectors are the most widely supported bits of CSS3. | ||||||
$ SelectorSelects an element whose attribute ends in a certain string.» Test Page | No | Yes | Yes | Yes | No | |
* SelectorSelects an element whose attribute has a certain sustring in its value.» Test Page | No | Yes | Yes | Yes | No | |
~ SelectorSelects an element that is a previous sibling of another element.» Test Page | No | No | Yes | No | No | |
| This doesn’t work in the first few builds of 1.7b. | ||||||
| Pseudo Class | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
:containsSelects an element with certain text contents.» Test Page | No | No | No | No | No | |
Example syntax: h2:contains("Welcome") would select any h2 with "Welcome" as its inner text. | ||||||
:selectionSelects an element whose text is selected.» Test Page | No | No | No | Yes | No | |
:enabled/:disabledSelects form fields that are enabled or disabled.» Test Page | No | No | No | No | No | |
:nth-child()Selects a certain child of an element.» Test Page | No | No | No | No | No | |
The Argument for this is the child's index number, like body:nth-child(2) would select the body's second child. The test page uses even and odd, which are also acceptable arguments. | ||||||
:value()Selects a form element with a certain value.» Test Page | No | No | No | No | No | |
I don't see a need for this at all, when you can just use input[value="whatever"]. | ||||||
::marker()Apply styles to list item markers.» Test Page | No | No | No | No | No | |
The styles set for this apply to the actual marker, not the LI itself. To render the test page correctly the browser must also support the counter-increment declaration. | ||||||
:not()Negation of a selector.» Test Page | No | Yes | Yes | Yes | No | |
The test page has input:not([DISABLED]) which means it selects all input fields that aren’t selected. | ||||||
| Declaration | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
OpacityMake an element opaque.» Test Page | No | No | Yes | Yes | No | |
The value for this must be a fraction, like .5. | ||||||
border-imageUse an image as a border.» Test Page | No | No | No | No | No | |
box-shadowGive shadows to arbitrary boxes.» Test Page | No | No | No | No | No | |
List StylesNew CSS3 List Style types.» Test Page | No | No | No | No | Minimal | |
Opera 7 and Explorer 5 Mac only support list-style-type: box;. All other browsers support none of the new styles. | ||||||
caption-sidePosition of table caption.» Test Page | No | Yes | Yes | Yes | Yes | |
| I know this is CSS2 but I tested this anyway. | ||||||
min-/max-font-sizeSet a minimum or maximum font size.» Test Page | No | No | No | No | No | |
Text stylesExtensions to text styles.» Test Page | No | No | No | No | No | |
| This is complicated. See the test page and CSS3 Text Module for more details. | ||||||
AppearanceGive an element a certain appearnce.» Test Page | No | Alter | Alter | No | No | |
This is supposed to give a block level element the appearnce of miscellaneous things on the users computer. Possible values include tooltip and push-button.• Mozilla supports -moz-appearance, but only on Windows XP and Mac OS X. | ||||||
Font AppearanceGive fonts special appearances.» Test Page | Yes | Yes | Yes | Almost | Yes | |
This is also CSS2 but included in CSS3 UI. Fonts can have values like font: 13px status-bar bold;, which would make the text have the same font-family as the computer’s status bar. See the spec for more.• Safari 1.2 doesn’t support the “ status-bar” value. | ||||||
box-sizingThis is used to switch Box Models.» Test Page | No | Alter | Alter | No | Yes | |
Use this to switch from the bad box model to the right one with box-sizing: border-box.• Explorer 5 Mac supports this as well. • Mozilla needs -moz-box-sizing. | ||||||
iconReplace elements with icons.» Test Page | No | No | No | No | No | |
With this you can replace elements with the icon property and display: icon. The UA must support both to properly render the icon.• Safari 1.2 information pending… | ||||||
resizeDenote how an element can be resized.» Test Page | No | No | No | No | No | |
contentOverwrite content of an element.» Test Page | No | No | No | No | Yes | |
In CSS2, content could only be applied to before or after the element. In CSS3 you can assign content to the element itself. | ||||||
text-shadowApply shadows to text (obviously)» Test Page | No | No | No | Yes | No | |
A compatibility table of new background properties.
| Declaration | IE 6 | Firefox | Mozilla | Safari 1.2 | Opera | |
|---|---|---|---|---|---|---|
background-clipShould the background go into the padding and border areas?» Test Page | No | No | No | No | No | |
background-sizeSpecify a size for the background.» Test Page | No | No | No | No | No | |
background-quantityHow many times should the background image repeat?» Test Page | No | No | No | No | No | |
background-spacingSpecify a space between background images.» Test Page | No | No | No | No | No | |
| Selector type | Pattern | Description |
|---|---|---|
| Substring matching attribute selector | E[att^=”val”] | Matches any E element whose att attribute value begins with “val”. |
| Substring matching attribute selector | E[att$=”val”] | Matches any E element whose att attribute value ends with “val”. |
| Substring matching attribute selector | E[att*=”val”] | Matches any E element whose att attribute value contains the substring “val”. |
| Structural pseudo-class | E:root | Matches the document’s root element. In HTML, the root element is always the HTML element. |
| Structural pseudo-class | E:nth-child(n) | Matches any E element that is the n-th child of its parent. |
| Structural pseudo-class | E:nth-last-child(n) | Matches any E element that is the n-th child of its parent, counting from the last child. |
| Structural pseudo-class | E:nth-of-type(n) | Matches any E element that is the n-th sibling of its type. |
| Structural pseudo-class | E:nth-last-of-type(n) | Matches any E element that is the n-th sibling of its type, counting from the last sibling. |
| Structural pseudo-class | E:last-child | Matches any E element that is the last child of its parent. |
| Structural pseudo-class | E:first-of-type | Matches any E element that is the first sibling of its type. |
| Structural pseudo-class | E:last-of-type | Matches any E element that is the last sibling of its type. |
| Structural pseudo-class | E:only-child | Matches any E element that is the only child of its parent. |
| Structural pseudo-class | E:only-of-type | Matches any E element that is the only sibling of its type. |
| Structural pseudo-class | E:empty | Matches any E element that has no children (including text nodes). |
| Target pseudo-class | E:target | Matches an E element that is the target of the referring URL. |
| UI element states pseudo-class | E:enabled | Matches any user interface element (form control) E that is enabled. |
| UI element states pseudo-class | E:disabled | Matches any user interface element (form control) E that is disabled. |
| UI element states pseudo-class | E:checked | Matches any user interface element (form control) E that is checked. |
| UI element fragments pseudo-element | E::selection | Matches the portion of an element E that is currently selected or highlighted by the user. |
| Negation pseudo-class | E:not(s) | Matches any E element that does not match the simple selector s. |
| General sibling combinator | E ~ F | Matches any F element that is preceded by an E element. |
If all that doesn’t make much sense right now, don’t worry. Each selector will be described in more detail in this article, and there are examples of how each selector can be used.
This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.
Assume that you have an HTML document that contains the following markup structure:
By using the substring matching attribute selectors you can target combinations of these structural parts of the document.
The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^="nav"] { background:#ff0; }In this case the selector will match div#nav-primary and div#nav-secondary.
To target the div elements whose id ends with “primary”, you could use the following rule:
div[id$="primary"] { background:#ff0; }This time the selector will match div#nav-primary and div#content-primary.
The following rule will apply to all div elements whose id contain the substring “content”:
div[id*="content"] { background:#ff0; }The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.
The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, and Opera, so if it wasn’t for Internet Explorer we could start using them now.
URLs with fragment identifiers (an octothorpe, “#”, followed by an anchor name or element id) link to a certain element within the document. The element being linked to is the target element, and the :target pseudo-class makes it possible to style that element. If the current URL has no fragment identifier, the :target pseudo-class does not match any element.
Assuming the HTML structure mentioned earlier in this document, the following rule would put an outline around div#content-primary when the URL contains that fragment identifier:
div#content-primary:target { outline:1px solid #300; }An example of such an URL is http://www.example.com/index.html#content-primary.
The :target pseudo-class is currently supported by browsers based on Mozilla and Safari.
The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. The following rules will apply different background colours to single line text inputs depending on whether they are enabled or disabled:
input[type="text"]:enabled { background:#ffc; }input[type="text"]:disabled { background:#ddd; }The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. This CSS rule will apply a green border to checked radio and checkbox elements:
input:checked { border:1px solid #090; }The UI element states pseudo-classes are currently supported by Opera and browsers based on Mozilla.
Note that many web browsers restrict how much the appearance of form controls can be changed by web developers. More on that subject is available in my articles Styling form controls and Styling even more form controls.
The structural pseudo-classes allow developers to target elements based on information that is available in the document tree but cannot be matched by other simple selectors or combinators. The structural pseudo-classes are very powerful, but unfortunately current browsers only support a few of them.
The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element, which means that the following two rules are the same (well, almost - :root has a higher specificity than html):
:root { background:#ff0; }html { background:#ff0; }The :root pseudo-class is currently supported by browsers based on Mozilla and Safari.
The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula.
A number b matches the b-th child. The following rule applies to all p elements that are the third child of their parent element:
p:nth-child(3) { color:#f00; }The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element:
p:nth-child(odd) { color:#f00; }The following rule matches p elements that are the second, fourth, sixth, and so on, child of their parent element:
p:nth-child(even) { color:#f00; }The formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. Understanding how this works is easier when you look at a few code examples, so let’s do that.
The following rules will match all p elements whose index is a multiple of 3. In the first rule, b is zero and could have been omitted, as in the second rule:
p:nth-child(3n+0) { color:#f00; }p:nth-child(3n) { color:#f00; }The offset value can be used to define at which child a repeating rule starts to apply. If you have a data table with 20 rows and want every odd row after the tenth row to have a different background colour, you can use this rule:
tr:nth-child(2n+11) { background:#ff0; }Since n starts at 0, the first tr element to be affected is the 11th. Next is the 13th, then the 15th, and so on.
More details are available in the :nth-child() pseudo-class section of the CSS 3 Selectors specification.
So, what about browser support for this very useful selector? Not good at all. As far as I can tell, no browser supports this or any of the other “nth” selectors. Please correct me if you know otherwise.
The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. The following rule will match the second-to-last tr element of a table:
tr:nth-last-child(2) { background:#ff0; }The :nth-last-child() pseudo-class is currently not supported by any browsers.
The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. This rule will match every p element that is the third p element of its parent:
p:nth-of-type(3) { background:#ff0; }This can be useful if you want to make sure that you are really targeting the third p element. At first you might think that you could just as well use the nth-child pseudo-class, but :nth-child(3) will take all sibling elements into account, so the result will be different unless all p elements only have siblings that are also p elements.
The :nth-of-type() pseudo-class is currently not supported by any browsers.
The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. The following rule will match each second-to-last sibling of type p:
p:nth-last-of-type(2) { background:#ff0; }The :nth-last-of-type() pseudo-class is currently not supported by any browsers.
The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). This rule will match all p elements that are the last child of their parent element:
p:last-child { background:#ff0; }The :last-child pseudo-class works in browsers based on Mozilla. It is not supported by Opera and is buggy in Safari (the above rule matches all p elements in the document). Surprisingly it works as expected in OmniWeb (tested in version 5.1.1), despite that browser being based on Safari. That could be caused by a regression in the latest version of Apple WebKit, since OmniWeb is usually built on a slightly older version of WebKit than what Safari is using.
The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1).
p:first-of-type { background:#ff0; }The :first-of-type pseudo-class is currently not supported by any browsers.
The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1).
p:last-of-type { background:#ff0; }The :last-of-type pseudo-class is currently not supported by any browsers.
The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth-last-child(1).
p:only-child { background:#ff0; }The :only-child pseudo-class works in browsers based on Mozilla. Safari seems to interpret it as :first-child (the above rule matches all p elements in the document that are the first child of their parent element).
The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1).
p:only-of-type { background:#ff0; }The :only-of-type pseudo-class is currently not supported by any browsers.
The :empty pseudo-class targets an element that has no children. That includes text nodes, so of the following elements, only the first is empty:
Text
The following CSS rule will match that first element:
p:empty { background:#ff0; }The :empty pseudo-class is currently supported by browsers based on Mozilla. Safari erroneously applies the rule to all elements of the given element type.
The negation pseudo-class, written :not(s), takes a simple selector as an argument. It targets elements that are not targeted by the simple selector. For example, the following CSS will target any element that is not a p element:
:not(p) { border:1px solid #ccc; }The negation pseudo-class currently works in browsers based on Mozilla and Safari.
The ::selection pseudo-element matches the portion of an element that is currently selected or highlighted by the user. One possible use for this would be to control the appearance of selected text.
Only a few CSS properties apply to ::selection pseudo-elements: color, background, cursor, and outline.
The following rule will make the foreground colour of a selection red:
::selection { color:#f00; }The ::selection pseudo-element currently only works in browsers based on Safari. The behaviour is a bit unpredictable, so the Safari implementation needs a bit of improvement. Mozilla based browsers support it if you use a -moz- prefix: ::-moz-selection. The prefix will probably be removed eventually.
The general sibling combinator consists of two simple selectors separated by a “tilde” (~) character. It matches occurrences of elements matched by the second simple selector that are preceded by an element matched by the first simple selector. Both elements must have the same parent, but the second element does not have to be immediately preceded by the first element. This CSS rule will target ul elements that are preceded by a p element with the same parent:
p ~ ul { background:#ff0; }The general sibling combinator is currently supported by Opera and browsers based on Mozilla.
Some CSS 3 selectors are widely supported. Unfortunately, some of the most useful selectors are either not supported at all or have very limited support in current browsers. That makes many of the selectors described in this article more or less useless on today’s web. Don’t be afraid to experiment though. You can still use those that are supported to provide forward enhancement to advanced browsers.
So, which browser do you think will be the first to support most or all CSS 3 selectors? Safari, Firefox, or Opera? Or maybe even Internet Explorer?
CSS3 defines three more attribute selector variations. These new selectors give us the ability to make partial matches to attribute values—we can match strings at the start, end, or anywhere within an attribute value.
We can use the ^= operator to cause an attribute selector to match elements that have an attribute containing a value that starts with the specified value:
a[href^="http:"] {
⋮ declarations
}This example matches a elements that have an href attribute value which starts with the characters "http:".
Using the $= operator, an attribute selector can match elements that have an attribute which contains a value ending with the specified value:
img[src$=".png"] {
⋮ declarations
}This example matches img elements with a src attribute value that ends with the characters ".png".
Finally, we can use the *= operator to make an attribute selector match elements that have an attribute which contains the specified value:
div[id*="foo"] {
⋮ declarations
}This example matches div elements whose id attribute value contains the characters "foo".
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | None | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Buggy |
| 9.5 | Full |
CSS3 provides many more pseudo-classes than CSS2. Though browser support for them is varied, it is improving.
The new features allow greater control of the background element and will provide designers with a whole array of new possibilities.
Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.
The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:
.backgroundsize {
background: url(http://www.designshack.co.uk/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}
The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.
The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.
.multiplebackgrounds {
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}
CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.
There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.
Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.
CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear.
At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.
There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:
At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:
.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}
It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:
h2 {
column-span: all
}
Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:
It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.
Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.
The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the resize:both; line:
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}
The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:
.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}
.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}
Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:
They can be created as follows:
.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}
These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.
CSS is already reasonably versatile in the way in which text can be displayed, but still constricts design in quite a few areas. CSS3 goes some way towards removing those limitations.
Text shadows sound a little tacky, but it all depends how they are executed. When experimenting for this article I found some combinations to look terrible, and some to give an attractive, subtle effect. Shadows could definitely be put to good use in headings and titles – there are some great examples of their use at Matthias Kretschmann’s blog.
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}
At present, if a word is too long to fit within one line of an area, it expands outside. This isn’t a very common occurrence, but does crop up from time to time. The new word wrapping ability allows you to force the text to wrap – even if it means splitting it mid-word. The code is incredibly straight forward:
.text_wrap {
word-wrap: break-word;
}
Whilst these are not classed as a ‘text effect’, we are going to cover them here briefly. A Web Font is simply a way to use any font in your page, being downloaded automatically by the browser. This will be a revolutionary change to web design, which previously has been limited to 10-15 widely supported fonts. However, this new feature brings bring copyright into debate as only properly licensed fonts should be used.
Currently, the latest version of Safari (3.1) is the only browser supporting Web Fonts. Opera is suggested to be another which will soon be enabling support, and the others will no doubt follow at some point in the future. An example of how this could be achieved would be:
@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.co.uk/fonts/font.ttf');
}
A few examples of pages have been mocked up using this technique. The following are examples in the vein of CSS Zen Garden, created by A List Apart. The linked versions will only work on certain browsers:
Many of the missing features of CSS2 have been rectified in this update. This article doesn’t cover all the additions in terms of text – if you’re interested, you can read more about the text module. All these additions are great when used in a subtle way, enhancing the typographic layout of the page.
CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.
Achieving rounded borders using current CSS coding can be tricky – there are numerous methods available, but none are extremely straight forward. Creating individual images for each border is often needed in addition. Using CSS3, creating a rounded border is incredibly easy. It can be applied to each corner or individual corners, and the width/colour are easily altered. The CSS code is:
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}
Gradient borders can look effective if used correctly. This code is a little more complex, requiring you to define each colour of the gradient. The CSS code is:
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}
Adding a shadow to an element is difficult at present – it is a good way to differentiate a certain area, but as with any effect, it should be used sparingly. The CSS code is:
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}
Border images are one of the most useful additions – I’m really looking forward to discovering how people choose to use them. CSS has the ability to repeat, or stretch a border image as you choose. The CSS code is similar to the following (it varies between browsers at present):
.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}
Borders are revolutionized! These additions in CSS3 are bound to save you a huge amount of time as a designer. They go a long way towards simplifying layouts and allow you to create visually appealing boxes without even opening Photoshop.
CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes.
The development of CSS3 is going to be split up into ‘modules’. The old specification was simply too large and complex to be updated as one, so it has been broken down into smaller pieces – with new ones also added. Some of these modules include:
Several of the modules have now been completed, including SVG (Scalable Vector Graphics), Media Queries and Namespaces. The others are still being worked upon.
It is incredibly difficult to give a projected date when web browsers will adopt the new features of CSS3 – some new builds of Safari have already started to.
New features will be implemented gradually in different browsers, and it could still be a year or two before every module is widely adopted.
Hopefully, in a mainly positive way. CSS3 will obviously be completely backwards compatible, so it won’t be necessary to change existing designs to ensure they work – web browsers will always continue to support CSS2.
The main impact will be the ability to use new selectors and properties which are available. These will allow you to both achieve new design features (animation or gradients for instance), and achieve current design features in a much easier way (e.g. using columns).
Posts
All Comments
