Transforming the Button Element with Sliding Doors and Image Sprites

Transforming the Button Element with Sliding Doors and Image Sprites

create a a cross-browser, flexible and attractive button using the sliding doors technique and image sprites for fast hover changes and less HTTP requests.

http://techblog.procurios.nl/k/618/news/view/33023/14863/Transforming-the-button-element-with-sliding-doors-and-image-sprites.html

http://dl.dropbox.com/u/3293191/CSS/button.zip

Nested Side Bar Menu in Javascript

Nested Side Bar Menu in Javascript

a simple looking multi level side menu. Markup wise it’s just a regular nested UL list, turned into a drop down menu using a very small JavaScript code.

If you want to know more and download the source follow the link below

http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

CSS Uniquely Designed Web Form Styles

CSS Uniquely Designed Web Form Styles

This is great free resource from CSS Globe, 5 downloadable uniquely designed and coded web form styles.

If you want to know more and download the source follow the link below

http://cssglobe.com/post/3875/cssg-collections-web-forms

Demo

http://cssglobe.com/collections/forms/

Download

http://cssglobe.com/collections/forms/forms.zip

http://dl.dropbox.com/u/3293191/CSS/Web%20Forms.zip

CSS Niceforms

CSS Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.

If you want to know more and download the source follow the link below

http://www.emblematiq.com/lab/niceforms/

Demo

http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html

Beautiful CSS buttons with icon set

Beautiful CSS buttons with icon set

design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

If you want to know more and download the source follow the link below

http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html

http://dl.dropbox.com/u/3293191/CSS/nicebutton.zip

Facebook Style Footer Admin Panel

Facebook Style Footer Admin Panel

Learn how to recreate the Facebook footer admin panel with CSS and jQuery.

http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

Styling Buttons and Toolbars with the jQuery UI CSS Framework

Styling Buttons and Toolbars with the jQuery UI CSS Framework

create and style a basic button with the jQuery UI CSS framework, they also offer some downloadable button examples, that demonstrate how to effectively incorporate the power of the CSS framework classes in a custom widget.

If you want to know more and download the source follow the link below

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

Cool 3D Ribbons Only Using CSS3

Cool 3D Ribbons Only Using CSS3

You will be using box-shadow to create a drop-shadow with RGBa, border-radius and the transform property for the single items of the list to make a nice 3D effect.


http://www.pvmgarage.com/en/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/

Demo

http://www.pvmgarage.com/downloads/ribbon/

Create Skype-like buttons using jQuery

Create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

If you want to know more and download the source follow the link below

http://www.jankoatwarpspeed.com/post/2009/03/11/How-to-create-Skype-like-buttons-using-jQuery.aspx

Demo

http://www.jankoatwarpspeed.com/examples/skype_buttons/

Recreating the OS X Dock with CSS

Recreating the OS X Dock with CSS

If you want to know more and download the source follow the link below

http://www.zurb.com/playground/osx-dock

Create a Slick Menu using CSS3

Create a Slick Menu using CSS3

In this article the developer attempts to mimic the navigation menu on the Dragon Interactive website using only CSS (no images, and no JavaScript).
As with most of the tutorials in this article, this is an experimental tutorial using the new features of CSS3. The effects can be seen in only the latest Webkit Browsers, as such, the gradients work in Firefox 3.6 but not thefade-in and fade-out transition.

If you want to know more and download the source follow the link below

http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/

Demo

http://insicdesigns.com/demo/css3/exp2/index.html

Sponsor Flip Wall With jQuery & CSS

Sponsor Flip Wall With jQuery & CSS

create a flipping sponsors page. The resulting code can be used to showcase your clients or portfolio projects with a neat flipping animation.

If you want to know more and download the source follow the link below

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

Demo

http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

Prototype LightBox 2

Prototype LightBox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

If you want to know more and download the source follow the link below

http://www.huddletogether.com/projects/lightbox2/#overview

A fancy Apple.com-style search suggestion

A fancy Apple.com-style search suggestion

If you want to know more and download the source follow the link below

http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html


Demo

http://qpoit.com/marcofolio_demo/apple_search/

Simply Buttons

Simply Buttons

simply buttons offers better looking and behaving buttons across all browsers. It does not need a javascript framework and is very easy to install and use.

If you want to know more and download the source follow the link below

http://www.p51labs.com/simply-buttons-v2/

http://dl.dropbox.com/u/3293191/simply-buttons-v2.zip

Build An AJAX Powered Shopping Cart

Build An AJAX Powered Shopping Cart

The goal of this tutorial is to show you how to build an AJAX powered shopping cart.

If you want to know more and download the source follow the link below

http://net.tutsplus.com/javascript-ajax/build-an-ajax-powered-shopping-cart/

Demo

http://net.tutsplus.com/javascript-ajax/build-an-ajax-powered-shopping-cart/

How Configure or connect Zen Cart with phpBB forum

How Configure or connect Zen Cart with phpBB forum





1. Install phpBB and test that it works properly. For ease of configuration, it's recommended to install phpBB to the root
of your server, perhaps like this:
'http://mysite.com/forums
or
'http://mysite.com/phpbb
2. Edit the /includes/configure.php file for Zen Cart and enter the path to your phpBB folder on this line:

//define('DIR_WS_PHPBB', '/home/users/username/public_html/phpBB3/');
//define('DIR_WS_PHPBB','/home/users/billy123/public_html/forum'); //live path
define('DIR_WS_PHPBB', 'H:/R_EDNALAN/PROJECT/ZENCART/phpBB3/');  //local path

3. In Zen Cart's Admin area, go to Configuration, My Store, and set "Enable phpBB Linkage?" to TRUE
4. Now any new users created will be asked to select a forum username during signup.

AJAX-ed Todo List With PHP, MySQL & jQuery

AJAX-ed Todo List With PHP, MySQL & jQuery

In this tutorial we are making a simple AJAX-ed Todo List App, with PHP, MySQL and jQuery. In the process we are going to demonstrate PHP’s OOP capabilities, play with jQuery UI and implement some nice AJAX functionality.

http://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/



Demo

http://demo.tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/demo.php

cometchat

cometchat

If you want to know more follow the link below

http://www.cometchat.com/

Demo

http://www.cometchat.com/demo

Chat Facebook Style jQuery

Chat Facebook Style jQuery

Everyone loves the gmail and facebook inline chat modules. This jQuery chat module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.

If you want to know more and download the source follow the link below

http://anantgarg.com/2009/05/13/gmail-facebook-style-jquery-chat/

Demo

http://anantgarg.com/chat/samplea.php

Download

http://anantgarg.com/wp-content/uploads/2009/05/jquerychat.zip

http://dl.dropbox.com/u/3293191/JQUERY/Gmail%20Facebook%20Style%20jQuery%20Chat.zip

FcbkListSelection Facebook like

FcbkListSelection Facebook like

FcbkListSelection – fancy item selector (like facebook friends selector) with wide range of options.

If you want to know more and download the source follow the link below

http://www.emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html

Facebook-like Registration Form with jQuery

Facebook-like Registration Form with jQuery

Facebook is a showcase of great UI design. And it has also raised the bar for web development, pushing developers to meet higher expectations.

http://tutorialzine.com/2009/08/creating-a-facebook-like-registration-form-with-jquery/

Demo

http://demo.tutorialzine.com/2009/08/creating-a-facebook-like-registration-form-with-jquery/

http://dl.dropbox.com/u/3293191/JQUERY/Facebook-like%20Registration%20Form%20with%20jQuery.zip

Realtime Related Tweets Bar Twitter jQuery

Realtime Related Tweets Bar Twitter jQuery

Put up instant tweets related to a content of your choice with the Realtime Related Tweets Bar.

If you want to know more and download the source follow the link below

http://www.moretechtips.net/2009/09/realtime-related-tweets-bar-another.html

Juitter

Juitter

Juitter has a live mode which can display the latest tweets. It can display tweets from/to a user and containing any keywords. Optionally.

If you want to know more and download the source follow the link below

http://juitter.com/

Display Twitter Tweets on a Blog

Display Twitter Tweets on a Blog

If you want to know more and download the source follow the link below

http://www.mudaimemo.com/p/twit/

Twitter Ticker - jQuery

Twitter Ticker - jQuery

Twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

If you want to know more and download the source follow the link below

http://tutorialzine.com/2009/10/jquery-twitter-ticker/

Demo

http://demo.tutorialzine.com/2009/10/jquery-twitter-ticker/demo.html

Twitter Friends & Followers list - jQuery Plugin

Twitter Friends & Followers - jQuery Plugin

a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends.

If you want to know more and download the source follow the link below

http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html

A Twitter List Powered Fan Page

A Twitter List Powered Fan Page

Twitter rolled out a great new feature on their site – lists. You can now create and compile a list of twitter users and make it easier for others to follow.

If you want to know more and download the source follow the link below

http://tutorialzine.com/2009/11/twitter-list-ajax-fanpage/

Demo

http://demo.tutorialzine.com/2009/11/twitter-list-ajax-fanpage/demo.html

Twitter Timeline jquery

Twitter Timeline jquery

With this plugin you will create twitter-like timeline, where you can view and post your tweets.

If you want to know more and download the source follow the link below

http://tutorialzine.com/2009/09/making-our-own-twitter-timeline/


Demo

http://demo.tutorialzine.com/2009/09/making-our-own-twitter-timeline/

http://dl.dropbox.com/u/3293191/JQUERY/Making%20Our%20Own%20Twitter%20Timeline.zip

jQuery width PHP/MySQL Contact Form

jQuery width PHP/MySQL Contact Form

If you want to know more and download the source follow the link below

http://tympanus.net/codrops/2010/03/12/php-mysql-contact-form-with-jquery/

Demo

http://tympanus.net/Tutorials/ContactForm/index1.php

SEO Tools - URL Rewriting

SEO Tools - URL Rewriting

Static URLs are known to be better than dynamic URLs for a number of reasons:
Static URLs typically rank better in search engines.
Search engines are known to index the content of dynamic pages much more slowly than that of static pages.
Static URLs look friendlier to end users.

Example of a dynamic URL
http://www.yourdomain.com/profile.php?mode=view&u=7

Examples of the above static URL
http://www.yourdomain.com/profile-mode-view-u-7.html
or
http://www.yourdomain.com/profile/mode/view/u/7/

//example
//Method 1 - Single Page URL
//ex dynamic URL
//http://www.domain.com/profile.php?mode=view&u=7

//After converting your dynamic URL
//http://www.domain.com/profile-mode-view-u-7.html

//Create a .htaccess file with the code below
Options +FollowSymLinks
RewriteEngine on
RewriteRule profile-mode-(.*)-u-(.*)\.html$ profile.php?mode=$1&u=$2


//Method 2 - Directory Type URL
//ex. dynamic url
//http://www.domain.com/profile.php?mode=view&u=7

//After converting your dynamic URL
//http://www.domain.com/profile/mode/view/u/7/

//Create a .htaccess file with the code below

Options +FollowSymLinks
RewriteEngine on
RewriteRule profile/mode/(.*)/u/(.*)/ profile.php?mode=$1&u=$2

.htaccess: redirecting no www. to www.

.htaccess: redirecting no www. to www.

To redirect visitors from the www.-less domain we add the following code to our .htaccess file:

//Add the code to the .htaccess file

Options +FollowSymlinks
RewriteEngine on
RewriteCond %{http_host} ^yourdomain.com [nc]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [r=301,nc]

.htaccess: Disabling access to browse files on directories

.htaccess: Disabling access to browse files on directories

some website allow users to browse files on a particular directory on your website. Although this .htaccess files which will block access to browsing directories.

Download

http://dl.dropbox.com/u/3293191/htaccess/.htaccess

//Add the code to the .htaccess file
Options -Indexes

10 ultimate Firefox add-ons for Web Designers

10 ultimate Firefox add-ons for Web Designers

1. ColorZilla
2. Firebug
3. FastestFox – Browse Faster
4. FireFTP
5. FirePHP
6. FireShot
7. HttpFox
8. MeasureIt
9. Pencil
10. Web Developer

Adobe Pen Tool Cheatsheet

Adobe Pen Tool Cheatsheet

http://creativetechs.com/tipsblog/adobe-pen-tool-cheatsheet/

pdf file

http://www.creativetechs.com/tips/tip_resources/AdobePenTool-Cheatsheet.pdf

http://dl.dropbox.com/u/3293191/AdobePenTool-Cheatsheet.pdf

PHP reference sheet – basics

PHP reference sheet – basics

If you want to know more and download the source follow the link below

http://www.dreamincode.net/downloads/ref_sheets/php_reference_sheet.pdf



http://dl.dropbox.com/u/3293191/php_reference_sheet.pdf

Wordpress help sheet

Wordpress help sheet

If you want to know more and download the source follow the link below

http://wpcandy.com/wp-content/uploads/WordPress-Help-Sheet.pdf


http://dl.dropbox.com/u/3293191/WordPress-Help-Sheet.pdf

FileZilla

FileZilla

FileZilla is the best free FTP client. (FTP is what you use to upload your files and put your website online).

If you want to know more and download the source follow the link below


http://filezilla-project.org/

SlickMap CSS for Developers and Designers

SlickMap CSS for Developers and Designers

This simple stylesheet allows you to display finished sitemaps directly from HTML unordered list navigation. It streamlines the web design process as it automates the illustration of site map and allows you to develop HTML navigation. It also offers additional links which can be customized as per your requirement and preferences. It also eliminates the need for additional software and provides clickable anchors with visible URLs.

If you want to know more and download the source follow the link below


http://astuteo.com/slickmap/

Fun with forms- Customized Input Elements

Fun with forms- Customized Input Elements

If you want to know more and download the source follow the link below


http://www.picment.com/articles/css/funwithforms/

CSS-Only, Table-less Forms

CSS-Only, Table-less Forms

If you want to know more and download the source follow the link below


http://jeffhowden.com/code/css/forms/

Using CSS to Create a Two-Column Layout

Using CSS to Create a Two-Column Layout

If you want to know more and download the source follow the link below

http://www.websiteoptimization.com/speed/tweak/forms/

A Prettier Accessible Forms

A Prettier Accessible Forms

If you want to know more and download the source follow the link below


http://www.alistapart.com/articles/prettyaccessibleforms

Fancy Form Design Using CSS

Fancy Form Design Using CSS

If you want to know more and download the source follow the link below


http://articles.sitepoint.com/article/fancy-form-design-css

Clean and pure CSS FORM design

Clean and pure CSS FORM design

If you want to know more and download the source follow the link below

http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

How to add custom Seach google.com

How to add custom Seach google.com

1. Custom search URL http://www.google.com/cse/

2. start create a custom search engine









3. Fill Basic information fields
4. Select Search engines I've created
5. Select Control panel
6. Get Code














7. Sample

WAMP Server - Windows-based web server

WAMP Server - Windows-based web server

WampServer is an open source WAMP (Windows Apache MySQL and PHP) web server, free to use with a GPL license. must-have web development suite for web developers running any Windows Operating System.

If you want to know more and download the source follow the link below




http://www.wampserver.com/en/