Design Resource Box

Wednesday, February 27, 2013

I have said this before and I’ll keep saying it, PSD files are a great way of seeing how other designers work. They are similar to tutorials, but with less time spent on to learn a technique, a way of designing an input, a button or an overall form.

There are 39 PSD forms in this article that I hope will help you to learn about a certain way of creating a form or inspire you to design forms that have the elements organized in another way than you are used to do it. They can also be considered inspiration for color palettes for you future form designs.

Login form PSD

Login form PSD Design for download

Login Form

Login Form Design for download

Facebook Login UI

Facebook Login UI Design for download

Paper Login Form PSD

Paper Login Form PSD Design for download

Login & Signup Form PSD

Login & Signup Form PSD Design for download

Clipboard PSD

Clipboard PSD Design for download

Path Login

Path Login Design for download

Light Login Form

Light Login Form Design for download

Facebook Login Freebie

Facebook Login Freebie Design for download

Blur Login Form

Blur Login Form Design for download

Login Form

Login Form Design for download

Comments and Form

Comments and Form Design for download

Pinterest Login Window

Pinterest Login Window Design for download

Useful Login Form UI PSD

Useful Login Form UI PSD Design for download

Newsletter Sign Up Form

Newsletter Sign Up Form Design for download

Login UI

Login UI Design for download

Login Form with Validation

Login Form with Validation Design for download


Login Design for download

Clean Sign Up Form

Clean Sign Up Form Design for download


Login 2 Design for download

Log in/Sign in Form

Log in/Sign in Form Design for download

Clean Login

Clean Login Design for download

Search Dropdown

Search Dropdown Design for download

Stacked Login Form

Stacked Login Form Design for download

Clean Login Form

Clean Login Form Design for download

Dark Login Form

Dark Login Form Design for download

Login Form PSD

Login Form PSD Design for download

Multiple sign in freebie PSD

Multiple sign in freebie PSD Design for download

Blaubarry UI Kit

Blaubarry UI Kit Design for download

Login Form (PSD)

Login Form (PSD) Design for download

Dark Login Box

Dark Login Box Design for download

Search Box

Search Box Design for download

Hanna UI Kit

Hanna UI Kit Design for download

WordPress Login Free PSD

WordPress Login Free PSD Design for download

Log In Form PSD

Log In Form PSD Design for download

Rebound Newsletter – with PSD

Rebound Newsletter - with PSD Design for download

Important Notice

Important Notice Design for download

Silver and Gray User Interface Elements

Silver and Gray User Interface Elements Design for download


How to Build an iOS-Style Content Slider using jQuery

Monday, February 25, 2013

Advertise here with BSA

There are loads of tutorials online which are related to dynamic slideshows and image galleries. Typically web developers have been using jQuery to enhance the media in these content sliders. Many other ideas have come to fruition and this has spurred a generation of brand new plugins for jQuery developers.

In this tutorial I want to focus on one of these plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items. Additionally we will include some dynamic text as seen on the website demo. This UI style is perfect for improving the creativity of more generic or bland website layouts.

jquery plugin slideshow slides ios demo tutorial preview

Live Demo Download Source Code

Getting Started

First we want to create our bare HTML5 webpage and setup the core HTML structure. There are a lot of tags we need to include which relate to each image in the slideshow. Plus we are using custom headings and page text inside each of the sliding panels. But first we should take a peek at the document heading section.

<!doctype html>
<html lang="en-US">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>iOS Slider Demo Page</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="">
<link rel="icon" href="">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src=""></script>
<script type="text/javascript" charset="utf-8" src="jquery.easing-1.3.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.iosslider.min.js"></script>

Take note that I am including a series of JS files to ensure that our plugin works to the maximum capacity. First is the latest jQuery library hosted by Google APIs. Then followed by jQuery easing and finally our iosSlider plugin codes. All of the working JavaScript has been added into the bottom of the HTML body inside <script></script> tags.

Moving on we should now examine the internal HTML and see how this works to generate the basic slideshow. By including a series of content wrappers the goal is to keep our widget fully responsive to display properly on mobile smartphones. The functionality is already built using jQuery so it is worth the extra HTML.

<div class="fluidHeight">
<div class="sliderContainer">
<div class="iosSlider">
<div class="slider">
<div class="item item1">
<div class="inner">
<div class="text1"><span>Touch Me.</span></div>
<div class="text2"><span>Hardware accelerated using<br>CSS3 for supported iOS,<br>Android and WebKit</span></div>

The .fluidHeight class will ensure that our full wrapper keeps the same proportions of each internal image. The internal .sliderContainer is what will hold the photos and defines an area for the content to slide between. The .item class is what defines a unique sliding object and .inner is used for absolute positioning. The two text objects will fly in to be animated from the right side, and so we need to have them positioned on top of the photo at all times.

Styling the Sliding Panels

At the bottom of the sliding container after all the images have been listed we close the .slider div and lock them into a single box. Then outside I have added the various circle navigation buttons for users to click and switch between the different views automatically.

<div class="slideSelectors">
<div class="item selected"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

This looks like a basic nav menu list and we could have stuck to using list items or definition lists, per the newer HTML5 documentation. But divs are cleaner and offer more control over the width and height, plus the size of the link items themselves. You can see how these are floated together inside the container which uses different CSS properties than the internal .item slides.

.iosSlider .slider .item { width: 100%; height: 100%; padding: 5px 0 5px 0; }

.iosSlider .slider .item .inner {
position: relative;
top: 0;
left: 0;
width: 1024px;
margin: 0 auto;
height: 100%;
box-shadow: 0 0 10px -5px #000;
background-position: 50% 0;
background-repeat: no-repeat;

.iosSlider .slider .item .inner .text1 {
background: none repeat scroll 0 0 #000;
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
right: 150px;
top: 30px;
padding: 5px 2px 0 7px;

.iosSlider .slider .item .inner .text1 span { color: #fff; font: 55px/70px Norican; padding: 0 8px; }

.iosSlider .slider .item .inner .text2 {
background: none repeat scroll 0 0 #000;
opacity: 0;
filter: alpha(opacity=0);
padding: 5px 7px 7px;
position: absolute;
right: 0;
top: 100px;

.iosSlider .slider .item .inner .text2 span { color: #fff; font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

.sliderContainer .slideSelectors {
position: relative;
bottom: 20px;
left: 0;
width: 92%;
margin: 0 4%;
z-index: 1;
height: 10px;

.sliderContainer .slideSelectors .item {
float: left;
width: 9px;
height: 9px;
border: 1px solid #000;
background: #999;
margin: 0 0 0 10px;
opacity: 0.25;
filter: alpha(opacity=25);

.sliderContainer .slideSelectors .selected {
background: #000;
opacity: 1;
filter: alpha(opacity=100);

The inner span elements help to define unique font faces we are applying inside CSS. The original page demo includes a small TTF font Norican Regular which looks fantastic as a header. This can be included using CSS @font-face properties and setting up a new typeface style. Keep in mind that you can apply this same effect using any other TTF file based on open GLP licensed fonts.

Merging with JavaScript

By now the last major piece of the puzzle is how to implement this whole iOS Slider effect. We will be using a custom function based off the jQuery plugin file. We need to attach the selector onto our .iosslider container div which holds the other slider items.

$(document).ready(function() {
desktopClickDrag: true,
snapToChildren: true,
navSlideSelector: '.sliderContainer .slideSelectors .item',
onSlideComplete: slideComplete,
onSliderLoaded: sliderLoaded,
onSlideChange: slideChange,
scrollbar: false,
autoSlide: true,
autoSlideTimer: 3300,
infiniteSlider: true

The method call is using $().iosSlider for the main function name. Inside we are passing a whole slew of parameters which pertain to this specific demo. The full documentation is listed on the official plugin website where you can see each parameter name and the accepted datatype. There are 3 parameters which call external functions also defined inside my JavaScript code. If you want to save space these may be copied over into the jQuery plugin file, or saved into a new external JS file.

function slideChange(args) {
$('.sliderContainer .slideSelectors .item').removeClass('selected');
$('.sliderContainer .slideSelectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

function slideComplete(args) {
if(!args.slideChanged) return false;

$(args.sliderObject).find('.text1, .text2').attr('style', '');

right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');

right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');

function sliderLoaded(args) {
$(args.sliderObject).find('.text1, .text2').attr('style', '');

right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');

right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');

These function calls mostly deal with animating the text and sliding image panels on each slide change. You can dig into the functions as I have copied them below. Please note that it is not imperative that you edit these at all. They should work fine unless you are updating class names, which are very minor changes anyways.

jquery plugin slideshow slides ios demo tutorial preview

Live Demo Download Source Code

Final Thoughts

I do hope this tutorial may be of use to some web developers out there. Building a custom slider widget to work properly in modern browsers and smartphones is not easy. Many of the supported browsers for Android and iOS devices are advancing, too. This means we can expect support for greater ideas in the near future.

Along with my live demos feel free to grab a copy of the project source code. I have slimmed down the page to include a very minimal amount of CSS and HTML to keep this slideshow running. It should be easy to copy/paste into your own design and have it working quickly. But if you have additional thoughts or questions on the iosSlider plugin feel free to share with us in the post discussion area.

Advertise here with BSA


The Cash Box Blueprint

Most Reading