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


Login Design for download


Clean Sign Up Form


Clean Sign Up Form Design for download


Login


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







Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/wKSKOD73vok/

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">
<head>
<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="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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>
</head>

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>
</div>
</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>
</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() {
$('.iosSlider').iosSlider({
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', '');

$(args.currentSlideObject).find('.text1').animate({
right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');

$(args.currentSlideObject).find('.text2').delay(200).animate({
right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');
}

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

$(args.currentSlideObject).find('.text1').animate({
right: '100px',
opacity: '0.8'
}, 400, 'easeOutQuint');

$(args.currentSlideObject).find('.text2').delay(200).animate({
right: '70px',
opacity: '0.8'
}, 400, 'easeOutQuint');
slideChange(args);
}

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







Source: http://designm.ag/tutorials/how-to-build-an-ios-style-content-slider-using-jquery/
 

The Cash Box Blueprint

Most Reading