CSS Mathematical Functions
Category: CSS Expert Ideas | 949 views | Add a Comment |
Most of us have come across a piece of CSS code for which we thought, “This would be much easier if I could just subtract X number of pixels,” or “This solution would be easier if I could just add X% onto this DIV.”
Without this simple math for CSS, most of us have found workarounds to many of these problems. But by implementing simple mathematical functions in CSS, we can eliminate extra code and make our thought process easier. Read more…
- No Related Post
Smarter CSS Shortcuts
Category: CSS, CSS Expert Ideas | 1,030 views | Add a Comment |
A much-wanted feature in future versions of CSS is to be able to use alternative and smarter shortcuts to shorten CSS code. Some of these are already being implemented in alternative CSS languages, but the new CSS 3 has no sign of this. With greater support, perhaps basic CSS could become smart enough to handle these shortcuts in another 10 or so years, when CSS 4 is introduced.
To see the benefit anyway, let’s look at a few examples in which smarter shortcuts would be beneficial.
When many elements from a certain class or ID share the same properties, things can get a bit repetitious:
- #navigation h1, #navigation h2, #navigation h3{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
Smarter syntax would tighten things up, saving both time and space in the style sheet:
- #navigation [h1,h2,h3]{
- font-family: Verdana, Tahoma, sans-serif;
- letter-spacing: -1px;
- }
As most of us know, styling links in CSS can be a huge hassle. Nesting these elements, as shown above, is a great solution, but a smarter syntax for dealing with pseudo-classes would also be good: Read more…
- No Related Post
100 CSS Examples and Tutorials
Category: CSS, CSS Expert Ideas | 1,349 views | 3 Comments |
Navigation
Perfect pagination style using CSS- This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.
Styling Lists
The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer’s arsenal. This article is a tutorial and a tribute to the amazing <li>.
So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series.
Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own!
Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list.
- Live DemoView it Here
- Download zip file
List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format.
- Live DemoView it Here
Forms and Form Elements
Datasheet-style form using HTML and CSS- Make a datasheet-style web form using HTML, CSS and JavaScript with multiple similar records,
Styling File Inputs with CSS and the Dom - File inputs (<input type=”file” />) 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. Read more…
- CSS Tips
- Organizing Your CSS Files
- 150 CSS Examples
- Top CSS Tips
- Introduction to CSS3
- Margins and Absolute Positioning
- Top reasons sites break in IE 7
- Write a Clean CSS
- How to design css sitemap Tree
- Top 10 CSS Tips
150 CSS Examples
Category: CSS, CSS Expert Ideas | 2,667 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
- CSS3 Multi Column Feature
- How to design css sitemap Tree
- CSS Universal (*) Selector
- Introduction to CSS3
- How to create Rounded Corners Using CSS without Images
- Explaining CSS Positioning
- Top CSS Best Hacks
- Which CSS Propertise using in Email Templates
- Variables in CSS?
- What it’s all about CSS3
Top 100 CSS Techniques
Category: CSS, CSS Expert Ideas | 676 views | Add a Comment |
CSS Rounded Corners
Rounded corners is one of the most popular and frequently requested CSS techniques. There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. Here are easy ways to achieve this effect.
- Even More Rounded Corners With CSS- Single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you could want.
Demo :
- Rounded corners in CSS- Simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners.
- Liquid rounded corners- For liquid design and transparent scrolling - tutorial and stylesheet
- Mountaintop Corners- easier way for creating decent rounded corners.
CSS Sprites
CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.
- CSS Sprites: Image Slicing’s Kiss of Death- Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS-Tricks
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance- Learn how AOL and Yahoo! use CSS sprites to improve performance for their busy home pages
- No Related Post
HTML Character Sets
Category: CSS Expert Ideas | 232 views | Add a Comment |
ISO Character Sets
It is the International Standards Organization (ISO) that defines the standard character-sets for different alphabets/languages.
The different character-sets being used around the world are listed below:
| Character set | Description | Covers |
|---|---|---|
| ISO-8859-1 | Latin alphabet part 1 | North America, Western Europe, Latin America, the Caribbean, Canada, Africa |
| ISO-8859-2 | Latin alphabet part 2 | Eastern Europe |
| ISO-8859-3 | Latin alphabet part 3 | SE Europe, Esperanto, miscellaneous others |
| ISO-8859-4 | Latin alphabet part 4 | Scandinavia/Baltics (and others not in ISO-8859-1) |
| ISO-8859-5 | Latin/Cyrillic part 5 | The languages that are using a Cyrillic alphabet such as Bulgarian, Belarusian, Russian and Macedonian |
| ISO-8859-6 | Latin/Arabic part 6 | The languages that are using the Arabic alphabet |
| ISO-8859-7 | Latin/Greek part 7 | The modern Greek language as well as mathematical symbols derived from the Greek |
| ISO-8859-8 | Latin/Hebrew part 8 | The languages that are using the Hebrew alphabet |
| ISO-8859-9 | Latin 5 part 9 | The Turkish language. Same as ISO-8859-1 except Turkish characters replace Icelandic ones |
| ISO-8859-10 | Latin 6 Lappish, Nordic, Eskimo | The Nordic languages |
| ISO-8859-15 | Latin 9 (aka Latin 0) | Similar to ISO 8859-1 but replaces some less common symbols with the euro sign and some other missing characters |
| ISO-2022-JP | Latin/Japanese part 1 | The Japanese language |
| ISO-2022-JP-2 | Latin/Japanese part 2 | The Japanese language |
| ISO-2022-KR | Latin/Korean part 1 | The Korean language |
- No Related Post
XHTML Standard Event Attributes
Category: CSS Expert Ideas | 173 views | Add a Comment |
Standard Event Attributes
Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions.
<body> and <frameset> Events
The two attributes below can only be used in <body> or <frameset>:
| Attribute | Value | Description |
|---|---|---|
| onload | script | Script to be run when a document load |
| onunload | script | Script to be run when a document unload |
Form Events
The attributes below can be used in form elements:
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Script to be run when an element loses focus |
| onchange | script | Script to be run when an element change |
| onfocus | script | Script to be run when an element gets focus |
| onreset | script | Script to be run when a form is reset |
| onselect | script | Script to be run when an element is selected |
| onsubmit | script | Script to be run when a form is submitted |
Keyboard Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Script to be run when a key is pressed |
| onkeypress | script | Script to be run when a key is pressed and released |
| onkeyup | script | Script to be run when a key is released |
Mouse Events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Script to be run on a mouse click |
| ondblclick | script | Script to be run on a mouse double-click |
| onmousedown | script | Script to be run when mouse button is pressed |
| onmousemove | script | Script to be run when mouse pointer moves |
| onmouseout | script | Script to be run when mouse pointer moves out of an element |
| onmouseover | script | Script to be run when mouse pointer moves over an element |
| onmouseup | script | Script to be run when mouse button is released |
- No Related Post
HTTP Status Messages
Category: CSS, CSS Expert Ideas | 199 views | Add a Comment |
When a browser requests a service from a web server, an error might occur.
This is a list of HTTP status messages that might be returned:
1xx: Information
| Message: | Description: |
|---|---|
| 100 Continue | Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request |
| 101 Switching Protocols | The server switches protocol |
2xx: Successful
| Message: | Description: |
|---|---|
| 200 OK | The request is OK |
| 201 Created | The request is complete, and a new resource is created |
| 202 Accepted | The request is accepted for processing, but the processing is not complete |
| 203 Non-authoritative Information | |
| 204 No Content | |
| 205 Reset Content | |
| 206 Partial Content |
3xx: Redirection Read more…
- No Related Post
XHTML Standard Attributes
Category: CSS, CSS Expert Ideas | 226 views | Add a Comment |
The attributes listed below are standard, and are supported by all HTML and XHTML tags, with a few exceptions.
Core Attributes
Not valid in base, head, html, meta, param, script, style, and title elements.
| Attribute | Value | Description |
|---|---|---|
| class | classname | Specifies a classname for an element |
| id | id | Specifies a unique id for an element |
| style | style_definition | Specifies an inline style for an element |
| title | text | Specifies extra information about an element |
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements. Read more…
- No Related Post
home |
about | submit a site | tags | site map | contact us | rss
© CSS Examples 2008, All rights Reserved.






