Tutorials Archive » Javascript

15+ jQuery Popup Modal Dialog Plugins and Tutorials

TutArchive — Fri, 25 Sep 2009 01:12:51 +0000

jQuery Popup Modal Dialog Windows

Modal dialog windows are a great way to show quick information to your users, but to also alert them of errors, warnings, prompts for information and more. When you bring jQuery into the mix, you know you’re going to end up with a slick dialog that really makes the application or website come alive. The following is a list of 15+ jQuery Popup Modal Dialog Plugins and Tutorials.

There are a couple towards the bottom that you’ll want to pay attention to. On one the original is in Italian, but I’ve included a link to an English translation. The other is more on a backend, but I’ve included a link to the zip file for downloading the files.

Let the fun begin! If you know of any that are missing but should be included, drop a comment!

jqModal
qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

NyroModal
Modal popup windows provide a quick way to show data without reloading the entire page. One of the big problems with jQuery Popup Modal Dialog window plugins is the customization. This plugin tries to solve those problems. The default CSS contains only optional rules. Without it, the plugin will works perfectly —but will also looks very sad. Regarding the animations, you can simply redefine them from A to Z.

Simple jQuery Modal Window Tutorial
In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.

jQuery UI Dialog
The jQuery UI framework offers up a functional Dialog widget that allows resizing and also the ability to display forms. The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.

SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Boxy
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

jQuery BlockUI Plugin
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

jQuery Impromptu
jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Alert Dialogs (Alert, Confirm & Prompt Replacements)
This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? These are completely customizable via CSS. You can set a custom title for each dialog. IE7 users get an ugly warning and usually have to reload the page if you use a regular prompt(). These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars.

How to Create a Stunning and Smooth Popup Using jQuery
Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial.

jQuery Ajax Validation Contact Form with Modal + Slide-in Transition
Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.

Creating an Exit Modal Box using jQuery
Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window. To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Upload in Modal Window and Pass Values with jQuery
Do you publish your blogs with Wordpress? If yes, you know the inline popup window which opens if you like to upload / insert an image into your article. This tutorial shows you how-to use the jQuery Plugin ThickBox and some jQuery code to upload a file and pass a value to the parent page. You can use this kind of feature in your custom CMS or maybe you like use it as a basic for your own file upload plugin or gadget?

jQuery Modal Choose Component
This original article is written in Italian, but here is the translated English version. I wanted to be sure and include this in the rundown because it gives another option on how to allow users to choose values for a form field. It’s designed as an alternative to the combo box, or select dropdown menu. It’s not perfect, but it’s an interesting take on a common UI component and I believe deserves to be on the list.

jQuery Modal Dialog Plugin
This plugin link goes to the working example and documenation page that shows off some real nice jQuery modal dialogs for errors, warnings, prompts and more. Getting to the download is a little tricky unless you follow this link to download.

ColorBox
ColorBox is a lightweight, customizable lightbox plugin that simulates some things that you would like to accomplish with a jQuery popup modal dialog window. It can allow you to show popup ajax, inline and iframed content as well as photos and other media. It’s writting in jQuery plugin format and can be chained with other jQuery commands.

Object Oriented Programming with JavaScript : Timer Class

TutArchive — Tue, 22 Sep 2009 02:06:23 +0000

JavaScript with Oops is not much used by developers while creating application however we can make our life easy if we use JavaScript with Oops.

Let's started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.
Create Class

Create the class Timer. Below code shows how to declare the class

// Declaring class "Timer"
var Timer = function()
{
    // ....
    // Class body
    // ....
}

Add Public Properties

To add public properties to the class we use this keyword as shown below

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
}

You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.
Add Events (If any)

Now we might want to add events to the class in case we need. For Timer class we need "Tick" event which will be fired every after "Interval". Event are added the same way as the public properties.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
}

Add Private Member Variables
We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using 'var' keyword.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
}

Add Functions
Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first "Start" to start the timer and second "Stop" to stop the timer.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick();
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};

You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.

Using the Class
To use the class first create the instance of Timer.

var obj = new Timer();

Now assign the value to its properties as needed.

obj.Interval = 300;

Attach handler to the events

obj.Tick = timer_tick;
 
function timer_tick()
{
    // Do something..
}

Now call the "Start" function to start the timer

obj.Start();

To stop the timer anytime in between just call the "Stop" function.

obj.Stop();

Source: Dailycoding

Using RegEx (Regular Expressions) in JavaScript

TutArchive — Tue, 22 Sep 2009 01:56:52 +0000

Javascript has built-in support for regular expression in almost all browsers. This means you can use regular expression at client side too. You can use to validate the user's input data at client side itself to reduce the server side processing, however you may want to check those at server side too for security problems.

To use regular expression in javascript you can use the RegExp object

var myRegExp = new RegExp("[a-zA-z]+");

Or you can directly creates its instance by using special syntax

var myRegExp = /[a-zA-z]+/

To test a string against a RegExp

var myRegExp = /[a-zA-z]+/;
if(myRegExp.test("dailycoding"))
{
  // Success
}
else
{
  // Fail
}

If you want to extract multiple matched from the input string

var myRegExp = /[a-zA-z]+/;
var inputString = "www.dailycoding.com";
var myMatches = document.frm1.txt1.value.match(myRegExp);
for(var i=0; i<myMatches.length; i++) 
{
  alert(myMatches[i]);
}

Checking Username Availability with Mootools and Request.JSON

TutArchive — Sun, 20 Sep 2009 01:05:59 +0000

This tutorial will teach you how to check username availability with Mootools' Request.JSON and PHP/MySQL

In this tutorial you will learn how to use Mootools' Request.JSON function to check a username against an array or database. In this example we will be using a simple MySQL database. I will try to do as much hand holding as I can, but having a little experience with PHP and MySQL will be a plus.

Tutorial Details

PHP Server and MySQL Database required
Difficulty: Beginner/Intermediate
Estimated Completion Time: 30 - 45 Minutes

Step 1 - The Setup

We are going to create a simple database and add a table. After that we will add a username into the database.

CREATE TABLE IF NOT EXISTS ajax_users (
	id INT(2) NOT NULL PRIMARY KEY AUTO_INCREMENT,
	user_name VARCHAR(128) NOT NULL
);
 
INSERT INTO ajax_users VALUES('NULL','matt');

Step 2 - The Skeleton

For the first step we will create a simple page with one input field for the username and a submit button. Go ahead and open your favorite coding app - mine happens to be Coda - and create a new blank document named index.php. First I'll show you the end result code for this step and then I'll explain it in detail. I find that re-writting the code myself helps it stick, but you can copy and paste if you want.

<div id="container">
<div id="content">
 
    		<fieldset>
<form id="signup" method="post">
<ul class="form">
	<li>
    						<label for="user_name">Username</label>
    						<input name="user_name" type="text" /></li>
	<li><input type="submit" value="Sign Up Now!" /></li>
</ul>
</form>
 
    		</fieldset></div>
</div>

Now we've got a pretty basic site layout. It will start to come together in step 2 so don't worry if it doesn't really look like much right now.

Step 3 - A little Style

Feel free to style this up however you like, or use the CSS file from the source code.

Step 4 - The Javascript Setup

We are going to need to include the Mootools framework into our php file. Without this, we can't use any of Mootools' classes or functions for our script. There are two ways of doing this. The first way is to use Google's AJAX Libraries API to link to the file. You can view the path Here. The Google libraries give you access to many frameworks so take a look around after you're done the tutorial. To speed things up, we can just use the piece of code below. Place this in your section of your php file.

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js" type="text/javacript">script>

The second way is to head over to the Mootools site

Now that we have the Mootools framework included in our file, we can go ahead and create a new file called main.js, or whatever you want to name it. Once this file has been created lets include it in our php file.

<script src="path-to-your-file/main.js" type="text/javacript">script>

Go ahead and place that at the bottom of our php file. If you haven't already, let's open up our main.js file.

Step 5 - The Mootools

This part can get a little tricky. Make sure the two files you have open are index.php and main.js as we will be moving back and forth between the files to give you a better idea of how Mootools interacts with the elements in index.php.

The first piece of code we are going to add to main.js tells our Mootools script to execute some code when the DOM has loaded.

	window.addEvent('domready', function() {
		//We are going to fill this with Mootools goodness
	});

Now that the main business is taken care of, we can get our hands dirty.

Step 6 - Adding Events

We need to figure out a way to find out when a user has interacted with our user name input field. We do this using events. Events are Mootools' way of performing some action(s) when a user does something. This can include clicking on a link, pressing down a key, releasing a key, mousing over etc. For this example we are going to fire an event when the user releases a key in the username field.

Before we add the event, we need to give out user name input an ID. Without an ID, Mootools doesn't know which input we are talking about when we tell it to add an event.

Go ahead and add an ID to your user name input in index.php

<input id="user_name" name="user_name" type="text" />

Ok, I swear we will start coding some Mootools right now. Switch back to main.js. Inside your window event, add this code.

$('user_name').addEvent('keyup',function(){
//This is what is fired when the user releases a key inside the username input
}

Step 7 - The Request

Now that we have the event linked up, we can build the request to send when the event is fired. We are going to put this piece of code inside out event.

	...
	The start of our event
	...
 
    	new Request.JSON({
    		url: "inc/php/json.php",
    		onSuccess: function(response){
 
    		}
    	}).get($('signup'));
 
	...
	The end of our event
	...

Pretty simple looking, eh?! We start off by declaring our request. The first variable is url. This is the path to our PHP that houses our JSON magic. For now, just put in a path to a future file. The second variable is onSuccess. This is a function that is fired if our request is successful. This is where we will put most of our remaining code. Our last little bit, which is easy to look over is the .get($('signup')) variable trailing our request. This takes all our info from our form in index.php and sends it with the JSON request. Without this, the request isn't sending any data, and is pretty much useless. We've now made it useful!

We should probably make our JSON file right now so we don't run into any errors.

Step 8 - The JSON

The concept behind our JSON file is pretty simple in theory. It takes our variables, does whatever we want with it, and then sends it back to our main.js file, all behind the scenes. This is awesome. Take a second to collect yourself.

Ok, now we are all calm, lets create a new file called json.php. If you added the path to your main.js file, name it the same and place it into proper folder. Open this sucker up!

//setup a blank variable
//we will use this as an array to send back
$result = null;

Simple right? The first step is creating a null variable that we will be using as an array later on. Next, we need to connect to our database.

//connect to the mysql database
mysql_connect('localhost', 'root', 'root') or die('Error connecting to mysql');
mysql_select_db('tutorials') or die('Error connecting to table');

We should be all connected. Fill in your database information above. To make sure everything is running smoothly, point to your json.php file. If the page is blank, we are golden. If you see database connection errors, we have a problem. This is usually just a misspelled host/username/password. Double check!

//format the variables
$user_name = mysql_real_escape_string($_GET['user_name']);
 
//check the database for any users named $user_name
$grab_user = mysql_query("SELECT `user_name` FROM `ajax_users` WHERE `user_name` = '$user_name'");
 
//check if the query returned anything
if(mysql_num_rows($grab_user) == 0){
 
	//no user by that name
	$result['action'] = 'success';
 
}else{
 
	//oops, already taken
	$result['action'] = 'error';
 
}

All the variables sent to our json our sent as $_GET. If you've worked with forms before, this shouldn't be anything different. If you haven't worked with PHP forms before, please take a quick look at this page.

We are putting the $_GET variable into a new variable to clean everything up. By wrapping the $_GET variable in the mysql_real_escape_string() function, we are making sure to combat mysql injection. Injection is bad!

Next is the query. We are grabbing any rows from our MySQL database where the user_name row is equal to whatever the user has typed into the user_name input. If the query returns 0, there is no user name match.

If there is no match, we add an action variable to our result array and give it a value of success. If there is a match, we simply give it a value of error.

$result['user_name'] = $_GET['user_name'];
 
//send the response back
echo json_encode($result);

Finally, we add a user_name variable to the result array and give it a value of our $_GET variable and send it back to main.js using the json_encode() function.

When the JSON is encoded and sent back to the main.js file it looks like the code below

{"action":"success","user_name":"matt"}

That ends the json file, you can save it and close it. You will not need it for this example anymore! Switch back to main.js

Step 9 - Dealing with the Request

We've sent the request, we've checked if the user name exists and we sent the response. So what now? Now we are going to use Mootools to sort through the response and alert the user. How does main.js see what the response is? If we take a quick look back at our onSuccess function, you'll notice that the only variable passed in the function is response. This is the variable that now houses your JSON response. Please add this code inside our onSuccess function.

if(response.action == 'success'){
 
//We are good!
 
}else{
 
//Username is taken, ouch?!
alert('Username Taken');
 
}

We haven't been able to test if our little application is even working right now, so lets take a second to do a quick test. Point your browser to index.php and type matt into your user_name input. Once you are done typing, matt an alert should popup saying Username Taken. You can now delete that alert; it is not needed anymore.

Alerts are boring. They're ugly, they're not very user friendly. Alerts are bad! We need a way to alert the user in a nice, design and user friendly way to alert the user. Open up your style.css and add some styles to your input.

input.success{
	border: 3px solid #9ad81f;
}
 
input.error{
	border: 3px solid #b92929;
}

We have our styles, and we are receiving a response, lets change the inputs style depending on the response.

$('user_name').removeClass('error');
$('user_name').addClass('success');

We are taking our input and making sure Mootools can find it using $(). After that we add/remove our classes. We make sure to remove the error class incase the script has already added it to our input, then we add the success class. This stops the scripts from adding multiple classes to the input and making it look like input.error.success.error.success. For the response that throws an error, simply reverse the add/remove order.

Give that a test. The input box should have a green outline until you enter in matt as a user name. The input box should then turn red.

That's it. That's the bare bones version of this script. If you want, you can stop reading now and show-off your new tricks to your friends, or you can continue reading. I'm going to expand on the script to make it just a little bit more user friendly.

Step 10 - 1000 Requests

Right now, the script is firing every time a user releases a key. What if you force users to have user names longer than 3 characters. We are basically wasting 3 requests when really, we can just tell the script not to fire unless the input value is more then 3 characters long. This will cut back on the number of requests we are sending to the JSON script!

...
The start of our user name event
...
 
	var input_value = this.value;
 
	if(input_value.length &gt; 3){
 
		...
		Request Event
		...
 
	}
 
...
The end of our user name event
...

If we wrap our request with the above code, it will only fire the request when the input value is greater than 3. First we put the value into our variable using this.value. this represents our user_name input. Next we check if the length of our value is greater than 3. We do this by using input_value.length. Give it a quick test.

Step 11 - Visuals Please

Remember in our JSON file we were sending our user name value back with our response. This is why. Open up index.php and add a p right underneath our input.

Now that we have our p with an id of response, we can make Mootools insert some text into it. Open up main.js and place this code inside the onSuccess function.

   $('response').set('html',''+response.user_name+' is Available');

Mootools takes $('response') and uses the set() function to insert some text. The first option is what kind of data are we setting. This can either be html or text. Because we are sending an tag are a result, we are using html. We are using response.user_name to grab the user_name variable from our JSON response to keep the user up to date. For the error section, copy over the piece of code and change around the text a little bit to let the user know that the user name is taken.

Step 12 - Submission

Right now, even though we are saying that the user name is taken, the user can still submit the form. This means you would have to use PHP to do another level of error checking. This is unnecessary when we could just check right now! Open up index.php and find our submit button. Lets disable it!

<input id="submit_button" disabled="disabled" type="submit" value="Sign Up Now!" />

We gave out submit button an id of submit_button so that Mootools can talk to it. Near the close tag we also added disabled. If you point your browser to index.php and try and click on the button, you will notice that nothing will happen. The form has been disabled. Open up main.js

   $('submit_button').disabled = false;

If we add that piece of code in our response.success area, it will enable the button. Simply add it to the reponse.error section, change false to true and give it a test. When the user name is available, you should be able to click the button. When taken, the button should be disabled.

Step 13 - The Cleanup

The user has inserted some text, and then deleted all the text from the input. If you notice all the alerts stay on the screen. This is a bit messy. We should probably fix that. Open main.js.

...
The end of our user name event
...
 
$('user_name').addEvent('blur',function(e){
 
   	if(this.value == ''){
 
   		$('user_name').removeClass('success');
   		$('user_name').removeClass('error');
   		$('response').set('html','');
 
   		$('submit_button').disabled = true;
 
   	}
 
   });

hen the user clicks away from the input, it will fire the event blur. If the input box value is empty, we remove all classes, set the response p to empty and disable the button. Nice and tidy!

The End

I hope this tutorial has helped to teach you some of the fundamentals when using simple JSON requests and interacting with elements on the page with Mootools

jQuery Lightbox

TutArchive — Fri, 18 Sep 2009 15:36:09 +0000

I couldn't tell you how many lightboxes I've used over the last few month. This specific lightbox was designed as a plugin for the jQuery library. It works perfectly, and more importantly, requires no additional markup to your document. You only need to call it from your Javascript file. You'll have zero problems!

Download

15+ jQuery Popup Modal Dialog Plugins and Tutorials

11 Classic CSS Techniques Made Simple with CSS3

TutArchive — Thu, 17 Sep 2009 16:10:37 +0000

CSS3? What's that?!

I'm sure you've heard of CSS in general. CSS3 isn't that much different, in terms of syntax; however, the power of CSS3 is much greater. As you'll see in these eleven techniques, you can have multiple backgrounds, dynamically resize those backgrounds, border radiuses, text shadows, and more!

Here's what the official (or at least, what I consider official) website of CSS3, css3.info, has to say about CSS3:

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

Here are the 11 techniques that I'll be showing you how to recreate with CSS3. I'll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties. Remember - these effects will only work in modern browsers that implement these CSS3 features. Your best option is to view these with Safari 4.

Rounded Corners
Box Shadow
Text Shadow
Fancy Font
Opacity
RGBA
Background Size
Multiple Backgrounds
Columns
Border Image
Animations

1. Rounded Corners

Probably my favorite on of this list, rounded corners provide a developer with so many options. You can create a rounded corner button in seconds. My favorite thing to do is set a gradient background to repeat along the x-axis and then apply rounded corners to make a very nice looking Web 2.0 button.

You can simulate rounded corners by using four extra divs or by using JavaScript. Though, a user doesn't see these smooth corners if they have JavaScript disabled, I think that's fine as long as the website still functions as it should. You can read up on this method if you would prefer to use pure CSS in making rounded corners.

Classic Way

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.corners.js" type="text/javascript"></script>
<script type="text/javascript"></script>
<div class="box">
	</div>

The classical method uses jQuery along with a JavaScript plugin called Corners.

CSS3 Way

The classical method uses jQuery along with a JavaScript plugin called Corners.


<div class="box">
	</div>

As you can see, all that you need to do is specify three CSS3 properties. Eventually, it will only be one; you have to use three now because different browsers use different property names.

2. Box Shadow

Box shadows provide you with a very powerful tool. 99% of the time when I'm desigining, I find myself using drop shadows for something. Once again, I'll be using a jQuery plugin to take care of the classic way because honestly, trying to figure it out with just CSS is confusing. Why should I waste my time fiddling with negative margins when there's already something written that does the job for me? As long as my design looks fine when people have JavaScript disabled, I'm perfectly content using a jQuery plugin.

Classic Way

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dropShadow.js" type="text/javascript"></script>
<script type="text/javascript"></script>
<div class="box">
	</div>

I'm using the dropShadow plugin. Simple and what I wanted; though I would prefer to use just CSS .

CSS3 Way


<div class="box">
	</div>

3. Text Shadow

If you've ever read a tutorial about how to make the letterpress effect in Photoshop, you'll know that the drop shadow effect is used. It's really simple to create letterpressed text, just follow this tutorial at Line25 by Chris Spooner.

Classic Way


<div class="fonts">
	<span class="font">The quick brown fox jumps over the lazy dog.</span>
	<span class="font second">The quick brown fox jumps over the lazy dog.</span></div>

Instead of using a jQuery plugin this time, I just used some simple CSS tricks to absolutely position the text behind the other copy of text. The only bad thing about not using CSS3 for this situation is that you will get two copies of the text if CSS is disabled.

CSS3 Way


 
<span class="font">The quick brown fox jumps over the lazy dog.</span>

4. Fancy Font

We've dreamed about it for a long time now, but you can finally display "fancy fonts" on the web without relying on JavaScript. Of course this causes some issues with allowing paid fonts to be distributed over the internet. Anyhow, I present you with @font-face.

Classic Way

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/loyal.js" type="text/javascript"></script>
<script type="text/javascript"></script>

 
<span class="font">The quick brown fox jumps over the lazy dog.</span>

I decided to use Cufón to replace the text. I'm not going to explain how to use it because Jeffrey has an awesome screencast already.

CSS3 Way


 
<span class="font">The quick brown fox jumps over the lazy dog.
</span>

We create a font family with @font-face and then use it as a value for font-family. Michael Owens wrote an article here about a month ago which explains @font-face quite well.

5. Opacity

If you've visited the Envato website redesign lately, you might have noticed that there are a lot of transparent elements. Though this is achieved with transparent PNGs, you can achieve a similar effect by using the opacity property. Now, the opacity property has been around for a while, but our beloved IE has its own properties.

Classic Way


<div class="box">
	</div>

CSS3 Way


<div class="box">
	</div>

6. RGBA

Everyone knows what RGB stands for (red, green, blue), but what does the A stand for? It stands for alpha, which refers to the transparency.

Other than rounded corners, RGBA is my next most used CSS3 property. Sometimes I just want to add a few light white/black background to navigation links when a user hover overs them. It's much easier than creating a new image for each color; however, with a little PHP it makes things a lot easier.

Classic Way

Seeing as how this isn't a PHP article, I won't be going over the PHP. Just save this file as rgba.php and when you need a certain RGBA color, make the background "color" as url(rgba.php?r=R&g=G&b=B&a=A).

Now just apply that to a div...


<div class="box">
	</div>

CSS3 Way

7. Background Size

The background size property is an amazing thing to have on your tool belt when you're creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it's like adding another background property.

Classic Way


<div class="box">
<div class="content">
		</div>
<img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" /></div>

CSS3 Way


<div class="box">
	</div>

8. Multiple Backgrounds

Ah, multiple backgrounds. Now this give developers a very powerful tool. I can think of so many things that require multiple divs just to have more than one background. The most common place I can see this being helpful is in a header section of the website, but that's just the first thing I thought of.
Classic Way

The classic method is pretty obvious, just wrap the div with another div and so on for each background you need. Produces lovely looking code, doesn't it?

CSS3 Way


<div class="box">
	</div>

The syntax is really easy to pick up on this one. All you do for the multiple backgrounds is add a comma in between each one! However, once again, this is a limited property and is only in Safari.

9. Columns

This is the most interesting CSS3 property I've come by. It's not something you see a lot in web design. Myself, I've only seen newspaper-like columns once or twice; however, I love how the effect looks when done correctly. Normally you would separate the content into divs and float those divs, but I found a jQuery plugin which dynamically renders the columns.

Classic Way

<div class="columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</div>

I've added a little padding to the columns just so the text isn't smashed up against each other.

CSS3 Way


<div class="columns">
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.</div>

There are a handful of other CSS3 column properties that you can apply, but for demonstrative purposes, I only specified the number of columns. If you'd like to learn more about these other properties, check out the multi-column page at CSS3.info.

10. Border Image

I had no clue about the border image property until I upgraded to Firefox 3.5 and went to Chris Spooner's website and saw that his post images had image borders. I personally don't have any interest in this property, but that's not going to stop me from explaining how to achieve it.

Classic Way

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.borderImage.js" type="text/javascript"></script>
<script type="text/javascript"></script>

<div class="box">
	</div>

Instead of spending the time creating multiple divs and repeating the background image around the div, I found a jQuery plugin that does the work for me. It's called borderImage and works just like it should.

CSS3 Way


<div class="box">
	</div>

As you can see, the border image property is a bit odd. W3 explains how it gets calculated MUCH better.

11. Animations

Alright, who doesn't love to see some element gently slide to the left or fade in when you hover over something? Animations are great to increase user interface, but make sure that you don't go over board! The only browsers that support CSS3 animations are Webkit based browsers. The only other way to display animations is to use JavaScript. I'll be using jQuery because it's my favorite JavaScript library (if you haven't guessed by now).

Classic Way

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"></script>

<div class="box">
	</div>

CSS3 Way


<div class="box">
	</div>

Both of these code snippets do the same thing: slide the div 20 pixels down over the course of 300 ms. Remember, the CSS3 code only works in Webkit browsers!

Conclusion

There you have it: 11 CSS techniques that will become much easier with CSS3 in the (hopefully near) future. Obviously, it'll be a while before we can 100% depend on these properties across all browsers.

Don't forget to review these other Nettuts+ tutorials that discuss CSS3:

From TutPlus

No related posts.