Web Design Tutorials

Calling a PHP File From HTML’s Script Tag

By Louis Lazaris / September 14, 2011 / 46 Comments

Okay, admittedly, this is a pretty crazy and virtually useless tip. But it’s just one of those things that illustrates the flexibility of our craft and how sometimes solutions to problems can be found from some really outside-the-box thinking.

Back when I worked for a Toronto web design agency, we often had to update sites that were written in straight HTML, with no server-side programming at all. So every year, clients that owned such sites would ask us to update all the pages to display the current copyright year. That was pretty lame. Not exactly the kind of work we wanted to be doing.

So we wanted to create a way that the current year would be printed on each page automatically. But we didn’t want to include a JavaScript library, we didn’t want to use Ajax, and we wanted the year to come from the server, not the client.

Triggering CSS3 Transitions With JavaScript

By Louis Lazaris / September 1, 2011 / 46 Comments

At the beginning of this month I wrote a post accompanied by five demo pages that showed that CSS3 transitions could be triggered with a number of different events/states in CSS.

That alone should help you see how these types of simple animations work. But let’s take this a bit further.

CSS pseudo-classes and media queries (which I used in that other post to trigger the transitions) represent certain states for certain elements. These states occur after specific events on the page. So naturally, CSS3 transitions can also be fired using any JavaScript event. Let’s try a simple click event that toggles a class name.

Replacing Subtle Flash Animations with CSS3

By Louis Lazaris / August 22, 2011 / 18 Comments

I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu.

On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design.

Her animations are done using Flash. I thought it would be fun to grab some of those elements and create a CSS3-based page that mimicked what those Flash-based objects do.

CSS’s ‘space’ and ‘round’ Values for background-repeat

By Louis Lazaris / August 15, 2011 / 7 Comments

If you’ve seen the code for CSS border images then you’re probably familiar with the space and round values for the border-image-repeat property.

Well, in the CSS spec, the well-known background-repeat property now includes those two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with).

The “inherit” Value for CSS Properties

By Louis Lazaris / August 10, 2011 / 6 Comments

In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.

For example, the font-size property can be set (as it often is) on the <body> element, and virtually every element that is a child of <body> will inherit that font-size setting.

(photo by Mariska van Brederide)

CSS3 Radial Gradient Syntax Breakdown

By Louis Lazaris / August 9, 2011 / 27 Comments

A short time ago I wrote an article that broke down the syntax for coding CSS3 linear gradients from scratch.

Once you get the hang of them, linear gradients are pretty simple to code. Radial gradients, on the other hand, are a little more complex.

So let’s finish off what I started in that earlier post and go through the syntax for radial gradients.

CSS3 Transitions Without Using :hover

By Louis Lazaris / August 3, 2011 / 65 Comments

Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class.

These types of transitions are pretty common, and you’ve probably seen or used something similar. But transitions are not just limited to use with :hover.

You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined (with demos) in this article.

Multiple Borders with CSS

By Louis Lazaris / July 20, 2011 / 40 Comments

While fiddling around with the CSS3 box-shadow property, I stumbled across a method to put a double border on a single element. I thought to myself, that’s pretty cool, but obviously, it will only work in newer browsers that support box-shadow.

So I wondered how many different ways there are to create an element that has the appearance of a double border. Naturally, the most common way is by using a non-fluid background image. But that’s obviously not ideal.

So, I’ve compiled five different methods for doing this. Only one requires use of an image; the rest are pure CSS, with pretty good browser support for all methods. For brevity, in the code examples I’ve removed the common stuff like width, height, background, etc.

HTML5’s New “form” Attribute

By Louis Lazaris / June 14, 2011 / 54 Comments

One challenge that developers have faced when creating forms is the inability to separate a form control from its parent <form> element without having to resort to some undesirable methods to get that form control to submit its data along with the form.

If you tried to do this in HTML4 or XHTML, the form would not submit the information from the form control that’s structurally outside the form.

As a result, if you wanted the data from the orphaned control to be submitted along with the rest of the form data, you’d have to implement some fancy JavaScript tricks to pass the information into the submission — which has many obvious drawbacks.

A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

By Louis Lazaris / May 3, 2011 / 12 Comments

I have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this: