Skip to main content

effect using pure css & jQuery

14 jquery and CSS demos
Whether sliding, Pagescrolling, a Lightbox pop-ups or Drag ‘n Drop Effects, jQuery provides plenty of opportunities to implement virtually any requirement for a matching feature.
Today I have collected 14 demos of jquery and css ,I wish I knew them before. Just go through the list you will surely love it.

1. Aything Slider

2. Contactable

3. Display Switch

4. Fly To Basket

.

5. Feature List

.

6. Accordion

.

7. Fading Caption Thumbnail

.

8. Hover shift

.

9. Simple Slide Panel

.

10. Animated Hover

.

11. Fade In Fade Out

.

12. CSS Sprite way sexy bookmark effect

.

13. Content Scroll – Lightest ever

.

14. Sexy Dropdown

via http://www.webdeveloperjuice.com/2010/01/14/14-jquery-and-css-demos-i-wish-i-knew-much-before/

Let me have a blog: haccordion, a simple horizontal accordion plugin for jQuery

haccordion, a simple horizontal accordion plugin for jQuery

I need one menu with horizontal accordion, but the plugins that I have looked doesn’t like me, too much requirements or code, really I need something more simple, so in few minutes I write a simple plugin.

v0.1

It is very simple, with a few parameters: speed set the velocity of the animation, headerclass set another classname for header divs (by default “header”), contentclass set another classname for content divs (by default “content”), contentwidth is the final with of each content panel.

code & script & demo at:  Let me have a blog: haccordion, a simple horizontal accordion plugin for jQuery.

+

Horizontal Accordion script

Description: This script turns an ordinary UL list into a horizontal accordion! Move your mouse over a LI to expand it side ways while contracting its peers. The HTML markup of the Accordion (UL list) can either be defined inline on the page, or inside an external file instead and fetched via Ajax. Plus you can specify which LI should be expanded by default, whether to persist the last expanded LI (within a browser session), and also, expand a particular LI by passing in different parameters into the URL string. All this makes for a versatile, smooth horizontal accordion!

Demo #1- One content always open, persistence of last expanded content enabled:

http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

Example of div-based three-column web page layout

CSS Sheet
body{padding: 0; margin: 0; background: #fff; }

h2{margin: 0; font: bold 18px Arial, Helvetica, sans-serif; color: #000;}

p{font: normal 12px Arial, Helvetica, sans-serif; color: #000;}

#header{width: 780px;  padding: 10px; margin-left: auto; margin-right: auto; background: #ffc;}

#navbar{ width: 780px; padding: 10px; margin-left: auto; margin-right: auto; background: #fc0;}
#navbar ul{list-style: none;}
#navbar li{ display: inline; padding-right: 4%;}
#navbar a:link,#navbar a:visited{font: normal 12px Arial, Helvetica, sans-serif; color: #039; text-decoration: none;}
#navbar a:hover{text-decoration: underline;}
#mainwrapper{width: 800px; margin-left: auto; margin-right: auto;}
#col1{float: left; width: 180px; padding: 10px; background: #eee;}
#col2{float: left; width: 375px; padding: 10px;}
#col3{float: right; width: 180px; padding: 10px;  background: #eee;}
#footer{clear: both;  width: 780px;  padding: 10px;  margin-left: auto; margin-right: auto;  background: #ffc;}

div

Align bottom in float-based CSS column layout – Userland

Creating the valign=”bottom”  effect with CSS  as float:bottom does not exist

Some things are easier to do with tables than CSS, but there’s always a way to get it done. Here’s how to bottom align a section in a float-based columns context.

Given the following markup, we might be told to have #main and #sidebar side by side and the #contact section appear in the sidebar but all the way down.

<div id="content">
	<div id="main">
		Body text
	</div>
	<div id="sidebar">
		<div id="nav">
			Navigation UL
		</div>
		<div id="contact">
			Contact info
		</div>
	</div>
</div>

First, for our #main and #sidebar divs to stand by side by side, we can simply float them:

#main {
	float: left;
	width: 62%;
}
#sidebar {
	float: right;
	width: 36%;
}

The trick is now to create a positioning context of #content div in which we can position #contact absolutely.

#content {
	position: relative;
}
#contact {
	position: absolute;
	bottom: 0;
	right: 0;
}

The problem, for now, is that being floated or absolutely positioned, #main and #sidebar don’t take up any space in #content, which is therefore as flat as can be. We’ll need to add something inside #content that will clear floats, either through CSS (using content) or in HTML (because IE doesn’t support generated content). Change your markup to:

<div id="content">
	<div id="main">
		Body text
	</div>
	<div id="sidebar">
		<div id="nav">
			Navigation UL
		</div>
		<div id="contact">
			Contact info
		</div>
	</div>
	<div class="clearall"></div>
</div>

This should work for most modern browsers, however IE’s CSS implementation is a mess and the floats used in this situation can trigger the peekaboo bug. To avoid this, giving hasLayout to #content solves the problem because it gives it the ability to properly hold its floats. Since this is only needed for IE, this declaration should be hidden using the Holly Hack:

* html #content {
	height: 1%;
}

Giving #content a height won’t hide its contents because IE will (incorrectly, according to the spec) expand it to fit whatever is inside.

That’s it! View source on the demo I set up for all the CSS that is needed. Tested and approved on Firefox, Opera and IE (5 to 7).

Update (July 9th, 2008)

In reply to Petr’s comment, I’ve added another demo where the sidebar items should not overlap. This is achieved by adding a margin-bottom to #sidebar that’s equal to the maximum height of the bottom item. Tested and rendering correctly in IE 5 to 7, Firefox

A big thanks to

L’auteur

Goulven Champenois

Ce blog est tenu par Goulven CHAMPENOIS, développeur web vivant à Lyon, en France.

Mon Profil Viadéo

CSS Resources

Recent Great Reads and Resources: The CSS Edition

350 Great CSS Tools and Techniques

350csstools.png Abduzeedo.com has collected the best of the CSS posts they have bookmarked and put them in to one post, which makes for a great CSS resource. Worth browsing for new great articles or reminders of ones seen but worth seeing again.

350 Great CSS Tools and Techniques »

April 8, 2009 in CSS Resources

100+ Massive CSS Toolboxc

100csstoolbox.png Site tripwiremagazine.com has a great big round-up of CSS resources and tools, not many of which are “new” but bookmarkworthy for the large amount of them in one place. Worth a browse.

100 Massive CSS Toolbox »

April 4, 2009 in CSS Resources

Design Reviver

cssimagemap.png Design Reviver has a great article looking at CSS Image Map techniques and pointing to some great tutorials for learning how to do them with just CSS.

CSS Image Map Techniques and Tutorials »

March 26, 2009 in CSS Resources

Styleneat CSS Organizer

Always wanted to sort your css properties alphabetically but never had the time? Styleneat CSS organizer can do that and more. Simply upload, paste in or link to your stylesheet and sort alphabettically or in single/multi-line format.

Styleneat – CSS Organizer »

March 25, 2009 in CSS Resources

5 Popular CSS Frameworks, Tutorials and Tools

Site noupe.com has a great article that takes a look at five of the most popular CSS Frameworks and includes some resources for learning more about using them. Definitely worth a read.

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.

5 Popular CSS Frameworks Tutorials & Tools for Getting Started » (noupe.com)

February 2, 2009 in CSS Resources

More CSS Cheat Sheets and Lotsa Web Dev Links

All Web Design Resources has a big round-up of CSS Cheat Sheets worth browsing for CSS beginners.

30 CSS Cheat Sheets & Quick Reference Guides.

Also worth a look, this really big list of web dev links from Web Designer Heaven. You’ll find lotsa links for things such as fonts, stock photography, cheat sheets, color tools, patterns, icons, tutorials and more! Bookmark worthy.

December 11, 2008 in CSS Resources

15 CSS Tricks that Must be Learned

15csstricks.png

From blog In The Woods, a round-up of valuable CSS tricks.

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

15 CSS Tricks That Must be Learned

November 30, 2008 in CSS Resources

BlueTrip CSS Framework

Site Capsize Designs takes the best of all the CSS Frameworks and rolls them into a new one calle BlueTrip.

I searched everywhere for every snippet of every framework I could find. I’ve tried 960.gs, Blueprint, LogiCSS, YAML, Elements, YUI, and Boilerplate, among a few others. I even discussed the pros and cons of each of them. Finally, I decided to combine the good points of each of them to get something that I was satisfied with. Since most of it came from BlueprintCSS or Tripoli, I’m calling it BlueTrip. Why not?

BlueTripCSS Framework – Blueprint meets Tripoli

November 10, 2008 in CSS Resources

CSS Typography: Contrast Techniques, Tutorials and Best Practices

From noupe.com a nice round-up of css typography tips, tricks and tutorials.

The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and below you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites.

CSS Typography: Contrast Techniques, Tutorials and Best Practices

September 15, 2008 in CSS Resources

5 Nice CSS Articles

1. Site Monday by Noon has a nice article that looks at CSS organization methods and writing style.

I’d like to cover some common techniques for writing CSS. This article is in no way meant to indicate that method A is in any way, shape, or form superior to method B. Please keep that in mind as you read. Topics such as this tend to spark quite the debate, but that’s not my goal. The purpose of this article is to provide insight to other ways of doing things.

CSS Organization Methods and Writing Style (Monday By Noon)

2. From nimbupani.com, learn how to write CSS without hacks. (nimbupani.com)

3. Learn how to achieve pixel precision when converting from a Photoshop PSD to html/css using this diagnostic css trick.

Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness.

Pixel Precision with Diagnostic CSS (aloestudios.com)

4. Neal Grosskopf.com looks at hacks that work with various browser for when you absolutely need to use them.

CSS Browser Hacks for Firefox, Opera, Safari and Internet Explorer (nealgrosskopf.com)

5. Site From Scratch shares a handy text file to ensure that all html elements have been styled. Simply load up the html file with your own css file and test it in a browser. Handy file to have on hand.

When ever I design templates I always try to ensure that all of my HTML elements are styled properly. It’s very easy to forget element and to see how they look. I’ve tried to create a test file with all the code you will need to be concerned about on a basic level.

HTML XHTML for CSS Testing (Site From Scratch)

September 1, 2008 in CSS Resources

20 Sites to Help You Learn and Master CSS

Site Six Revisions has a round-up of CSS resources that will help a beginning CSS coder learn and a more experienced CSS coder master.

CSS can be both a tricky and easy to learn. The syntax itself is easy, but some concepts can be difficult to understand. This article features 20 excellent websites to help you “grok” CSS. There’s a wide range of websites included – from blogs to directory-style lists and websites that focus on one particular topic related to CSS.

20 Websites To Help You Learn and Master CSS (Six Revisions)

August 31, 2008 in CSS Resources

10 Principles of the CSS Masters

NetTuts has a great article today, highlighting advice from 10 CSS Masters.

When it comes to CSS, there are lots of resources and supposed “expert tips” on the web. … Instead of relying on unknown sources for advice, let’s look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet.

10 Principles of the CSS Masters

August 26, 2008 in CSS Resources

The Lessons of CSS Frameworks

Adactio.com has a great article today, taking a look at CSS Frameworks and disecting their various settings. Based on an presentation from Eric Meyer, it’s well worth a read.

Adactio: The Lessons of CSS Frameworks

August 20, 2008 in CSS Resources

3 Nice CSS Resources Links

From Hidden Pixel,s a round-up of the current crop of CSS Frameworks. CSS Frameworks – Hidden Pixels.

A nice article from NETTUTS, detailing some common CSS problems and how to solve them. How to Solve 5 Common CSS Headaches.

CSS Round, creates a text box with rounded corners for you. Customizable and download the completed zip file containing html, css and images.

via CSS Resources | etc: a stream of web dev and design consciousness.

CSS Layout: A collection of 224 Grid and CSS Layouts

Full Main Column Layouts

1/2 x 1/2 Main Column Layouts

160 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


180 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


300 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


180 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


240 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


300 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


Full

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


1/4 x 1/4 x 1/4 x 1/4 Main Column Layouts

160 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


180 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


300 Px Left

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


180 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


240 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


300 Px Right

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width


Full

100% Fluid
974 Px Fluid
950 Px Width
750 Px Width

via CSS Layout: A collection of 224 Grid and CSS Layouts.

CSS Cheat Sheets etc

CSS and HTML Cheat Sheets

There’s a lot of cheat sheets available for CSS, html and any other web technology. I have picked a few that I believe stand out because they are able to assist you remebering important elements of key web technologies or because they are really well structured.

Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to help and reference.

CSS2 Cheat Sheet

This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.

css-cheat-sheet

Gosquared CSS help sheets

Good looking and well structured CSS overview

CHEAT_SHEETS

addedbytes CSS2 Cheat Sheet

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

addedbytes

Core css

All you need to know about CSS in 3 parts. These documents go through all important aspects of CSS on a minimum number of pages.

core css

core css

CSS Shorthand Cheat Sheet

Get help with some of the CSS elements that are so easy to forget.

csscheatsheet

CSS2 – Quick Reference Guide – PDF

qrg0007

XHTML 1.1 Cheat Sheet

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

CHEAT_SHEETS

Gosquared html help sheets

Good looking and well structured html overview

CHEAT_SHEETS

HTML Cheat Sheet

The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDF PNG

CHEAT_SHEETS

HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

The HTML Character Entities cheat sheet is designed to act as a reference sheet, listing the various character codes in HTML. PDF PNG

CHEAT_SHEETS

HTML Character Entities Cheat Sheet

This cheat sheet contains a list of all of the HTML 4 character entities including ISO 8859-1 (Latin-1) entities. The characters are organized into 8 groups: Latin characters, Greek characters, numbers, puncutation and miscellaneous symbols, mathematical symbols, currency symbols, arrows and shapes, and spacing symbols.

Each character contains a unicode entity reference (e.g. &#160) as well as a named entity reference (e.g. &nbsp;) where available.

CHEAT_SHEETS

HTML Colors Cheat Sheet

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).

CHEAT_SHEETS

RGB Hex Colour Chart

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).

CHEAT_SHEETS

CSS getting started and reference resources

CSS Basics

Large getting started guide with verything you ever wanted to know about the basics of CSS

css-mega

Creating a CSS layout from scratch

This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.

csslayout

Webdesignfromscratch, CSS

Introduces most elements of we b development, including css.

css-megaShare Th

5 Simple CSS Tricks

A few really simple but essential tricks

css-mega

10 Principles of the CSS Masters

This is really essential tips from true css experts. A must read!

css-mega

CSS Specificity: Things You Should Know

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works.

css-mega

Solving 5 Common CSS Headaches

CSS is a relatively simple language to learn. Mastering it, on the other, can prove a little more difficult. Compensating for various browser inconsistencies alone can produce a migraine. In this article, we’ll demystify five of the most head thumping issues that you’ll encounter when building web applications.

css-mega

5 Ways to Instantly Write Better CSS

Sure, anyone can write CSS. Even programs are doing it for you now. But is the CSS any good? Here are 5 tips to start improving yours…

1. Reset, 2.Alphabetize, 3. Organization, 4. Consistency, 5. Start in the right place…

css-mega

How to Add Variables to Your CSS Files

Any designer who has worked with large CSS files will agree that its major weakness is its inability to use variables. In this article, we will learn how to implement variables by using PHP and Apache’s URL rewrite mod.

how-to-add-variables-to-your-css-files

15+ techniques and tools for cross browser CSS coding

Making your website compatible with a wide range of browsers is probably the hardest task of a front-end developer. To make your coder life easier, here is 15+ tools and techniques for crossbrowser CSS development.

slideshow

Throughout the guide, you will be shown cunning CSS techniques used to keep loadtime to a minimum and to organize and fine tune your content so it is presented in the best possible way.

csslicingguide

Page Layouts

Nice and Free CSS Templates

This site contains free css templates for your website – Just copy and paste and there you have a stunning website !

css-mega

Even more great layouts

If 53 fixed layouts were not enough here are some more both fixed and stretched layouts for ultimate flexibility. These 40 layouts are again completely CSS styled without any tables.

css-mega

Fixed Length CSS Layouts

42 free fixed length layouts ready for use

faux-css-layouts

Making web pages extend to the bottom of the window [1] [2]

If you ever made a web site with the content in a center column and a different background for the body, or with a short lateral navigation bar, probably you experienced the problem of some elements not extending to the bottom of the browser window when the height of the content is lesser than the document area of the browser window.

footerStickAlt

Layout Packs

Several common fluid-width layout frameworks. Demos: Fixed, Fluid / Fixed, Fluid, Fixed / Fluid, Fixed / Half and Half

css-mega

CSS Equal Columns Height

A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc…

CSS Positioning

CSS Centering – fun for all!

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

css-mega

Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS “Ah-ha!” Moments. I remember it being a big deal for me when I first “got it”.

absolute-positioning-inside

Learn CSS Positioning in Ten Steps

positioning

Faux Absolute Positioning

With faux absolute positioning, we can align every item to a predefined position on the grid.

fauxabsolutepositioning

Vertical align for navigation lists with multiple lines

Let’s see a quick tip for aligning vertically navigation lists that use the tipical floated box approach to display the list in a row, but that have several items displayed across multiples lines.

Vertical align for navigation lists with multiple lines

CSS and [Form] Elements

26 Essential Submit Button Enhancements

This article does not cover styling of image links that is closely realted to styling of submit buttons but usually used for menu navigation.

slideshow

Top 10 CSS buttons tutorial list

Buttons are a very important part of a website: They’re the most common way your visitors can trigger an action and interact with your website. Sadly, even theses days many web pages still displays ugly buttons. Here’s our “Top Ten” CSS buttons tutorial list, for giving your buttons, submits and links the beauty

css-mega

Prettier Accessible Forms

Form-styling solution that is both accessible and portable

Prettier Accessible Forms

CSS Typography

Advanced Typography techniques using CSS

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code.

advanced-typography-techniques-using-css

5 Advanced typography examples

All 5 are CSS based and demonstrate various techniques and looks including typewriter, fancy headlines, handwriting.

css-mega

Snook’s Resizable Underlines

The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself.

underlines_samples

Drop Cap – Capital Letters with CSS

css - Drop Cap - Capital Letters

Opacity Applied to Heading

Opacity Applied to Heading

Magazine StyleDROP CAPS

Magazine StyleDROP CAPS

Data Visualization Techniques

Accessible Bar Chart

  • Table headers are there but hidden using the aural text class discussed in a previous article. Sighted users have already received information on what the chart is about.
  • A bar is created using an image which is stretched to the appropriate size.
  • Bar widths are calculated relative to the largest value.
  • Value cells have a repeated background image which shows the vertical lines.
  • Browsing the chart without CSS or images will render an ordinary table.
  • Value labels can be hidden by using the aural text class.

Accessible Data Visualization with Web Standards

Creating a Graph Using Percentage Background Images

Here you use pre-made background images to shade in the appropriate data.

Accessible Data Visualization with Web Standards

CSS Bar Graphs

Use CSS to show nice looking bar graphs based on just div and span tags

css Bar Graphs

Definition List Bar Chart

Here you find two examples of styling lists into horizontal bar charts. Each definition list item is assigned a class that adjusts its width using percentage units.

Accessible Data Visualization with Web Standards

PHP and CSS- A Simple Graph

Easy way to display a simple percentage graph using PHP to work out the percentages and do the maths and CSS to display the data on our page.

Accessible Data Visualization with Web Standards

Pure Css Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?

Pure Css Data Chart

DHTML / CSS based bar graph

This vertical bar graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

graph

Pure CSS xhtml graph

This is simple bar-graph that shows data by month.

Pure Css Data Chart

CSS Vertical Bar Graphs

Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.

charts-daten-semantik-css

Pure Css Data Chart

Accessible Data Visualization with Web Standards

This simple technique just adds bars to a list of items behind the text (check out the finished example for an idea of what we’re shooting for). It works for lists of any length. Longer lists benefit from being sorted by count since the relative values of the bars are easier to read when they are sequential. In this example, we’re going to display the count for each item in the list, but you can leave that out if the value is less important on its own and you’re just showing the relative values for comparison.

Accessible Data Visualization with Web Standards

CSS Stacked Bar Graphs

There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So I’ve done it here. Based off Alen Grakalic’s Pure CSS Data Chart.

css-stacked-bar-graphs

Vertical Bar Graphs using CSS and PHP

Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.

Vertical Bar Graphs with CSS and PHP

Pure Css Line Graph

This technique takes structured html, replace text with images and by using css sprites and absolute positioning it creates a simulation of a line graph.

Pure Css Data Chart

Line Graph

Pure Css Data Chart

DHTML / CSS based line graph

This line graph is done completely using DHTML and CSS! Unlike an applet based solution, this loads fast and blends in with the rest of the page. You can even use a transparent background for it!

multigraph

CSS Scatter Plot

A scatter plot is a great way to graph two-dimensional data. Each data point is clickable in this solution.

Pure Css Data Chart

Pie Graph script

This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page. You can even use a transparent background for it!

piegraph

Dynamic Pie Chart with CSS

csspie

CSS Working with Images

Create Resizable Images With CSS

Want layouts that still work if a user increases their browser’s text size? Resize images in order to stay in proportion with the content.

Create Resizable Images With CSS

CSS Image Preloader

Visitors browsing at slow connections have to wait until large images load and they don’t have a clue something is missing — they see an empty block of space between two blocks of text. Image preloader will solve this issue.

preloader_demo

CSS image replacement for submit buttons

Using this method you’ll get a clickable image when style sheets are active, and a standard button when style sheets are off.

CSS image replacement for submit buttons

Link Thumbnail

A picture’s worth a thousand words, right? So spice up those plain old text links with Link

Link Thumbnail

Shapes with Css, Rounded Corners and more

CSS Curves

cssCurves

Mountaintop Corners

This example demonstrates the way that the CSS above sets the background images on either end of the box, while assigning a background color to shine through the transparent portions of the images.

mountaintop

Sparkline charts

Here are three techniques for incorporating data visualization into standards-based navigation patterns.

Sparkline charts

CSS Rounded Corners ‘Roundup’

This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it’s hard to know which one to choose.

css-mega

Fun With CSS Shapes

I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images.

fun-with-css-shapes

Easy CSS Pullquotes

Thechniques that help you create various types of Pullqoutes.

Easy CSS Pullquotes

Unobtrusive Sidenotes

Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs

Unobtrusive Sidenotes

CSS and Lists

CSS tricks for custom bullets

CSS tricks for custom bullets

Multi-Column Lists

How to produce a single, semantically logical ordered list that wraps into vertical columns.

Multi-Column Lists

Link List Block Hover

How to Create a Block Hover Effect for a List of Links

Link List Block Hover

CSS Print Page Tricks

Optimizing Your Website Structure For Print Using CSS

The secret to creating printable pages is being able to identify and control the “content area(s)” of your website. Most websites are composed of a header, footer, sidebars/subnavigation, and one main content area. Control the content area and most of your work is done. The following are my tips to conquering the print media without changing the integrity of your website.

Optimizing Your Website Structure For Print Using CSS

Improving Link Display for Print

How to insert the value of an anchor’s href attribute, in-line, after the text, slightly smaller and flanked by parentheses for printing web pages

Improving Link Display for Print

Optimizing Your Website Content For Print Using CSS

optimizing-content-print-css

Printing Web documents and CSS

This document describes some of the issues concerning the use of CSS to reformat Web documents for printing

Printing Web documents and CSS

CSS and Tables

Fun with tables

On this page I explain some of the new CSS declarations to be used with tables.

css-mega

CSS Grid Frameworks

45+ CSS Grid Systems, Layout Generators and Tutorials that every Designer should know

large collection of CSS Grid Systems, online generators and tutorial on how to use these in your design. Using a CSS Grid System is really worth considering if you’re planning to create a complex magazine web design. This article will give you the overview and tools you need to get started.

lightwindow

CSS Frameworks Roundup (and some thoughts)

Why use a framework? Besides saving time, there are lots of reasons: standardizing the organizational structure of your sites, avoiding dumb little mistakes, and browser compatibility. Sounds pretty compelling, but there are certainly reasons not to use them as well. For example, a framework might be too much for the site you are designing and it’s basically just unnecessary bloat. Another common argument against frameworks is that CSS and XHTML go hand in hand, they need to be designed and constructed together, so using pre-written CSS just isn’t an option.

css-mega

Prototyping With The Grid 960 CSS Framework

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.

prototyping-with-the-grid-960

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

WP_Query is a powerful tool to control what comes out of your loop. Today I’m going to teach you all how to use it to make a 3 columned newspaper theme that has all your main blog posts in the main column, and off to the side a set of posts with a certain category. We’ll be using the 960 CSS framework for the basic layout and reset of our theme, it will chop a lot of work off what’s needed!

build-a-newspaper-theme-with-wp

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

When Collis launched this site and asked readers for tutorial requests, a common one was for a “magazine themes” how-to for blog platforms. This tutorial focuses on the first part of the process: applying a CSS grid to the design to prototype a home page template.

blueprint-css-framework

CSS Grid Positioning Module Level 3

This module describes integration of grid-based layout (similar to the grids traditionally used in books and newspapers) with CSS sizing and positioning.

css3-grid

CSS 3 Resources

7 New Essential CSS 3 Techniques Revealed

This article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3.

css-mega

Tool tips

BoxOver

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. Move your mouse over the items below to see examples.

css-mega

CSS Navigation and Menus Tools

CSS Menu Generator (mycssmenu.com)

MyCSSMenu provides the average webmaster with tools to create custom, cross browser compatible css menu. Our generator makes it easy to create custom web navigation: Horizontal, Vertical, Drop-down menu without having to know all the complicated HTML and CSS. If you are a more experienced web developer we provide the sources code for all our CSS menus so that you can download, tweak, and integrate as much as you want. Feel free to use our CSS menu generator an unlimited amount of times.

css-mega

CSS Menu Generator (webmaster-toolkit.com)

Generates both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the effectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

css-menu-generator

The ULTIMATE CSS only drop-down menu

final_drop

CSS Candy Menu

Candy Menu is a stylish CSS drop down menu that’s comes in six provocative colors to get you started.

css_candy_menu

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. This will help focus the users attention on the item they have selected on, and create a new look and feel for the site overall. Want to see it in action? Look at my demo page before we start.

3point7designs

Vertical menu designs

v-menudesigns

Howto Create CSS menus

testMenu

Using Sliding Doors with WordPress Navigation

sliding-doors-wordpress-navigation

CSS Tabs Menu with Dropdowns

dave-woods

Advanced CSS Menu

Webdesignerwall

Animated horizontal tabs

animated_horizontal_tabs

A flyout menu with breadcrumb trail

breadcrumb

A CSS only validating flyout menu

flyoutt

Three up two down vertical flyout

three-up-two-down

A flyout menu with FOUR sub levels, overlap and overrun.

flyout_4level

CSS graphic menu with rollovers

cssmenu

CSS Sprite Navigation Tutorial

navbar_example

cross-browser drop-down cascading validating menu

dd_valid2

Variations on a drop-down theme

drop_variation

CSS Menu – Horizontal/Vertical

cssmenus

11 CSS Navigation Menus

cssmenus2

CSS Mini Tabs (the UN-tab, tab)

minitabs

14 Vertical CSS Menus

EBmenus

CSS Tabs

css-tabs

Horizontal menu, top to bottom

htb

Hybrid CSS Dropdowns

hybrid

Flexible navigation example

Flexible-navigation

Navigation matrix reloaded

nav_matrix

CSS only flyout menu with transparency

flyout_horizontal

CSS only flyout/dropdown menu

fly_drop

19 Horizontal menu designs

h-menudesigns

Multiple Levels

mul-menudesigns

CSS Code Cleaner Tools

Clean CSS

A tool to optimize and format your CSS. Note that your code should be well-formed. This isn’t a validator which points out errors in your CSS code.

css-mega

Styleneat

This tool can really make your come more neat!

styleneat

CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two.

csscompressoradvanced

CSSTidy

CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.

Tabifier

A tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and C Style code; the latter being anything that uses curly braces to start and end blocks, and semicolons to terminate statements. JavaScript and PHP both fall into that latter category.

tabifier

CSS Beautifier

Offers a variety of options, among them – Style Rule Settings, Style Property Settings, Alphabetizing Feature and De-Capitalization Feature.

FormatCSS

CSS Formatierer und Optimierer

Based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.

Postable

“I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.

Postable

CSS Tools

CSS Creator

Creates a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

CSS-ayout-Generator

CSS Colors Palette Generator

Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

imagepalette

CSS Color Chart

This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palettes with either HTML or CSS. Click on the color code to select it, then you can copy and paste it. Click on the Toggle button to convert from Hex to RGB and back. The charts are printed in tabular fashion so you can narrow your browser window with the palette and compare the colors to your design side-by-side.

I Like Your Colors!

A tool to extract the colors from the HTML and CSS of any web site. Compare the colors easily using hue groups.

I-Like-Your-Colors

CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.

cssfly

Time Saving CSSEdit Tips

CSSEdit is another fantastic web dev app, which takes Apple’s WebKit by the reigns to deliver a fantastic real-time visual CSS editing experience. But that’s just it! People only know it as a visual CSS editor, when it is actually much more! I use these 5 fantastic tips to keep my work flow fast and smooth.

5-time-saving-cssedit-tips

Accessible Form Builder

form-builder

List-O-Matic

List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go – it’s child’s play!

list-o-matic

Markup Maker

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML/HTML document (scaffolding, if you like). Now includes HTML5 support

markup-maker

CSS Mate

CSS Mate is an online CSS editor.

cssmate

Spanky Corners

‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

spanky

CSS Rounded Box Generator

A tool to generate HTML and CSS for rounded corner boxes.

css-rounded-box

Online CSS style editor.

cssdesigner

CSS HTML PHP Website Template Maker

A PHP/HTML/CSS template generator that creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is a combination of several files i.e. this is a true PHP, html, CSS template that makes it easy to control multiply pages at a web site.

maketemplate

Page Maker – The Generator Form

CSS Source Ordered Variable Border 1-3 Columned Page Maker

pagemaker_form

Firdamatic

An online tableless layout generator that allows you to create and customize layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only .

firdamatic

Free CSS Template Code Generator

Yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look of an entire site.

csstemplate

CSS Form Code Make

HTML/CSS form generator that creates a nice looking layout for forms. Add a ‘little color’ to the forms.

CSSFormCodeMaker

Related posts

  1. 40 Must Have Cheat Sheets for effective Web Designers As a follwoup on the article 40+ Essential Front…
  2. 185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat Sheets In this article you will get access to one…
  3. 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes When designing a website, a poster, a logo etc.,…
  4. 50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections CSS3 is introducing loads of new and exciting functions…
  5. 50+ Cheat Sheets for Building WordPress Themes and Plugins WordPress needs no introduction. It powerful, highly popular and…

via 155+ Mega CSS Roundup of Tools, Tutorials, Cheat Sheets etc. | tripwire magazine.

WP SexyLightBox « WordPress Plugins

WP SexyLightBox

This plugin will add SexyLightBox to all the images in your blog, as long as they’re linking to the image file, it’s not necessary to add “rel=lightbox” anywhere, the plugin does it for you.

Download

via WordPress › WP SexyLightBox « WordPress Plugins.

jQuery Colorbox

Yet another Colorbox plugin for WordPress.

When adding an image to a post or page, usually a thumbnail is inserted and linked to the image in original size. All images in posts and pages are displayed in a layer when the tumbnail is clicked. Images are grouped as galleries when linked in the same blog post or page.

Images can be excluded by giving them a special CSS class.

Download