A tutorial on how to create an animated 3d bar chart using CSS only.

lvi.org

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

SlidesJS is provided with limited support but if you find a bug please submit an Issue with a brief description of the bug and a link to where it can be reviewed.

For general support please visit the SlidesJS User Group.

SlidesJS is compatible with all modern web browsers and jQuery versions 1.4.4+.

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

Linked via: Veerle

"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.

Really short answer: SASS

Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.

Much longer answer: Read on.

Pastel is a unique, feature packed Dashboard with an intuitive and stunning interface.

Via: http://beautifulpixels.com/web/some-exceptional-css3-magic-on-this-ui/

There are very little details that are with me about this stunning piece of work, but before I get to that, I urge you to visit this URL and check out the beauty for yourself. Of course, we recommend a Webkit browser for this.

The site, apparently, is a demo of the Dashboard for an admin interface for something ‘Pastel’. There’s a lot going on there — a nifty growl-like notifications area, a text-editor with live Markdown previews, a section for UI elements, a photo montage, iPhone app preview and a location sandbox using Google Maps. There’s an excellent use of CSS3 and other beautiful elements throughout the site. Oh, and don’t forget to check out their 404 page.

If you know more about it, please let us know on Twitter @beautifulpixels.

Update: We’ve just been told that this beauty of an interface is available for purchase at ThemeForest. Thanks, @__edb.

Update II: We’ve just received more information about this work. The creator of the Pastel Dashboard is Jakob Pedersen and he also let us know about the equally great Login page. Check out the funky wobble effect when you enter the wrong password.

Found at: http://std.li/pastel/login.html

Collect, test, and experiment with interface pattern pairings of CSS & HTML. Pears is an open source WordPress theme, enabling people like you to get your own pattern library up and running quickly.

Grab the theme at Github.
Install the theme.
Create markup & style patterns.
Learn.

By Dan Cederholm at SimpleBits.com

Wheter you're a designer or a hardcore programmer, SimpLESS is perfect for you. It compiles your *.less files into valid CSS.

Alternative to Less.app

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good.

Press enter! I'm a demo

Download DropKick.js
That's not all! DropKick also degrades gracefully: if the user has javascript disabled everything will continue as normal using your regular <select> elements. Did we mention it works on IE7 and 8?

Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.
Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.
Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

Its how wishes come true. I love the new "Full Screen API" form HTML5. Just want to share code about how get started using it.

Facebook started using it, you can see a small button on photo lightbox.

Going fullscreen

One thing which has been very important when it comes to creating special end user experiences have been the ability to show something fullscreen, effectively hiding all the other content etc.


Remember when web sites gave you instructions how to configure your web browser with hiding toolbars and more, just to get a slightly better user experience? Or maybe it’s just me… :-)

Either way, some time ago we got fullscreen support in web browsers where the user could choose to view the current web site in fullscreen. That’s all good and well, but as an extension to that, as web developers we want to be able to trigger that. Either for the entire web site or just a specific element.

And now we can!

Unicode graphic shape.

Linked via CSS-Tricks.com

open source CSS builder for shadows, backgrounds, and borders.

Linked via Veerle

A Responsive Web Design tool for creating grids by Erskine Design.

Via: <http://coding.smashingmagazine.com/2012/03/19/gridpak-the-responsive-grid-generator/>

"Icon fonts are awesome. They typically come with standard vectors as well if you prefer working with them that way, but these icon projects go the extra mile in offering an @font-face compatible font for web use."

impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Slides.

Linked via Veerle

Taneka Duggan

What you gain is the ability to break your cached versions of files when necessary, but to also set long-term cache times on these assets (while they’re not changing) and expect cache servers between you and your users to properly store these objects.

Useful for LVI

I've posted about doing this previously using the timestamp as part of a query string, but it would appear this method has implications with proxy servers often not caching the files due to the query string. I found that post thanks to the comments to David Walsh's recent post in which he suggests always writing out the timestamp to the Javascript or CSS filename.

The problem with doing that is it will force the browser to always download a copy of those files on every page request which somewhat defeats the purpose of caching. Instead I'll show here how to make the filename unique based on the last time it was modified, and without having to use query strings or rename the file thanks to a little bit of .htaccess magic.

If the stylesheet is css/main.css and the Javascript file js/common.js you can write out the appropriate tags into your page like this:

Useful for LVI

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

Nice looking buttons.
Might be useful for LVI.

In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).
Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

One-sided box-shadow
We all know and love box shadows, but sometimes the typical shadow may not be exactly what we want. For example, sometimes we may be doing a realistic shading of a certain element on our site and want the shadow to appear only one specific side. Or we may be interested in doing a hover element, or a bouncing element and let’s face it—nothing amplifies the beauty in that like a one-sided box shadow.
What we do here is pretty simple actually, we will use negative spread radius to squeeze the box shadow off of one edge. So for instance let’s imagine we have a gray box element and it is set up with a width and height of 40px by 40px. Our CSS would look like:
.one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black}
That will give us exactly what we need, and in one simplified line of code at that.  Like I said, if you are using a lighting element (or theme) to shade your site in one specific direction as though it were a painting, this is the perfect solution for you.
Similarly, bouncing or hover:bounce elements are just  perfect for this.  In the latter case, activate the shadow after the bounce has started, and deactivate once it has landed, and then wow seems you are turning into a designer already.

Fitbit Ultra tracks your everyday steps, stairs climbed, calories burned, and more, motivating you throughout the day.

Similar to the Jawbone UP and Nike+ Fuel

Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.

It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.

It’s a guilty secret I’ve been harbouring for about a year, I cannot design directly into the browser. My creative brain switches at the point when I open my html/css editor (Espresso), and starts thinking in terms of structure and how to achieve the look of my design using as much native CSS as possible. If I don’t have my design to follow, the whole process breaks down for me. I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.

SlideDeck is the web&#039;s most powerful Free jQuery Slideshow, Javascript Slider and WordPress Slider Plugin. Organize content and increase conversions.

First found on OKGO.com

An easy to use CSS 3D slideshow tool for quickly creating good looking HTML presentations.

Linked via Veerle

Really great photographer and a really nicely designed portfolio website (full scree).

SpriteRight is capable of taking your websites existing images and converting them into a spritesheet in seconds. Whether you're importing individual images or existing .CSS files, SpriteRight takes care of the hard work for you. Even if you've had no previous experience with spritesheets, SpriteRight's example code generation tool will have you up and running in no time at all.
What else can SpriteRight do?

SpriteRight comes with an intuitive packing algorithm that's capable of arranging your images in the most optimal way possible. The less space a spritesheet takes up, the quicker your website will load and the less bandwidth it will require. SpriteRight also comes with the ability to trim images of unnecessary transparent areas, further reducing filesizes. For more information on exactly what SpriteRight is capable of, why not watch our introductory video?

Linked via CSS-Tricks.com

The Beauty in CSS Design

A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS. Select any design from the list to load it into this page.

So What is This About?

Back in 2003 (that's 8 years ago!) Dave Shea launched the CSS Zen Garden. It showcased what was possible with CSS-based designs, leading to an explosion in the use of CSS on the web. More recently, Peter van der Zee created JS1k, a competition to build cool applications with no more than 1 K of JavaScript.

At lot has happened since the Zen Garden days, and today you can do almost anything with only CSS. As CSS use is growing, so is the average CSS file size. Popular sites have in average 27 K of CSS, but some use up to a megabyte of style sheets!

Do we need that much? CSS1K invites you to show that web developers are more inventive than ever, and that limitations can sparkle creativity.

with CSS3 Transitions and Animations

Linked via Veerle

Howdy! I'm Robby. I'm a designer, a developer and an awesomeness enthusiast.
I create, writeand speakabout design and technology. I makestuff and share it. I started a company called Pixel Lab. I really love typography, graphic design and music.

Pixel Lab is a digital design and development agency that specializes in creating applications for web, device and desktop.

Windows Phone 7 App Design

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

There are a number of ways in which you can get to know Scalable and Modular Architecture for CSS:

Ever wanted to grab the dominant color or color palette from an image?… Probably not. But now you can! Take a look at the Color Thief Demo Page to see it in action.


CLICK TO VIEW


Usecase #1: Color Search

This script could be useful for sites that sort and search by color. But you should probably save your user’s computer some work and handle the color processing on the server. A couple of color search site examples:

Etsy Color Search
Dribbble Color Explorer


Usecase #2: Color Adapting UI

Linked via Veerle

With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device* worldwide.

*not yet touch-friendly—I’m working on it.

Develop
While you’re designing, you’re also developing! Patternizer generates code that can be used with patternizer.js to create these patterns on any <canvas> element. See the Demos & Documentation for details.

Patternizer patterns don’t use any images and only require a single tiny script. In many cases patternizer will be smaller than an image-based solution (if it’s even possible with an image!). Attach patternizer.js once and create as many patterns as you want across your entire site.

Who is Patternizer?
Patternizer is maintained by 2 people:

Matthew Lein—most of the things you can see, touch, and play with. @matthewlein
Dave Johnson—most of the things you can’t see, but are still very important.

Linked via Veerle

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others. Follow @dabblet on twitter

It currently only supports modern versions of Chrome, Safari and Firefox but I'm hoping to expand browser support soon.

It’s handcoded by Lea Verou with care but some other nice folks helped too.

Linked via CSS-Tricks.com

...is a good idea, I'm telling you.

I've created this page to attempt to convince you. It shows examples and lists six reasons why it's a good idea and three common arguments against them (some of which I refute).

Don't need convincing? Here's roundup of them from simurai.

Fico is a font with 52* simple, commonly used icons and glyphs, served on the web via @font-face.

scalable
perfect for responsive designs with media queriestidy
stop messing around with loads of files or spritescolor-agnostic
you can even use gradients and shadowsquick & easy
works in most browsers – even on mobilenicely aligned
because they all have the same widthsmall
less than 12K when gzipped, in 1 HTTP request
(depending on configuration and browser)

Linked via CSS-Tricks.com

Useful tutorials and resources, all around jQuery, Web Development, Web Design and Programming

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

The long awaited CSS font stack resource.

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Linked via Veerle.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Linked via: Veerle
Create custom build or Download on Github

To use them in your project, simply add the class to the element, or call the animation yourself in your CSS file. The classes and the animations have the same name.

Test the animations below by clicking on their name. All of the animations demonstrated below last for a duration of 1 second, use a timing-function of "ease", and have a fill-mode of "both". You can use these defaults by adding a class of animated to the desired element.

A Pre-Launch Page is a way for you to build some interest with your target audience while you slave away in the shadows building your awesome new project.  It also allows you to build an email list of interested potential users, which could absolutely be your most precious asset in the beginning.  There are several paid services that help you do this and more (LaunchRock, Prefinery, KickOffLabs), but in the spirit of staying truly lean I’m going to show you how to roll your own Launching Soon page for free.  This page will:
•  Establish an initial presence
•  Provide teaser information about what you’re working on
•  Capture visitor emails and build a list
•  Encourage social sharing
Live Demo Download the Files
This should take you about 30-60 minutes to complete.

An animated CSS activity indicator with VML fallback.

Features

No images, no external CSS
No dependencies (jQuery is supported, but not required)
Highly configurable
Resolution independent
Uses VML as fallback in old IEs
Uses @keyframe animations, falling back to setTimeout()
Works in all major browsers, including IE6
MIT License

Linked via Veerle.

The
Semantic
GRID SYSTEM
Page layout for tomorrow.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

All without any ugly .grid_x classes in your markup. Oh, and did we mention it's responsive?

Brought to you by LESS.js and the creator of 1KB Grid.

Linked via Veerle.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Linked via css-tricks.com

The deck.core module provides all the basic functionality for creating and moving through a deck. It applies and removes classes to indicate the state of the deck and its slides, allowing CSS to take care of the visual representation of each state. It also provides methods for interacting with the deck, as well as basic key bindings for going to the next and previous slides. Separate extension modules provide more functionality using the API provided by core.

Linked via css-tricks.com

Hi, I’m an UI Designer and CSS3 lover. This site is my personal playground.

Bio: I was born in the Swiss Alps. Grew up with cows and goats. Later I lived and worked in Zürich (Switzerland), Vancouver (Canada) and Fukuoka (Japan). Currently I live in Amsterdam.

Samurai? Almost.. Simon (my real name) + samurai = simurai.

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn't behave like you would expect. Then we'll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.

Welcome to PLACEHOLD.IT
A quick and simple image placeholder service.

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
Waypoints makes a solid base for modern UI patterns that depend on a user’s scroll position on the page. Take a look at a few examples.

Supersized is a fullscreen background slideshow built using the jQuery library.

As you know IE versions below 6 do not support png transparency. This plugin designed to fix that problem by applying appropriate filters to user specified elements, while keeping all element tags intact.

Plugin works well with both img elements within the DOM and css properties specified externally.

• It is chainable.

• Unlike some other png hack solutions, it does not replace/hide any of your html tags.

• You can revert applied changes using .iunfixpng().

• Extremely easy to use!

Used by McDonalds.com

It’s been a while since we posted anything particularly technical to the Web Directions blog, but that’s something we plan on changing. Here’s the first in a series of technical articles on CSS3 features (along with tools to help you lean and use them).

We’re starting with linear gradients. We’ll take a look at where they come from, how to use them, and the current level of browser support. Ironically although webkit introduced gradients, until version 5.1, Safari has supported a different syntax from that described here — so, if you are using a version of Safari other than 5.1 (currently in beta) you won’t be able to see the examples.

Linked via Veerle.

Linked via Veerle.

jQuery Photo and Video Gallery.

Linked via Veerle.

I'm Johan Brook – a designer, developer and general Jack of all trades living in Sweden. I like semantic markup, typography, cutting edge web technologies, coffee, the ocean, and pale ale. I have an unhealthy relationship with Tarantino films, late night sitcoms, and quality products. There's more about me on the About page.

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Linked via css-tricks.com

Demo for Pure CSS GUI icons (experimental).

Tested in: Firefox 3.5+, Chrome 5, and Opera 10.6.

84 GUI icons created from semantic HTML.

Welcome to the HTML Email Boilerplate. This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there — Gmail, Outlook, Yahoo Mail, etc. While not plug and play (you know, you'll have to do some work ;-), it will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Based on the Paul Irish HTML Boilerplate code.

What's Reeder?
Reeder is a Google Reader client, which means you need a Google Reader account to use the app. Don't have one? No problem, you can get one here:
http://google.com/reader
When using Reeder, all changes will be synced with Google Reader. Th

"Cactuslab is a multimedia studio founded by Karl von Randow and Matthew Buchanan, formerly of new media company WebMedia. Since 2001 we have worked on a wide variety of projects for a diverse client list."

Created the website for Sparrow App (Mac IMAP Email Client)

Related to "Matthew’s Manifesto" for Campaign Monitor <http://m.madebycanvas.com/cm/>.

Hello Campaign Monitor.
I love making simple, effective interactions.
I’m Matthew.
Here's how I think.

In the example below I’ve implemented a subtle grey flecked texture effect over the white text. Hover over the box to see how it will degrade in non-supporting browsers. The texture simply won’t show up until (fingers crossed) the property is supported by all browsers.<br />
<br />
Linked via Veerle

The international source for internet news, business and internet culture. If it’s worth hearing about – you’ll hear it from us…first

LAYERSTYLES v 0.1<br />
JUST LIKE YOUR FAVORITE GRAPHICS EDITOR<br />
BUT IN YOUR BROWSER. AND IT CREATES CSS.<br />
<br />
Linked via: John Nack @ Adobe

Free high quality patterns for your next web project.<br />
<br />
Linked via Veerle (kinda).

Compass is an open-source CSS Authoring Framework.<br />
<br />
Why designers love Compass.<br />
<br />
Experience cleaner markup without presentational classes.<br />
It’s chock full of the web’s best reusable patterns.<br />
Developing a personal framework is simple.<br />
Compass mixins make CSS3 easy.<br />
Download and create extensions with ease.<br />
Compass uses Sass.<br />
<br />
Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.

I am a software developer based in Southampton, UK. I create rich user interfaces for desktop and mobile devices.

In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.<br />
<br />
Linked via Veerle

flux slider<br />
Hardware accelerated image transitions using CSS3.<br />
<br />
Linked via Veerle.

CSS EASING ANIMATION TOOL<br />
<br />
<br />
Choose an easing type and test it out with a few effects.<br />
If you don’t quite like the easing, grab a handle and fix it.<br />
When you’re happy, snag your code and off you go.<br />
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out...yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!<br />
<br />
Linked via: CSS-Tricks.com, Veerle

If you ever tried to use border-radius on <img>'s, you know that it doesn't always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded with border-radius. Jonathan Neal has a demo to make this work. Essentially it sets the background of the image element to itself, and then changes the src of the image to a transparent GIF data URI.<br />
<br />
http://sandbox.thewikies.com/img-w-radius/

"Ever wondered how to create an element that flares into another using only CSS? Here’s a quick tutorial using existing CSS attributes, in combination with CSS generated content, to produce the effect using no images at all, and no additional markup. And it falls back gracefully for older browsers."<br />
<br />
"Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connect to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. Steve Smith has a published a neat technique utilizing pseudo elements to do it." via CSS-Tricks.com