Feb 29
Tagged in: CSS, jquery Comments:
This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.
Note: the version used in this article is jQuery 1.2.3
View jQuery Demos
Download Demo ZIP
Delicious
Stumbleupon
Digg
Jan 17
Tagged in: CSS, design Comments:
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.
View Demos
Download Demo ZIP
Delicious
Stumbleupon
Digg
Dec 07
Tagged in: CSS Comments:
by: Chris Coyier
In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it’s list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.
View Demo Expandable Box
Download Demo ZIP
Delicious
Stumbleupon
Digg
Oct 29
Tagged in: CSS Comments:
Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.
View Demo CSS menu
Download Demo ZIP
Delicious
Stumbleupon
Digg
Jul 29
Tagged in: CSS, design Comments:
This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
Preview double quotes
Download HTML file
Delicious
Stumbleupon
Digg
Jul 23
Tagged in: CSS, design Comments:
By default, most browsers display the ordered list numbers same font style as the body text. 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.
Preview samples
Download HTML file
Delicious
Stumbleupon
Digg
Loading ...