1stwebdesigner - Graphic and Web Design Blog » programming

Presenting the Great New Features of WordPress 3.1

Saad Bassi — Thu, 24 Feb 2011 06:55:19 +0000

Folks at WordPress have just released WordPress 3.1 (Code name “Reinhardt”), 14th version of World’s most famous and award-winning publishing software. This release has some fantabulous features like Internal Linking and a WordPress.com styled admin bar on front end which makes it very easy to visit most used features of back-end. Read on to have an overview of some major features of this release.

Internal Linking

We can’t stress enough on the importance of Internal linking for SEO of your WordPress blog. To be honest, the process of Internal linking was pretty painful unless you would use some plugins or hacks to find relevant posts for internal linking. With WordPress 3.1 this is a breeze now. WordPress now have built-in functionality to link your new content with already published content. Below is a screenshot of this kick-ass functionality.

I’ve updated my personal blog and I have to say I’m in love with it.

Admin Bar

If you visit WordPress.com as a logged-in user, you will see a bar at top of page which gives you shortcuts to important and most used areas of backend. With WordPress 3.1, you can enjoy the same functionality on self hosted blogs ;)

However if you don’t like this functionality, you can always disable it by going to your user profile.

Admin area Tweaks

Ajaxification: Latest version of WordPress also has improved the posts area too with Ajaxification. You don’t have to reload pages while searching for posts. Also you can go to specific page number by entering page number itself in Posts admin area. Below is a video for this functionality to even describe it better.

Overhauled Blue Theme of Admin area is also included in this release which looks stunning, a pretty good job done by UX team of WordPress.

Now we will cover new functionality from developer’s point of view.

Post Formats

Battle between WordPress and Tumblr is an open secret. Both of them have been trying to grab each other’s user base. Here at 1wd we are die-hard fans of WordPress and I am not reluctant in saying that I’m biased towards WordPress :) With these new Post formats, WordPress provides you out of the box functionality for creating and styling different type of posts i.e links,chat,photo etc.

Here is a pretty good write-up on post formats by core contributor of WordPress, Otto.

An Even Better CMS

WordPress 3.1 allows you to create advanced taxonomies and call custom field queries.Result of which is WordPress is even better and comprehensive CMS. Matt Mullenweg, Founder of WordPress summed up this pretty well in release post of 3.1.

There’s a bucket of candy for developers as well, including our new Post Formats support which makes it easy for themes to create portable tumblelogs with different styling for different types of posts, new CMS capabilities like archive pages for custom content types, a new Network Admin, an overhaul of the import and export system, and the ability to perform advanced taxonomy and custom fields queries.

With the 3.1 release, WordPress is more of a CMS than ever before. The only limit to what you can build is your imagination.

Here is a list of complete features and changelog in WordPress 3.1. All these exciting changes demand that you should upgrade your WordPress right now :D with no time delay. This update is available in your dashboard and you can download it as well from here

25 Beautiful Image Styling Tutorials With CSS,jQuery

Daniels Mekšs — Sat, 31 Jul 2010 10:00:16 +0000

Recently I wrote article about post thumbnail and you saw some great examples of image styling. As I wrote there, neat styled images can attract more visitors and you will be more pleasant with them yourself too.

You don’t have to always use Photoshop to style your images. Some cool effects can be achieved trough CSS, jQuery etc too and I strongly suggest you to continue reading to find out how to do it!

1. CSS3 Rounded Image With jQuery

Learn to wrap a span tag around the image element to achieve rounded images which will be displayed right in all modern browsers.

2.Multiple Backgrounds and Borders with CSS 2.1

Learn how to use CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element.

3. Quick Tip: Multiple Borders with Simple CSS

Quick screencast showing you how to achieve multiple borders with simple CSS that way adding more depth to your designs. Much simplier version of previous tutorial.

4. Multiple Borders on Dynamically Sized Elements with CSS2

Third version of Nicolas Gallagher showing you what to do if you don’t the size of element.

5. Have Fun w/ Borders – Beveled, Pressed, & More!

Learn how to achieve pressed effect with CSS and some simple border style tricks to get various effects.

6. Polaroids with CSS3

Learn how to use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of Polaroid pictures.

7. Perfect Full Page Background Image

Learn how to add background image with CSS that fills entire page with image, no white space, scales image as needed, does not cause scrollbars and much more.

8. CSS3 Box Shadow and Image Hover Effects

Explore a new way of adding drop shadow effects just by editing a style sheet.

9. Fancy Thumbnail Hover Effect w/ jQuery

Achieve neat flash-style effect with CSS and jQuery.

10. How To Create Simple CSS Image Rollover Effect

In this tutorial you are going to learn how to create simple CSS image rollover effect with basic HTML and CSS styling.

11. Floatutorial

Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. Check out 4 tutorials dedicated to image floating.

12. Snazzy Hover Effects Using CSS

In this tutorial, you will be going over creating flexible advanced hover techniques using CSS2.1 properties.

13. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). Learn how to put all states into one image makes dynamic changes faster and requires no preload.

14. jQuery Rounded Corners

Lots of jQuery effects for rounded corners and much more patterns.

15. Easiest Tooltip and Image Preview Using jQuery

See 3 examples of using jQuery rollover preview script. This simple script can be applied for a variety of purposes.

16. Supersized – Full Screen Background/Slideshow

jQuery Plugin

Superzided is a jQuery plugin that resizes images to fill browser while maintaining image dimension ratio and cycles Images/backgrounds via slideshow with transitions and preloading.

17. PNG Overlay

Have you ever run into the problem of creating a site with pictures given by the client, only to find later after they update their photography the original look and feel is not retained? This solution involves creating a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF. This way, a typical CMS installation can be configured so users can upload photos without having to worry about using any graphics program to apply filters.

18. BeZoom Lighweight JQuery Zoom Plugin

BeZoom is a simple and lightweight alternative for JQZoom. It’s lighter and it’s easier to use.

19. Using jQuery for Background Image Animations

Play with jQuery and change the position of the background image to create the type of effect you’re looking for. There’s a new article answering the “How do I handle active states?” – Handling Active State for jQuery Animated Backgrounds.

20. 5 Ways to Spice up Your Images with CSS

Here are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain.

21. How To: Resizeable Background Image

Learn how to set up resizeable background image with CSS. You have 3 options to choose from.

22. Style Your Image Links

Letting users know that particular section of our website is meant to be clicked on is best achieved through mouse over effect. Those “clickable” sections certainly include content images. Image Link is a script that enables you to apply additional styling to your image links.

23. Multiple Background Images with CSS

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

24. Image Borders with CSS

Really easy tutorial showing you how to add solid border to images using CSS.

25. CSS Sprites without Using Background Images

Learn how to apply hover effect without lot of knowledge about CSS sprites.

35 Security Plugins to Make Your WordPress Bulletproof

Daniels Mekšs — Wed, 28 Jul 2010 21:00:58 +0000

WordPress is the most popular blogging platform today. It’s being used by thousands of people all around the world. But because of the popularity, it’s getting more attention by hackers and spammers too. WordPress is very secure by itself, but there’s never too much ascertainable.

For simple users,who don’t code a lot, plugins is the best way to secure your blog. They’re free, easily usable and safe. This post assembles 35 best plugins to make your blog bulletproof. They’re each devised for different purposes, so you will get the best protection from each field.

Secure Your Login

1. Semisecure Login Reimagined

Semisecure Login Reimagined increases the security of the login process by using a combination of public and secret-key encryption to encrypt the password on the client-side when a user logs in. JavaScript is required to enable encryption. It is most useful for situations where SSL is not available, but the administrator wishes to have some additional security measures in place without sacrificing convenience.

2. Stealth Login

This plugin allows you to create custom URLs for logging in, logging out, administration and registering for your WordPress blog. Instead of advertising your login URL on your homepage, you can create a URL of your choice that can be easier to remember than wp-login.php, for example you could set your login URL to http://www.myblog.com/login for an easy way to login to your website.

3. Login LockDown

Login LockDown records the IP address and timestamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range. This helps to prevent brute force password discovery.

4. Chap Secure Login

Whenever you try to login into your website, you can use this plugin to transmit your password encrypted. The encryption process is done by the Chap protocol. By activating the Chap Secure Login plugin, the only information transmitted unencrypted is the username, password is hidden with a random number (nonce) generated by the session – and opportunely transformed by the MD5 algorithm. In the first login there will be an error, but don’t worry is only a technical error. Indeed in the next login’s operation, if the values are correct, there will not be errors.

Admin Area

1. Admin SSL

Admin SSL secures login page, admin area, posts, pages – whatever you want – using Private or Shared SSL. Once you have activated the plugin, you have to go to the Admin SSL config page to enable SSL.

Database

1. WP-DB-Backup

WP-DB-Backup allows you easily to back up your core WordPress database tables. You may also backup other tables in the same database.

2. Remote Database Backup

This plugin creates SQL dumps of your WordPress database. It is based on the WordPress Database Backup plugin (http://www.ilfilosofo.com/blog/wp-db-backup) – but it removes some of the security restrictions in the plugin to enable automated remote backups. You still need the admin user name and password to do a remote backup.

3. WP-DB Manager

This plugin allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. It supports automatic scheduling of backing up and optimizing of database.

4. BackUpWordPress

BackUpWordPress is a backup & recovery suite for your WordPress website. This plugin allows you to back up database tables as well as files and comes with a rich set of options.

5. WordPress 1 Click EZ Backup

EZ Backup has been turned into a simple one click operation. Click the button and watch your files and database backup be created. You can create a backup of all your webspace files or backup just your wp-content folder all from this one plugin. Unlike the Full EZ Backup plugin this one does not require any special information such as usernames or passwords etc. This plugin costs $5.

6. myEASYbackup

This plugin allows you to back up, restore, migrate your WordPress installation, both files and mySQL tables with a single click. When performing a backup, myEASYbackup creates a compressed data set file that can be stored outside the WordPress installation directory. A list of all data sets on the server is also logged in the admin area.

Spam

1. Antispam Bee

AntispamBee protects blogs from digital rubbish. It is made up of sophisticated techniques and analyzes comments including pings. Also, for reasons of data privacy, the use of AntispamBee is a safe solution, as it is anonymous and registration-free.

2. NoSpamNX

NoSpamNX is the successor of Yawasp (Yet Another WordPress antispam plugin) and is a plugin to protect against automated comment spam (spambots). While Yawasp changed the names of the form fields in the comment template, NoSpamNX works without these modifications, but is equally effective. By eliminating the need for modifications the form field need maximum compatibility with other WordPress plugins or browser is ensured.

3. Akismet

Automattic Kismet (Akismet for short) is a collaborative effort to make comment and trackback spam a non-issue and restore innocence to blogging, so you never have to worry about spam again.

4. Math Comment Spam Protection

Asks the visitor making the comment to answer a simple math question. This is intended to prove that the visitor is a human being and not a spam robot. Example of such question: What is the sum of 2 and 9?

5. Defensio Anti-Spam

Defensio is an advanced spam filtering web service that learns and adapts to your behaviors and those of your readers. Advanced features such as support for OpenID, detailed statistics, charts, RSS feed of our comments (innocent and spam) and counter widget are also available.

6. SI CAPTCHA Anti-Spam

Adds CAPTCHA anti-spam methods to WordPress on the comment form, registration form, login, or all. In order to post comments or register, users will have to type in the code shown on the image. This prevents spam from automated bots. Adds security. Works great with Akismet. Also is fully WP, WPMU, and BuddyPress compatible.

7. reCAPTCHA

reCAPTCHA is an anti-spam method originating from Carnegie Mellon University which uses CAPTCHAs in a genius way. Instead of randomly generating useless characters which users grow tired of continuously typing in, risking the possibility that spammers will eventually write sophisticated spam bots which use OCR libraries to read the characters, reCAPTCHA uses a different approach.

8. Blackhole

Blackhole is a trap for bad bots. The concept is simple: include a hidden link to a robots.txt-forbidden directory somewhere on your pages. Bots that ignore or disobey your robots rules will crawl the link and fall into the trap, which then performs a WHOIS Lookup and records the event in the blackhole data file. Once added to the blacklist data file, bad bots immediately are denied access to your site.

9. Invisible Defender

This plugin protects registration, login and comment forms from spambots by adding two extra fields hidden by CSS. This approach gave me 100% anti-spam protection on one of my sites.

Other

1. Secure WordPress

Little help to secure your WordPress installation. This plugin removes error information on login page, adds index.html to plugin directory, removes the wp-version, except in admin area.

2. WP Security Scan

This plugin will scan your WordPress installation for security vulnerabilities and it will suggest some corrective actions.

3. AskApache Password Protect

This plugin doesn’t control WordPress or mess with your database, instead it utilizes fast, tried-and-true built-in Security features to add multiple layers of security to your blog. This plugin is specifically designed and regularly updated specifically to stop automated and unskilled attackers attempts to exploit vulnerabilities on your blog resulting in a hacked site.

4. TAC (Theme Authenticity Checker)

TAC stands for Theme Authenticity Checker. Currently, TAC searches the source files of every installed theme for signs of malicious code. If such code is found, TAC displays the path to the theme file, the line number, and a small snippet of the suspect code. As of v1.3 TAC also searches for and displays static links.

5. HTTP Authentication

The HTTP Authentication plugin allows you to use existing means of authenticating people to WordPress. This includes Apache’s basic HTTP authentication module and many others.

6. AntiVirus

Viruses, worms and malware exist for WordPress and could easily attack your WordPress installation. AntiVirus for WordPress monitors malicious injections and warns you of any possible attacks. It also has multilingual support.

7. Secure Files

This plugin allows you to upload and download files from outside of your web document root for security purposes. It can be used to can restrict file downloads to users that are logged in, or have a certain user level.

8. Replace WP-Version

Security your WordPress-Installation and eliminate or replace your wp-version and database-version on easy way with a small plugin. If you’re running an older version of WordPress, anyone can view source to see what attacks might work against your blog. This plugin replaces the WP-version with a random string < WP 2.4 and eliminate WP-version > WP 2.4.

9. WP Email Guard

WP Email Guard protects your email addresses included on any post or page from being crawled by spammers. It converts every email written within your post body into a JavaScript code, so the emails is readable and can be clicked by humans only. Spammers can’t crawl JavaScript.

10. WordPress File Monitor

Monitors your WordPress installation for added/deleted/changed files. When a change is detected an email alert can be sent to a specified address.

11. WP Dephorm

WP-Dephorm protects your users from the prying eyes of phorm. This is achieved by setting a cookie to opt out of the phorm information mining. Your blog viewers will not have their information stored and used in marketing campaigns whilst viewing your site.

12. WordPress Firewall

This WordPress plugin investigates web requests with simple WordPress-specific heuristics to identify and stop most obvious attacks. There exist a few powerful generic modules that do this; but they’re not always installed on web servers, and difficult to configure.

13. Secure Contact

SecureContact is a drop in form for users to contact you, based on the WP Contact Form plugin by Ryan Duff. It offers enhanced security by using captcha images.

14. Fast and Secure Contact Form

Fast and secure contact form for WordPress. This contact form lets your visitors send you a quick E-mail message. Blocks all common spammer tactics. Spam is no longer a problem. Includes a CAPTCHA and Akismet support. Additionally, the plugin has a multi-form feature, optional extra fields, and an option to redirect visitors to any URL after the message is sent. Super customizable.

15. Ultimate Security Check

The Ultimate Security Check plugin helps you identify security problems with your WordPress installation. It scans your blog for hundreds of known threats, then give you a security “grade” based on how well you have protected yourself.

16. Content Security Policy

Content Security Policy prevents content injection attacks by allowing admins to specify which sites they trust to serve JavaScript and other types of content in their site. Any content which is not explicitly allowed by the policy will be blocked from loading.

Further Resources

Improve Your Skills: 25 jQuery Beginner Tutorials Roundup

Daniels Mekšs — Sun, 11 Jul 2010 11:00:57 +0000

jQuery is the most popular JavaScript library that highlights the interaction between JavaScript and HTML. With jQuery you can write less and do more. jQuery has become an active trend and it’s features are growing rapidly.

I have assembled 25 beginner level tutorials for you to start knowing and exploiting jQuery and it’s powerful tools. After reading these guides and tutorials you will be able to proceed and start testing jQuery’s limits.

1. jQuery for Complete Beginners: Part 1

This is the first part of our series walking you through the process of learning the hugely popular JavaScript library jQuery from scratch. This series is aimed at people who have a strong knowledge of HTML and CSS and will include such topics like what is jQuery and how to include it into your code.

2. jQuery for Complete Beginners: Part 2

In this lesson you are going to learn how to select elements through their relationship with the element we are already interacting with. This may seem complicated, but it’s in fact very straightforward.

3. jQuery for Complete Beginners: Part 3

In this part you are going to put the skills you’ve learned in two past parts into practice and create a basic accordion.

4. jQuery for Absolute Beginners: The Complete Series

Fifteen video tutorials that teach you exactly how to use the jQuery library. You will start by downloading the library and eventually work our way up to creating an AJAX style-switcher.

5. jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

6. New to jQuery? Don’t be Scurred…

Once you get the jQuery basics down it’s not very hard to pull of some neat effects. Soh Tanaka teaches you 4 basic jQuery features.

7. Getting Started With jQuery

This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins.

8. Getting Started with jQuery

In this article, author will be introducing and laying the groundwork for advanced JavaScript development with jQuery. In this article he’s going beyond just quick-start syntax and instead provide a solid overview of jQuery and discuss the benefits of using such a library.

9. jQuery Essentials Presentation

Modern and good-looking presentation assembling all the summary of jQuery features and power.

10. Useful and Handy jQuery Tips and Tricks

As you get more familiar with the basics you’ll need to learn some tricks and cheats. This article will assemble all the jQuery tips and tricks and cheat sheets that web offers in a single page.

11. Questions and Answers From the List

Answers to some common questions beginners have about jQuery.

12. jQuery Tutorial for Beginners: Nothing But the Goods

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of.

13. Introduction to jQuery

This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

14. Intro to jQuery 2

Continuation of exploring the possibilities of jQuery. Revisit some of the old functions and make them do some smarter things. Explore IF/ELSE statement, AJAX-y .load() function, the CSS function, and then finish off by writing out your own custom function and going over how that layer of abstraction can help you keep your code clean.

15. Simple Guide: How To Get Started With jQuery

In this article, you will have a look at how to get started with jQuery, and writing your first script!

16. Selectors, Animation, and AJAX – jQuery Tutorial And Examples

For part two of our jQuery series, you will get a look at some special selectors, the animation method, and simple AJAX calls. Be sure to check out the demo for each section for an idea of how you could implement some of these ideas and scripts!

17. What Is jQuery?

This article provides a gentle introduction to jQuery and its uses.

18. Getting Started with jQuery

Find out how to start coding with the jQuery JavaScript library. Shows how to install jQuery, and explores jQuery objects and the jQuery() function. Example code included.

19. How jQuery Beginners can Test and Improve their Code

Making small changes to your code improves the readability and/or performance significantly. Here are some tips to get you on your way to optimizing your code.

20. Getting Friendly With jQuery

This article is the summation of Rajesh Pillai’s notes collected during my attempt to learn jQuery through various books and websites.

21. jQuery for Beginners – Step by Step Tutorial

Three series tutorial teaching you the basics step by step.

22. Beginner’s Guide to jQuery

Another quick guide introducing you to jQuery.

23. jQuery For Absolute Beginners

This video tutorial will show beginners exactly how to get started with jQuery.

24. JQuery Basics

25. The jQuery Basics

This tutorials teaches you some basic jQuery uses like showing/hiding and animation.

Further Resources

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

Daniels Mekšs — Tue, 06 Jul 2010 21:00:34 +0000

Navigation menus and buttons with CSS styling are being used in almost every website. There are a lot of techniques to utilize and a good developer should have some basic knowledge about them all.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

6. Horizontal Menus That Grow on You

In this quick tutorial, author is going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some great looking icons. Here author will show you how to implement it to your web page.

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover and position properties.

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

Show Time: 30 jQuery Calendar Date Picker Plugins

Valters Bergspics — Sun, 13 Jun 2010 10:00:26 +0000

Today we will be featuring calendar date pickers to let you output planners, calendars even more easier, most of these date pickers are built on jQuery and jQuery UI (User Interface).

I would consider these date pickers as frameworks with great functionality, but most of them require modifying and some styling, but I think it’s really acceptable since each project needs it’s own design and you should change style of calendar plugin too. These plugins will help you and your visitors keep track what’s happening in specific project and help to organize time!

1. Create astonishing iCal-like calendars with jQuery

This is tutorial how to make kind a like iPhone calendar application.

Download Now | View Example

1.1. Timeline calendar

Timeline is simple JavaScript driven calendar, which is written on top of jQuery JavaScript framework. Timeline is a horizontal representation of days in month. It can be used to display unlimited number of events with their descriptions.

View Demo

2.1. MagiCalender

View Demo

2. BlueShoes JS DatePicker Component

The DatePicker lets users easily select valid dates from a dropdown calendar. No need to worry about date formats, by picking dates it’s always correct.

Download Now | View Examples

3. Calendar – A Javascript class for Mootools

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Download Now | View Example

4. jQuery Calendar Widget Plugin

jQuery Calendar Widget Plugin is a simple jQuery Calendar Widget Plugin with a month view. You can specify which month you would like to display or have it display the current month. With just 100 lines of Javascript code, this plugin is light-weight and perfect for its purpose.

Download Now | View Example

5. JavaScript Calendar Component

Calendar Component that is very customizable and extendable.

Features:

Create any numbers of months per calendar.
Set the weekend, days off, holidays (dates off), start day of the week.
Start and end date.
Multi selection with limits or without.
Skinnable (using CSS).
Can have any number of calendars in any page.
Optimized for best performance.

View Example

6. Simple Calendar Widget

This flexible, simple pop-up calendar is written to work across browsers. It’s fully commented and customisable for language, colours and date format. The pop-up displays a month at a time from a specified range of years.

The optional input date determines the initial month displayed. The year can be in two or four digits while the month can be digits or a month name abbreviation that can easily be set up for any language. Any date or day of the week can be disabled (and re-enabled) using JavaScript on the calling page.

This is ideal for combination with server-side technologies to produce a professional application.

Download Now | View Example

7. DatePicker

Date Picker component with a lot of options and easy to fit in your web application.

Features:

Flat mode – as element in page
Multiple calendars in the component
Allows single, multiple or range selection
Mark dates as special, weekends, special days
Easy to customize the look by changing CSS
Localiation for months’ and days’ names
Custom day to start the week
Fits into the viewport

Download Now | View Example

8. Calendar System

Calendar System – the basic calendar.

Download Now | View Example

9. Tigra JavaScript Calendar

Tigra Calendar is a free cross-browser JavaScript Calendar control, it improves the user experience by enabling a drop-down calendar for date fields in HTML forms.

Download Now | View Example

10. Plans

One installation of plans can support many calendars. Calendars can share information with each other. Each calendar is managed independently (unique password, custom options, custom look & feel).

Multiple calendars running on the same installation of plans can be “embedded” in completely different websites. Plans uses a powerful and flexible recurring event model.

Plans supports multiple languages. Weeks can start on days other than Sunday. Plans supports arbitrary date formats (mm/dd/yy, dd/mm/yy, etc.) Plans can store data in flat files or an SQL database.

Download Now | View Example

11. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

page up/down – previous/next month
ctrl+page up/down – previous/next year
ctrl+home – current month or open when closed
ctrl+left/right – previous/next day
ctrl+up/down – previous/next week
enter – accept the selected date
ctrl+end – close and erase the date
escape – close the datepicker without selection

Download Now | View Example

12. The sliding date-picker

This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates.

Download Now | View Example

13. FullCalendar

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

Download Now | View Example

14. Unobtrusive Date-Picker Widget

Fully keyboard accessible
Multiple date formats and date dividers supported
Unobtrusive and nameSpace friendly
Fully skinnable with CSS
Both upper and lower date limits can be set
Certain days of the week can be disabled
Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
Includes “smart” localisation (16 languages currently available)
Bespoke days of the week can be highlighted
Works with single text inputs, split text inputs or select lists
It’s free to use, even commercially (Released under a CC share-alike license)

Download Now | View Example

15. Simple jQuery date-picker plugin

Features:

works on one or more text input elements ()
highlights a preset date (first looking for a value in the input, then a passed option / default, then just selects today)
closes when either a date is picked, the “today” button is hit, or the “close” button is hit
allows fast navigation using a