10 resources to get the most out of the CSS text-shadow property

By Jean-Baptiste Jung on December 5, 2009

Create a Letterpress Effect with CSS Text-Shadow

Let’s start this list of tutorials with one that will definitely show you the potential of the text-shadow property. In this tutorial, you’ll learn how to create a stunning (and very popular these days) text effect using CSS and the text-shadow property.

» Read tutorial

Creating cross browser compatible CSS text shadows

Since text-shadow is a part of CSS3, some browsers (who said IE??) have not implemented it yet, and some hacks need to be used to make it work properly.
The following article will show you how to create cross browser compatible text shadows.

» Read tutorial

Improve the Quality of Bold Text in Safari with text-shadow

Although Mac OS X has a pretty good font rendering engine, bold text in Safari is often a bit dirty. Did you know that by using the text-shadow property you can create beautiful bold text? This article will show you how to.

» Read tutorial

CSS text-shadow Fun: Realtime Lighting Demo

Using the text-shadow CSS property as well as some JavaScript, humorous experimental effects can be created. If you haven’t already, you can definitely say goodbye to Flash.

» Read tutorial

Cross browser text shadow

The filter non-standard property, which has been created by Microsoft, can fix some compatibility issues with IE 6, 7 and 8.
This interesting article will show you how to efficiently use the filter property to create text effects similar to those you can get with text-shadow.

» Read tutorial

Mootools text drop-shadow

When you need full cross-browser compatibility and still want to use CSS3 properties, JavaScript is always here to help. This tutorial will show you how to recreate the text-shadow CSS property using the MooTools JavaScript framework.

» Read tutorial

Text embossing technique with CSS

Text embossing is very popular in the world of web design and front-end web development. Indeed, even if I’m quite bored to see it on so many websites, it looks very nice.
And it is also very easy to implement. Just read this tutorial and you’ll know how to do it.

» Read tutorial

Photoshop like effects using CSS

Some browsers allow multiple values to the text-shadow property, which allow you to create effects like this one. I don’t think I’ll implement that kind of effect on any of my websites, but I’m happy to know how I can do it.

» Read tutorial

“Acid” text effect using text-shadow

Another nice text effect created using the text-shadow property. The page is in German, but fortunately everyone can understand the CSS code.

» Read tutorial

Super awesome buttons with CSS3

CSS buttons are very cool and they are a nice way to use your CSS3 skills. In this great tutorial, you’ll learn how to create stunning buttons using text-shadow and a few other CSS3 properties.

» Read tutorial

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 resources to get the most out of the CSS text-shadow property

Posted in | Leave a response

10 front-end techniques to improve your site usability

By Jean-Baptiste Jung on November 30, 2009

YouTube-like adaptable view using jQuery and CSS

Youtube has several very cool functions for users; the one which allow’s you to switch from normal view to wide view is definitely a must. In this detailed tutorial, Janko will show you how to implement a similar functionality into your website.

» Read tutorial

Nicer dates/times with the CuteTime jQuery Plugin

Do you really like the “posted X minutes ago” date formats as seen on Twitter? Although I’d rather use some server-side scripting to format the dates, this jQuery plugin is pretty cool and extremely easy to implement on your website.

» Read tutorial

Turn forms into a powerful wizard using jQuery

Forms are extremely important on the internet, because it is the way visitors can interact with the site owner. But most of the time forms are very boring for visitors.
Using this nice tutorial written by Janko, you’ll learn how to turn a boring and long form into a user-friendly wizard.

» Read tutorial

Add Icons to External Links with Mootools and CSS

A trend going around on websites is putting icons on links that point to web pages externally. A very simple tip to implement, but a real usability enhancement for your visitors.

» Read tutorial

Flexible Client Side Table Sorting With jQuery

Last week I showed you how to create advanced HTML tables using PHP and MooTools. This tutorial, which uses jQuery, will show you how to easily create sortable HTML tables.

» Read tutorial

Learn how to AJAXify Comment Forms

I have never been a fan of video tutorials, but I was very happy to come across this one some time ago. In this screencast, Jeffrey Way from Nettuts will show you how to “Ajaxify” your blog comments form. It is recommended to any WordPress blogger!

» Read tutorial

Create astonishing iCal-like calendars using jQuery

Do you, like many other people, love Apple’s cool and functional design? If you answered “yes” to the previous question, there’s no doubt that you will enjoy this tutorial about creating an “iCal-like” calendar for your website.

» Read tutorial

Build a Simple Password Strength Checker

Despite all hacking attempts and well known security problems, most random internet users are still using passwords such as secret or admin. So, how about helping your users by telling them that their password is strong enough.

» Read tutorial

Favorite Rating with jQuery and Ajax

A very cool way to interact with your visitors is to implement this “I love this” code, which will enable your visitors to let you know that they liked a post of your blog with a single click.

» Read tutorial

Advanced CSS Printing — Using CSS Page Breaks

Although printing web pages is bad for the environment, many internet users have the nasty habit to print pages to read them later. Although, sometimes printing a page is very useful; for example you may want to print your invoice after ordering a product online.
Printing is often neglected by designers and developers, and this is a bad thing. Using CSS, you can definitely make your website printer-friendly. Just read this excellent tutorial from David Walsh to find out!

» Read tutorial

Have fun with all those cool techniques. I hope it will help you to build even better websites. By the way if you’re into WordPress, I just published a very cool hacks list for Thesis on Cats Who Blog, so you might want to check it out. Also, have you grabbed your copy of the excellent book “Digging into WordPress?”

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 front-end techniques to improve your site usability

Posted in | Leave a response

How to create advanced html tables using TableGear

By Jean-Baptiste Jung on November 22, 2009

What we’re going to do

Any web developer had, at one point in their career, work with HTML tables. Not only they were intensively used to create website structure (bad practice!), but they allow you to display tabular data, which is an important part of most websites : For example, think about a checkout page on an e-commerce site. Generally, the customer order is displayed using a table.

In order to save time and efforts while working with HTML tables, we are going to use an Open-Source tool called TableGear. This very handy piece of code simplifies both the back end coding (getting data from the database and displaying it within an HTML table) and the front end coding (super cool functions such as live edition with Ajax saving)

Your first supercharged table using Tablegear

Well, enough talk for now. Let’s get our hands in code!

1. The first thing you have to do is to download your Tablegear copy on the website. Once you have it, unzip the archive. You’ll see 4 directories:

  • src which contains the php files
  • stylesheets which contains CSS files
  • images
  • javascripts

2. Now, create a file in the root of the TableGear1.5.2 directory. Let’s call it table.php.

3. Paste the following code into your table.php file:

<?php
include("src/TableGear1.5.2.php");

$table = new TableGear(array(
	"database"=> array("username" => "USERNAME",
	"password" => "PASSWORD",
	"database" => "DATABASE",
	"table" => "TABLE",
	"key" => "PRIMARY_KEY"
        ),
        "editable" => "all",
        "sortable" => "all"
); 

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>TableGear Demo</title>
	<link type="text/css" rel="stylesheet" href="stylesheets/TableGear.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <?= $table->getTable(); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="javascripts/TableGear1.5.2.js"></script>
<?= $table->getJavascript(); ?>
</body>
</html>

Don’t forget to set-up your database parameters on line 4:

  • username : Your DB username
  • password : Your DB password
  • database : Your database name
  • table : the DB table where the data you want to sort is stored
  • key : Your table primary key

4. Save the file and launch it in your web browser. Without coding a single HTML “table” line, we have all our data from the database nicely sorted within an html table. The table is also editable and sortable.

Great, isn’t it?

Enhancing the table

Although what we have done is very cool, TableGear can do a lot more than this. For example, it can format dates, uses textareas instead of textfields, and more.
Below is the list of parameters that can be used:

/*  Columns that use selects instead of inputs. */
"selects" => array("FIELD" => "increment[min=1,range=5]"),

/*  Columns that use textareas instead of inputs. */
"textareas" => array("FIELD"),

/*  Data formats. Formats include "date", "currency", "numeric", and "memory". */
"formatting" => array("DATE" => "date", "PRICE" => "currency[prefix=$]", "MEMORY" => "memory[auto]"),

/*  Formats to accept as input from users. This can be a bit more complicated.
 *  The "date" input format for example makes educated guesses about user input dates and standardizes them to
 *  a MySQL format. Numeric will grab a full number from user input, for example 12345 from $12,345. */
"inputFormat"	=> array("DATE" => "date", "PRICE" => "numeric"),

/*  Validates user input and won't allow anything that doesn't validate.
 *  This example will only accept a string that ends in .jpg */
"validate" => array("FILENAME" => "/\.jpg/")

/*  Uncomment this if you want the user to be able to delete rows. */
"allowDelete" => true,
"deleteRowLabel" => array("tag" => "img", "attrib" => array("src" => "images/icons/delete.gif", "alt" => "Delete Row"))

/*  Uncomment this if you want to use pagination in your table. Very useful for large data sets. */
"pagination" => array(
	"perPage" => 5,
  	"prev" => "Previous",
  	"next" => "Next",
 	"linkCount" => 4,
)

Don’t forget to have a look to TableGear website where you can find more tutorials.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

How to create advanced html tables using TableGear

Posted in | Leave a response

Animated background image with jQuery

By Jean-Baptiste Jung on November 11, 2009

Getting ready

In this tutorial, we are going to create a simple layout for a website, which includes a very cool animated background. Here is how the final result will look:

As you can see, in this example I have used the Twitter background clouds, which look really nice.
This tutorial has been inspired by the one called How To Build an Animated Header in jQuery that I definitely recommend you go check out.

Let’s do it

1. The first step of this tutorial is to download our background image. I have used this one from Twitter, but of course feel free to use any other image you’d like.

2. Once finished, let’s create a a file called index.html. In order to get started with the basic HTML structure, paste the following code in your file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Animated background Image</title>
	</head>

	<body>
	</body>
</html>

3. Now, let’s define our document structure. Since we want to do a simple layout, we’ll only need to create a header and content area. Paste the following within the <body> and </body> tags:

<div id="container">
	<div id="header">
		<h1>Animated Background Image</h1>
	</div><!-- #header -->

	<div id="content">
		<!-- Your content will go here -->
	</div><!-- #content -->
</div><!-- #container -->

4. Well done! We already have our XHTML. Now, what we have to do is obviously use some CSS and give style to our document.
To do so, copy the code below and paste it within the <head> and <head> tags of the index.html file.

<style type="text/css" media="screen">
	body{
		background-color: #C0DEED;
		margin:0;
		padding:0;
	}

	#header{
		height:180px;
		background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
		text-align:center;
		margin-top:-30px;
	}

	#header h1{
		padding-top:35px;
		font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
		color:white;
		font-size:45px;
	}

	#content{
		background-color:#fff;
		height:500px;
		width:980px;
		margin:25px auto 0 auto;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
	}
</style>

5. At this point, you can save your work and take a look at the index.html page using your web browser. If everything is ok, your index.html page should look like the screenshot above, with fixed clouds, of course.

6. Now, it’s time to give life to the layout by using the power of jQuery. As you probably guessed it, what we have to do right now is include the library. Since Google hosts a version that you can use, there’s definitely no need to download a copy. Just use the one from Google.

To do so, paste the following line of code in your index.html file, after the closing </body> tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

7. Now that jQuery has been loaded, we can code a function to animate the background. Copy the code below and paste it on your index.html file, just after the line where you imported jQuery into the file.

<script type="text/javascript" charset="utf-8">
	var scrollSpeed = 70;
	var step = 1;
	var current = 0;
	var imageWidth = 2247;
	var headerWidth = 800;		

	var restartPosition = -(imageWidth - headerWidth);

	function scrollBg(){
		current -= step;
		if (current == restartPosition){
			current = 0;
		}

		$('#header').css("background-position",current+"px 0");
	}

	var init = setInterval("scrollBg()", scrollSpeed);
</script>

There’s nothing really hard with that code. First, we declare a set of variables to control the animation (image width, scroll speed, etc). Then, we created a function to automatically move the background. The most tricky part is to calculate when we need to reset the position. If you have a better idea about doing it, let me know in a comment! ;)

Demo & Download

I hope you enjoyed this tutorial and helps you to create very nice websites. If you want, you can see a Demo of this code, or you can Download the source files.

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Animated background image with jQuery

Posted in | Leave a response

Introducing CatsWhoBlog.com

By Jean-Baptiste Jung on November 9, 2009

A new blog? Why?

When I launched Cats Who Code in June 2008, there was a “Blogging Tips” category, in which I posted some posts about affiliate marketing, blogging advice and making money online tips.
Even we had some really nice articles in there, Cats Who Code is mostly a Web Development blog and most of my readers are more interested in stuff as such as jQuery or WordPress than how to make some money with affiliate marketing.

This is why CWC “Blogging Tips” category quickly became neglected and just a few posts were written. Though, I really like that kind of tip and I also thought that my experience as a blogger could benefit some people. This is why, on October 10, 2009, I decided to create a “sister-site” to Cats Who Code with a content dedicated to blogging tips. Cats Who Blog were born.

As a part of my blogs network, Cats Who Blog features my cat Fisto. The drawning was made by Zira Zulu, who had created mascots for Cats Who Code and WpRecipes as well.

What you’re going to read on Cats Who Blog.com

Cats Who Blog mades its debut a month ago, so I already have some nice articles for you to read. Here a selection:

Also, please note that I just published a great post about 10 WordPress hacks to make more money online.

Now, what about the existing “Blogging Tips” category on Cats Who Code? As I now have a blog fully dedicated to that subject, this category will be closed. Existing posts will be moved to Cats Who Blog, or deleted when their quality isn’t good enought in my opinion.
Of course, my readers opinion matters so don’t hesitate to let me know about what you think.

Now, it should be time for you to go to Cats Who Blog and discover it. Or you can already grab the RSS feed so you’ll never miss any of my posts there.
And don’t worry, a very cool Web Development tutorial will be published right here on Cats Who Code on wednesday!

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

Introducing CatsWhoBlog.com

Posted in | Leave a response

Page 7 of 29« First...3456789101112...Last »