Saturday, November 5, 2011

How to Create DropDown CSS Menu

Announcement
I will update this article. Back in the days, this worked. In 2011, there are better ways, updated languages in HTML 5 + CSS 3 and many more options. Expect an article explaining this before 20 June.
Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!
This CSS menu will have submenus and will use the web-techniques HTML 4, CSS. In this tutorial, we use the old fashioned hover JavaScript tool.

Wednesday, November 2, 2011

Fresh CSS Techniques, Menus, Buttons, Forms Tutorials and Resources

Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

The Design
First thing we need to do is open up photoshop and create a design for the button. In this instance, we want to make it look very distinctive as a button:

Automatically Generate a Photo Gallery

VIEW DEMO | DOWNLOAD

Creating a Photo Gallery isn’t such a hard task. My favorite way to present photos is simply a grid of thumbnails that people may pick and choose from as they see ones that interest them. Clicking on a thumbnail brings up a larger version. Could be a direct link to the larger photo or something fancier like a modal box. If you are creating a fairly small gallery, hand coding this grid of thumbnails is probably fine, but if you are creating a fairly large gallery or you anticipate doing a lot of adding/editing/swapping of photos, you may want to consider a better solution. And that solution is…. An automatically generating photo gallery!

When I say “Auto Generating”, I don’t mean that that it takes the pictures for you. This gallery won’t even create the thumbnails for you. What it DOES, is build itself dynamically from your directory of images. So when you want to add new photos, you simply drop the new photo and thumbnail in the directory and you are done! Removing photos just means removing the photos from the image directory. We use PHP for this web wizardry.

1. The Basic HTML Page Structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Auto Generating Photo Gallery</title>

</head>

<body>

</div>

</body>

</html>

</html script >

Free Slideshow, Gallery FancyBox jQuery

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

It was built using the jQuery library. Licensed under both MIT and GPL licenses

Feature

Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
Customizable through settings and CSS
Groups related items and adds navigation.
If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
Support fancy transitions by using easing plugin
Adds a nice drop shadow under the zoomed item

Examples

Slide Show Shadowbox With Ajax

Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Free Slideshow, PicLens Gallery Scripts AJAX

For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need.

PicLens Slideshow

Take your favourite images full-screen. This template is based on PicLens and combine the power of PicLens and Media RSS technology to give you an easy way to add immersive multimedia slideshows to your own site. The exported Piclens gallery can also easily be used as a complete webpage.

Export your images in Picasa using this template. Visitors simply click the "Start slideshow" button on your site to start your presentation and can thereafter toggle into the famous Piclens full-screen mode.

For an even more enhanced browsing experience the free Cooliris PicLens add-on for all major browsers and operating systems adds this full-screen functionality to major websites like Flickr

and Google Images.

Download | Demo

Tuesday, November 1, 2011

Free Download and Useful CSS, HTML Templates

Design templates help build an identity for any particular website. Since the techniques are changing very rapidly within the industry, one must be updated all the time. Many designers download the pre-built CSS templates to explore more. At many stages, designers seek help in the form of inspiration that would help them get back to their creativity track. Or they just want to learn a thing or two about the structure of web-sites and build their own projects on top of “bulletproof” templates.

To keep you moving throughout your creative adventure, we have gathered some cool and absolutely Free CSS and XHTML Web Layouts. You can download and use them for your own personal and/or commercial use. Please read the license agreements carefully before using the templates; the licenses can change from time to time. Feel free to express yourself in a new style and… do not forget to share your opinion with us in the comment section below!

HTML5 and CSS3 ( Demo | Download )