Design Shack — Web Design Gallery, Articles & Community

Developing a jQuery Private Messaging Modal Box

You can build some really neat things using jQuery. The latest release bundle updates a lot of bugs and even hints at support for a new jQuery Mobile. With frontend scripting you can build practically any type of web application. But more specifically we’ll be looking into constructing a small modal box window.

I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.

Developing a Digg-Style Input Form With CSS3 and jQuery

Digg is one of the most popular social news networks to date. They garner a massive audience in the millions of members. Recently the company has carved a new direction with the launch of Digg v4. The entire system has been replaced with new statistics and followers/following networking.

One of the most notable changes is in page aesthetics. With the launch of Digg v4 boasts a brand new design with a unique look and feel. In this tutorial I’ll be going over how you can create your own Digg v4 style input form using some basic CSS3 properties.

Create an Awesome Zooming Web Page With jQuery

Want to create a really unique and eye-catching effect for your site? How about an animation that zooms into a specific portion of the page when you click on it?

It may sound like a lot of work but with jQuery and Zoomooz.js, it’s a snap! I’ll walk you through the process step by step as we build a stunning zooming thumbnail gallery.

What’s Better Than a Slideshow? A Triple Slideshow!

Today we’re going to build a web page that uses not one but three separate slideshows that come together to look like one seriously dynamic element. This effect is perfect for any designer or photographer portfolio.

Along the way we’ll be using some extremely basic HTML, CSS and jQuery. Open up a text editor and follow along to build your own!

Easily Create a Full Screen Photography Slideshow Website Without Flash

Photography websites nearly always run on Flash. Adobe’s increasingly notorious technology simply does an excellent job of displaying imagery in a dynamic way that’s perfect for photography showcases. However, there are a few downsides.

First, it’s not always easy to find a quality, free slideshow template to start from, and if you’re not a Flash developer, this could lead to significant costs. Secondly, the world is in quite the love/hate relationship with Flash at the moment, with many developers switching to JavaScript, CSS3 and HTML5 where possible.

So today we’re going to build a beautiful, Javascript-powered photography site with a full-screen slideshow. Literally all of the heavy lifting will be done by an awesome free jQuery resource so our job will be mostly customization. Let’s get started!

Weekly Freebies: 10 Brilliant jQuery Plugins

This week’s collection of awesome free resources includes some of our favorite jQuery plugins. Utilizing these in your site designs can save you loads of time in development and will help ensure that both your code and design is top-notch.

There are a few random plugins for tooltips and Twitter widgets but most of the resources you’ll find below help with image presentation. Whether you want a 3D carousel or a fullscreen slideshow, there’s something here for you!

Effortless Full Screen Background Images With jQuery

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

Build an iPad-Themed Image Slider With jQuery

If you’re not a seasoned web developer, it can be quite intimidating to approach a project where your client is looking for something trendy and interactive such as an Apple-centric slideshow.

Today we’ll teach you how you can create just such a project in mere minutes using some awesome free resources from around the web. We’ll walk you through ten super simple steps so even if you have little to no web experience, this project should be a breeze!

27 Utilities for Saving and Sharing Code Snippets

You’ve got countless bits of HTML5, CSS3, JavaScript, and PHP rolling around in your head and on your hard drive that you are forced to try to recall each time you start a project. It’s time to get organized.

This post will briefly point you to 27 great utilities that not only help you store your favorite snippets both locally and in the cloud, but also make sharing with others a breeze. Enjoy!

Create a Moveable Sticky Note With MooTools and CSS3

I recently came across a neat tutorial at Woorkup pointing out a MooTools feature that allows you to turn any item on a web page into a positionable element.

Today we’re going to use this technique to create a simple and fun sticky note that a user can play with and move anywhere on the page. Along the way will be using lots of CSS3 so make sure you’ve got a decent browser!