ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects

This week I’d like to show you 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.

The animated Shine Effect

The idea behind a Shine Effect 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.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:

  1. Change the margins of the thumbnail element so that it floats away from it’s container
  2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
  3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.

SYNTAX HIGHLIGHTER

Code Syntax Highlighter, for almost any website or Blog.SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.

Code Syntax Highlighter

SyntaxHighlighter Evolved allows you to easily post syntax-highlighted code to your site without having to escape the code or anything. It uses the SyntaxHighlighter JavaScript package by Alex Gorbatchev to do the highlighting and supports all of the package’s parameters via shortcode attributes.

For a list of supported languages (most widely used languages are supported), see the WordPress.com support document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PHP Code Example</title>
</head>
<body>
	<h1>PHP Code Example</h1>

	<p><?php echo 'Hello World!'; ?></p>

	<p>This line is highlighted.</p>

	<div class="foobar">
		This	is	an
		example	of	smart
		tabs.
	</div>

	<p><a href="http://wordpress.org/">WordPress</a></p>
</body>
</html>

Does it Work?
Yes it does

How does it work?

SyntaxHighlighter runs in the browser which means it doesn’t care what kind of server you have. In fact, SyntaxHighlighter can run locally on your computer without any web server at all and best of all it runs in virtually every modern web browser.

What does that mean for you?

That means you can install SyntaxHighlighter in your home page, blog, CMS, documentation CD or any other web page. It literally takes just a couple of minutes to get going and you will have beautifully highlighted code for all your users …

ZOOM.IT BY LIVE LABS

Zoom.it is a free service for viewing and sharing high-resolution imagery. You give us the link to any image on the web, and we give you a beautiful new way to experience it — along with a nice short URL.

How?

Zoom.it converts your image to the Deep Zoom format, which lets you smoothly and efficiently explore the whole image, no matter how large. Check out Deep Zoom Studio for examples of this technology in action.

Zoom.it runs on Windows Azure and enhances the experience with Microsoft Silverlight when available.

Who?

Zoom.it was created by Microsoft Live Labs, the same folks who brought you Photosynth and Pivot.

Why?

We think every image on the web should be a beautiful, high-resolution one. Zoom.it gets us one step closer to that vision, and Deep Zoom keeps the experience fast and buttery smooth.
So what are you waiting for? Create your own! »…

WORDPRESS COMMUNITY LINKS – PREMIUM PLUGIN

Looking for a way to add Digg-like features to your WordPress site?

WP Community Links is the best premium plugin on the market that lets you do just that, within minutes!

Flexible plugin architecture

Most of the available social voting extensions are themes. Extending WordPress functionality using themes is a clumsy way to implement social voting features. What if your site already has a nice design? You would have to customize the social voting theme instead to replicate your existing design elements.

WP Community Links is a plugin, which means it works independently from your theme. You don’t have to worry about starting from scratch.

Customizable templates and API

WP Community Links comes bundled with many template files so that you could modify the way the plugin pages look. It’s no different from working with WordPress theme templates. There are also dozens of helper functions, action and filter hooks so that advanced developers could extend and customize almost every element and detail of a page.

Utilizing cutting-edge features of WordPress 3.0

WordPress 3.0 introduces many new features that make your administration life so much easier (Navigation Menu, Custom Taxonomy etc.). WP Community Links takes advantage of these features to provide a consistent and user-friendly interface.

Adding new categories, tags, and items to the navigation menu is easy and painless.

Customizable user area

Unlike other social voting themes and plugins, WP Community Links does not allow users to use WordPress wp-admin area to post. This reduces security risk, and also let …

DRYICONS : SOCIALIZE PART 3 SET

The new “Socialize part 3″ icon set has been on our To Do list for quite some time, and now it’s finally here. The new free icons set contains the most popular social-network icons, placed inside a sticker, that way making them easy to use in all kinds of projects.

Although initially intended to be used by bloggers, these icons go beyond that and can be used in almost any website.
The “Socialize part 3″ icon set contains 12 high quality, free icons in the following sizes: 16x16px, 24x24px, 32x32px, 48x48px, 64x64px and 128x128px in 32-bit transparency PNG file format. The icons also come in ICO and ICNS file formats in 128x128px size.

Download Socialize Part 3 Icon Set :: 12 Icons

Please read our Free, Commercial and Extended License Terms of Use before you download.
Socialize Part 3 Icons Set contains the following icons available in PNG, ICO and ICNS format:
wikipedia google-buzz picasa paypal skype deviant-art yahoo-buzz xing design-float slideshare

DRYICONS : COLORFUL STICKERS PART 6 ICONS

“Colorful Stickers part 6″, the new addition of the popular “Colorful Stickers” series, is finally available. We’ve listened the needs of the many, and composed the set as a compilation of user requested icons.

Colorful Stickers Icon Set Part 6

The pencil and brush icons, along with 18 other icons fit perfectly into a compact whole recognizable by the unique “Colorful Stickers” style. They will surely embellish the look of your projects, and perhaps even inspire new development directions.
The icons are available in these sizes: 16x16px, 24x24px, 32x32px, 48x48px, 64x64px, 128x128px and 256x256px in 32-bit transparency PNG file format. The icons also come in ICO and ICNS file formats in 128x128px size.

Download Colorful Stickers Part 6 Icon Set :: 20 Icons

Please read our Free, Commercial and Extended License Terms of Use before you download.

jQuery Popout Hover using CSS

I recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

HTML

The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of “info”.

CSS

Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.
We add a position: relative; to the image as well, so we can control the z-index value on hover. What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.
Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail. To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on …

jQuery Text Select Social Sharer *new*

Jquery selected text sharer is a promoting and enhancing plugin focusing to increase the site usage. This plugin displays a widget having links to search / share, above the selected text. Inspired from NY times website.

Features

  • Cross browser supported.
  • Highly customisable interface.
  • Light-weight.
  • Can add unlimited links to the widget for searching and sharing.
  • Selected text truncation for Twitter.
  • Can show widget for textboxes and textareas also.
  • Can show widget only for particular elements.
  • Available in non-Jquery version also.

Demo

Click the button below to view the example and demonstrations of selected text sharer plugin.

jQuery Period Picker

Period Picker, is a jQuery date range calendar picker. This is a period picker that will enable you to simply add a two dates selectors on any website using jQuery (and if you’re not it’s a good reason to start).

Do you (only) speak english ?

The original version is a complete English version but I’m working on some translation and you just have to change two lines of the javascript file to adapt it to your language (there are already a lot of translations available on the dedicated page).

The plugin is set to work with american date format (YYYY/mm/dd) but you can add your own easily by editing a few lines in the script (see Documentation to read about this).

How much is it ?

A looooot ! Or… Well nothing at all. I like the second option better, don’t you ?

However, if you want to support me for the work done here, you will find a paypal donate button on the download page and a Flattr button on top of every page.

Can I try ?

Of course you can try it ! I assumed it was your reason for coming here so I added two demos on this page ! Check out just a little higher, I’m sure you can figure out which block I’m talking about…

And if you were able to figure that out, I’m sure you’ll succeed in installing it on your website, because both tasks are as easy.