Tag-Archive for » Examples «

25 Beautiful Examples of Black and White Photography

Many designers love to view photographs for design inspiration. In this post we’ll showcase some beautiful black and white photos for your own inspiration. If you like a particular photo and you want to see more, click on the image or the link in the photo credit and you’ll be led to the source where you can view more work from the photographer.

You may also be interested in our previous post, Showcase of Beautiful Architecture Photography.

Black and White Photography

Photo credit:David Terrazas

Black and White Photography

Photo credit:Michel Rajkovic

Black and White Photography

Photo credit:dixie_law

Black and White Photography

Photo credit:djsosumi

Black and White Photography

Photo credit:Nicolas Evariste

Black and White Photography

Photo credit: dogwatcher

Black and White Photography

Photo credit: c@rljones

Black and White Photography

Photo credit: monkeyc.net

Black and White Photography

Photo credit: iamjon*

Black and White Photography

Photo credit: Bill Gracey

Black and White Photography

Photo credit: Etrusia UK

Black and White Photography

Photo credit: Michel Rajkovic

Black and White Photography

Photo credit: Damien Vassart

Black and White Photography

Photo credit: Damien Vassart

Black and White Photography

Photo credit: Nicolas Evariste

Black and White Photography

Photo credit: Dhiren Babaria

Black and White Photography

Photo credit: d.kele

Black and White Photography

Photo credit: Damien Vasart

Black and White Photography

Photo credit: Charles Etienne-Pascal

Black and White Photography

Photo credit: Abelardo Ojeda Flores Alatorre

Black and White Photography

Photo credit: Andre Peniche

Black and White Photography

Photo credit: M.Christian

Black and White Photography

Photo credit: werram

Black and White Photography

Photo credit: myINQI

Black and White Photography

Photo credit: Vardhana

For more design inspiration please see:

  • Brochure Design Showcase
  • Graffiti Art Showcase
  • Showcase of Amazing Vector Art
  • Amazing Packaging Design

30 Examples of Mega Menus in Web Design

Mega menus are often used on large sites that have considerable number of pages for users to navigate. Rather than just using a dropdown, the mega menu opens up a bigger area that offers more options. While mega menus can make it easier for users to get deeper into the site with fewer clicks, the huge amount of options can also potentially overwhelm some visitors. For this reason, great care should be taken to make mega menus as user-friendly as possible. In this post we’ll look at 30 examples of mega menus in action.

Columbia

Columbia

Callaway

Callaway

Rip Curl

Rip Curl

Puma

Puma

Bras N Things

Bras N Things

OfficeMax

OfficeMax

Office Depot

Office Depot

Clinique

Clinique

Target

Target

The Sak

The Sak

Adidas

Adidas

Reebok

Reebok

REI

REI

Northern Tool and Equipment

Northern Tool and Equipment

Wal-Mart

Wal-Mart

Toys R Us

Toys R Us

Little Kids Bedrooms

Little Kids Bedrooms

Moosejaw

Moosejaw

Estee Lauder

Estee Lauder

Quiksilver

Quiksilver

The White House

The White House

Staples

Staples

Lowe’s

Lowe's

Action Envelope

Action Envelope

Sears

Sears

Kmart

Kmart

FAO Schwarz

FAO Schwarz

Bobbi Brown

Bobbi Brown

GNC

GNC

Tumi

Tumi

For more design inspiration please see:

  • 27 of the Best Real Estate Websites
  • 25 of the Best Websites for Educational Institutions
  • 25 Impressive Design Portfolio Websites
  • 25 of the Best Church Website Designs
  • 25 Examples of Creative Navigation

jQuery Carousel Plugins: Best Resources, Tutorials And Examples

Preview-jquery-carousel-plugins-resources-tutorials-examplesCarousels are handy if you have a row images and want your visitors to access them in solid and really beautiful way. With jQuery opportunities this feature is made very simple and good-looking.

In this post youre going to find different types of premade carousel plugins andtutorials how to make your own unique carousel gallery whenever you wish, find also some little inspiration at the end of article as bonus!

1. jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Check out 15+ examples, tutorial how to set it up and all configuration options. Works with all major browsers. Heres the circular dynamic carousel example.

Jcarousel-jquery-carousel-plugins-resources-tutorials-examples

2. jCarousel Lite

jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. jCarousel Lite is not a replacement for jCarousel; rather it is a light-weight (only 2kb)alternative for users whose primary focus is not to build a full-blown image gallery.

Lite-jquery-carousel-plugins-resources-tutorials-examples

3. Agile Carousel

Agile Carousel is a JQuery plugin that lets you create a carousel with flexible settings. Some cool features:

  • Ability to show multiple slides
  • Ability to show intro slide
  • Ability to Disable “First” and “Last” buttons at beginning & end of carousel

Heres an example with intro slide.

Agile-beta--jquery-carousel-plugins-resources-tutorials-examples

4. jQuery Carrousel

The core allows to create your own controls or effects. This plugin transforms and tags into an animatedcarousel.

Js-jquery-carousel-plugins-resources-tutorials-examples

5. jQuery Infinite Carousel Plugin

jQuery carousel plugin where small image thumbnails allow users to jump over to other images.

Features:

  • Carousel never ends and images shuffle around
  • Captions are optional
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence
  • Thumbnails can be styled via CSS
  • Its less than 14K
  • Reusable on multiple containers within the same page

Infinite-jquery-carousel-plugins-resources-tutorials-examples

6. Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

Step-viewer-jquery-carousel-plugins-resources-tutorials-examples

7. Just Another Carousel

A jQuery content carousel that works with any size content and supports mouse input. Features:

  • Works in FF3, IE7, Opera, and Safari.
  • Supports fixed-size or variable-size children
  • Supports the Meta plugin for jQuery
  • Totally CSS-based allowing for high customization
  • Degrades gracefully into an unordered list

Just-another-jquery-carousel-plugins-resources-tutorials-examples

8. LoopedCarousel

LoopedCarousel is a plugin made for jQuery that is not only a looping carousel, its main goal is to be extremely easy to implement. No more messing around with CSS to get your carousel to look and function properly. You want to show 5 items? Tell it “items: 5″ and so.

Looped-jquery-carousel-plugins-resources-tutorials-examples

9. jQuery Carousel

Great looking plugin with various types of use.

Great-jquery-carousel-plugins-resources-tutorials-examples

10. Roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with a set of nested elements.

Roundabout-jquery-carousel-plugins-resources-tutorials-examples

11. How to Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

How-to-create-with-wordpress-posts-jquery-carousel-plugins-resources-tutorials-examples

12. jQuery Carousel Gallery for WordPress

This plugin builds on the built-in WordPress gallery, and replaces any gallery inserted using the

tag with a neat jQuery powered carousel.

Gallery-for-wordpress-jquery-carousel-plugins-resources-tutorials-examples

13. Making an infinite JQuery carousel

In this tutorialyou will make an infinite JQuery carousel. The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item. You can check out the demo.

Making-infinite-jquery-carousel-plugins-resources-tutorials-examples

14. jQuery Infinite Carousel

Screencast how to create infinite jQuery carousel. Step by step written tutorial also available. Check out the demo and accesscode.

Screencast-tutorial-jquery-carousel-plugins-resources-tutorials-examples

Examples

Branded07

Branded-07-jquery-carousel-plugins-resources-tutorials-examples

Aaron Hall Portfolio

Aaron-hall-portfolio-jquery-carousel-plugins-resources-tutorials-examples

Corny

Corny-jquery-carousel-plugins-resources-tutorials-examples

Mkg Studio

Mkg-studio-jquery-carousel-plugins-resources-tutorials-examples

Deluge Studios

Deluge-studios-jquery-carousel-plugins-resources-tutorials-examples

Golf Working

Golf-working-jquery-carousel-plugins-resources-tutorials-examples

Dazzle Cat

Dazzle-cat-jquery-carousel-plugins-resources-tutorials-examples

What Is XV

What-is-xv-jquery-carousel-plugins-resources-tutorials-examples

Bret Glassett

Bret-glassett-jquery-carousel-plugins-resources-tutorials-examples

Chris Kaufman Portfolio

Chris-kaufman-portfolio-portfolio-jquery-carousel-plugins-resources-tutorials-examples

30 jQuery Accordion Menus, Tutorials And Best Examples

Preview-jquery-accordion-menus-resources-tutorials-examplesAccordion menus are used widely in navigation, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed, you can really save some space and be able to show a lot of information using this technique.

Yes, and of course such sliding content always is great from design point of view and giving your visitor unique experience while he is visiting. Great isn’t it? – here you will find a lot of customizable plugins, tutorials helping you to understand accordions at all as well as great examples, where this technique has been implemented in successful sites!

1.Yup, Yet another JQuery Accordion Plugin

Simple free jQuery accordion plugin. Available in 4 versions. Check out the tutorial how to use it, get the code, and download all the source files.Some of the new features:

  • Built according to the JQuery Plugin pattern
  • No more need for menus to have an ID
  • An ‘active’ class is now added to each toggle that has an open panel below it
  • Panels that hold other things than lists. You can now add anything
  • Nested accordions

Check out the demo here.

Yup-yet-another-jquery-accordion-plugin-jquery-accordion-menus-resources-tutorials-examples

2.jQuery UI Demo

See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.

User-interface-jquery-accordion-menus-resources-tutorials-examples

3.Stupid Simple jQuery Accordion Menu

Very detailed tutorial about including jQuery in your mockup, creating the JavaScript, creating CSS and HTML. You can also view the demo and download all files.

Simple-stupid-jquery-accordion-menus-resources-tutorials-examples

4.Making Accordion Menu Using jQuery

In this post, youll see two examples of accordion. First menus visibility gets toggled on clicking on the header while the another menus visibility gets toggled when mouse is moved over it. See the tutorial and download source files as well.

Making-using-jquery-accordion-menus-resources-tutorials-examples

5.jQuery Accordion Menu

Step by step tutorial that will take you through the creation of a jQuery accordion menu. Of course, you can view the demo and download source files.

Lateral-code-jquery-accordion-menus-resources-tutorials-examples

6.jQuery Examples Horizontal Accordion

Learn how to create easy horizontal accordion menu.

Examples-horizontal-tutorial-jquery-accordion-menus-resources-tutorials-examples

7.jQuery – Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. Explore tutorial, see documentation and different examples of use here.

Horizontal-tutorial-jquery-accordion-menus-resources-tutorials-examples

8.State-Saving jQuery Accordion Menu Without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them. View demo and download source too.

State-saving-jquery-without-reloading-the-page-tutorial-jquery-accordion-menus-resources-tutorials-examples

9.Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.

Screencast-tutorial-jquery-accordion-menus-resources-tutorials-examples

10.Regular and Hover Accordion Menus

See example of hover accordion menu, learn how to create it and download the plugins.

Regular-hover-jquery-accordion-menus-resources-tutorials-examples

11.Haccordion – Simple Horizontal Accordion Plugin for jQuery

Simple and fast plugin for creating simple horizontal accordion menus. Demo included.

Haccordion-simple-horizontal-accordion-plugin-for-jquery-accordion-menus-resources-tutorials-examples

12.Exactly How to Create a Custom jQuery Accordion

The plan for this tutorial is to show how to create an accordion using the jQuery UI function, then create one using some custom coding.Youll be using a blog sidebar as an example. View demo and get the source.

Exactly-how-to-create-custom-jquery-accordion-tutorial-jquery-accordion-menus-resources-tutorials-examples

13.Simple Accordion w/ CSS and jQuery

Detailed tutorial how to create great looking accordion menu. You can also check out Toggle tutorial. View demo.

Simple-witch-css-jquery-accordion-menus-resources-tutorials-examples

14.Accordion Madness

One of the options how to create accordion menu.

Madness-jquery-accordion-menus-resources-tutorials-examples

15.A Simple and Beautiful jQuery Accordion Tutorial

Learn how to create the well-known JavaScript accordion with the most minimal amount of HTML, CSS,JS and of course, with a beautiful interface as well. Check out demo and download source.

Simple-beautiful-tutorial-jquery-accordion-menus-resources-tutorials-examples

16.Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Demo and code included.

Slide-drawer-jquery-accordion-menus-resources-tutorials-examples

17.Create Simplest Accordion Menu using jQuery

Another simple tutorial how to create standard accordion menu. View demo and download files.

Simplest-menu-using-jquery-accordion-menus-resources-tutorials-examples

18.TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle. For more information visit leigeber.com.

Tiny-javascript-jquery-accordion-menus-resources-tutorials-examples

19.Javascript Accordion Menu Wizard

Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.

Javascript-menu-wizard-jquery-accordion-menus-resources-tutorials-examples

20.Horizontal JavaScript Accordion 1kb

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.

Horizontal-javascript-1kb-jquery-accordion-menus-resources-tutorials-examples

Examples

21.Alex Cohaniuc Portfolio

Alex-cohaniuc-jquery-accordion-menus-resources-tutorials-examples

22.Deluge Studios

Deluge-studios-jquery-accordion-menus-resources-tutorials-examples

23.Rzmota

Rzmota-jquery-accordion-menus-resources-tutorials-examples

24.Screenfluent

Screenfluent-jquery-accordion-menus-resources-tutorials-examples

25.Artisanmedia

Art-is-a-media-jquery-accordion-menus-resources-tutorials-examples

26.Exotics RTC

Exotics-rtc-jquery-accordion-menus-resources-tutorials-examples

27.Two Chaps

Two-chaps-branding-jquery-accordion-menus-resources-tutorials-examples

28.Ten 18 Photography

Ten-18-photography-jquery-accordion-menus-resources-tutorials-examples

29.We Are Lighthouse

We-are-lighthouse-jquery-accordion-menus-resources-tutorials-examples

30.DJ Eric C

Dj-eric-c-jquery-accordion-menus-resources-tutorials-examples

25 Examples of Amazing Packaging Design

Packaging design can make a profound difference on the sales of a product and how it is viewed by customers. In this post we’ll provide a showcase excellent package designs for your own inspiration. Web designers often need to turn to offline source of inspiration rather than only seeking inspiration from other web designs.

You may also be interested in:

  • Design Inspiration: Splatter Effects
  • Showcase of “Green” Typography
  • Design Inspiration: Lighting Effects – Part III

Vajo

Vajo

Cooking Gift Box

Cooking Gift Box

Mayrah Wine

Mayrah Wine

Energizer Headlight

Energizer Headlight

Ours & Yours

Ours & Yours

Entry

Entry

Genki Juice

Genki Juice

Alice Potter

Alice Potter

Choconat

Choconat

Kosibean

Kosibean

Miller Preg-no

Miller Preg-no

Morgan & Milo

Morgan & Milo

Dove Pro Age

Dove Pro Age

l’Argent Signature Collection

l'Argent Signature Collection

Origin Coffee

Origin Coffee

Kentucky Barbecue Sauce

Kentucky Barbecue Sauce

Beer Crate

Beer Crate

Chakra

Chakra

Fastenal

Fastenal

TP Bathroom Tissue

TP Bathroom Tissue

Benefit Cosmetics

Benefit Cosmetics

Nova Coffee

Nova Coffee

Skull Candy

Skull Candy

Pure Cashmere Collection

Pure Cashmere Collection

Beautao Skincare

Beautao Skincare

For more design inspiration please see:

  • 25 Beautiful Church Websites – Part IV
  • 27 of the Best Real Estate Websites
  • 25 Impressive Design Portfolio Websites
  • 25 of the Best Photography Portfolio Sites – Part III