Addy Osmani shows us how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

You’ll also learn today how you can successfully use layering in your designs to give your gallery that extra bit of detail that can make it stand out from the others.

Published under: Gallery | License Free

1-Pure CSS Progress Bar

Two years ago, we have built a Javascript Progress Bar. Now, would you like a Pure CSS Progress Bar which requires one image for background stripes only? With simple Javascript for animation, it turned into a really simple and slick progress bar which you can use it anywhere on your website.

Pure CSS Progress Bar is best viewed in a Webkit based browser, Chrome is good, also Safari. Opera 10.62 looks quite good. Firefox and IE 9 kind of work (no animations). IE 8, 7 and 6 do not support rounding, shadows or animation.

2-Animated progress bar

CSS Globe has a chic animated progress bar built with CSS and an animated GIF file.

It is simply an EM tag above an animated GIF file which is blocking the part of the GIF file to creating the progress bar stop effect.

As this progress bar is only a visual trick, it can not show a "live" progress but only a static one which the percentage of progress to be shown was defined before the page is loaded.

Published under: Animation | Best Collections | Inspiration | License Free

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron jquery mousewheel plugin.

You can use Sideways on both personal and commercial projects you choose, develop it further or just make it better.

Published under: Gallery | License Free

BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.

However, BonBon Buttons are not meant to be used on your next project that targets the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

Published under: Buttons | License Free

AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too.

WanderWall achieves that and what it could easily be used for a portfolio or business site but the concepts we’ll learn could certainly be used to expand the idea further.

Published under: Menu | License Free

The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.

Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.

Published under: Color Schemes | GPL License | MIT License

Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. In every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.

RocketBar consists of two main components – the first is the jQuery code that powers it, adding the floating class and attributes to the bar that make it appear ‘detached’ when the user scrolls up and down the page. The second element are the CSS3 buttons you find along the bar.

Published under: Menu | License Free

PureCSSMenu.com is a FREE online tool that makes css-only multilevel menus with minimum efforts in no time!

You need just 3 easy steps to build your CSS menu:

  1. Open PureCSSMenu.com and select the menu template you like.
  2. Customize the menu item link and appearance.
  3. Download the result as a zip file.

That's all! No complicated HTML and CSS coding. No drawing. Easy and Free!

Features:

  • Widest browser and platform compatibility including IE6 with disabled Javascript.
  • Super small size ~ 4Kb.
  • Immediate loading.
  • Text-only browsers friendly.
  • Readable by any search-engine robots.
  • Horizontal css menu & Vertical css menu.

PureCSSMenu

Published under: Menu | Utilities

.less (pronounced dot-less) is a .NET port of the ruby LESS library. It allows you to write regular CSS with your .NET apps, then add a few variables, mixins and nested rules. In order to use dot-less you need .NET 3.5 or above.

Using dot-less in your project is a breeze; all you need to do is include reference to it in your project and add few entries in your web.config file. To get started simply reference your LESS files the same way as you would any other CSS file, just ensure that you use the .LESS extension.

Features

  • Supports Variables, Mixins, Nested Rules and Operators
  • Provides useful Functions which are called using the normal CSS function syntax
  • Supports Namespaces enabling you to group variables or mixins, for organizational purposes, or just to offer some encapsulation
  • Supports Scope – similar to that of programming languages
  • Both block and inline comments are authorized
  • Provides command line tool to compile .less file into .css
  • Also comes with an option to watch your .less files for any change, and recompile it automatically

Ported by Christopher Owen, Erik van Brakel, Daniel Hoelbling  and James Foster; .LESS is available for download under Apache License.  You can find further information, documentation & download on .LESS CSS Website.

Published under: Formatting

The idea behind the ShineTime is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

ShineTime is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass)  and the best part is, it’s not that difficult to achieve.

Published under: Animation | Gallery