CSS-Plus RSS Feed

Understanding The UTF-8 Encoding Algorithm in Rust

Sat, 05 Apr 2025 00:00:00 GMT

Strings in Rust are UTF-8 encoded using the UTF-8 Encoding Algorithm, so understanding that algorithm is key to understanding how String and &str work in Rust.

What is UTF-8?

UTF-8 is a character encoding (map of numbers to characters) created in 1993 to support characters for all languages, not just the English language. Before UTF-8, ASCII was used in English speaking countries. UTF-8 is backwards compatible with ASCII.

ASCII supports 128 characters (English alphabet, digits and other punctuation characters), while UTF-8 supports 1,112,064 characters.

UTF-8 Encoding Algorithm

The Unicode Consortium understood the fact that a character spanning more than 1 byte of memory adds complexity and therefore created an algorithm for programming languages to use to store characters as binary bytes in memory and deal with this complexity.

Keeping in mind that a Rust String is a Vec<u8>, the UTF-8 byte sequence should be clear when the sequence starts and should be self-aware of how many bytes the sequence encompasses.

In order to do this the UTF-8 Encoding Algorithm puts the information of how many bytes the character encompasses in the first byte. If there are more bytes each of those starts with a binary value indicating its a continuation of the UTF-8 character.

A binary value of a UTF-8 character can be a maximum of 21-bits.

Let's have a look at what this looks like with 2 examples, a simple character and a more complex character:

Simple Character

Character: !
Name: EXCLAMATION MARK
hexadecimal: U+0021
Binary: 100001

Rule: If a character contains a 7-bit, or less, binary value it should be converted to a 7-bit binary and be prepended with 0. This looks like 0xxxxxxx.

In this case 100001 would be converted to 7-bit binary 0100001 and prepended with 0 to create the byte value: 00100001.

The leading 0 indicates the UTF-8 character is only 1 byte long.

Note: Since UTF-8 is byte-based and designed to be compatible with ASCII, characters like a-zA-Z0-9, '!', etc are encoded as single-byte values — making UTF-8 very space-efficient for English text.

fn main() {
    let binary: u8 = 0b00100001;
    let character = char::from_u32(binary as u32).unwrap();

    println!("{}", character); // prints: !
}

Complex character

Character: 🙈
Name: SEE-NO-EVIL MONKEY
hexadecimal: U+1F648
Binary: 11111011001001000
21-bit binary: 000011111011001001000

Rules:

If the UTF-8 byte sequence contains a total of:
- 2 bytes the first byte starts with 110 (110xxxxx)
- 3 bytes the first byte starts with 1110 (1110xxxx)
- 4 bytes the first byte starts with 11110 (11110xxx)
Any following byte is prepended with 10 (10xxxxxx).

The example of the "SEE-NO-EVIL MONKEY" will take up 4 bytes once we run it through the UTF-8 encoding algorithm.

Byte	Bit Pattern	Number of Data Bits
1st byte	11110xxx	3
2nd byte	10xxxxxx	6
3rd byte	10xxxxxx	6
4th byte	10xxxxxx	6

We split the 21-bit binary into chunks: 3 bits for the first byte, then 6 bits each for the remaining three. After inserting those into the UTF-8 format with the proper prefixes, we get:

Byte	Bit Pattern	Number of Data Bits
1st byte	11110000	3
2nd byte	10011111	6
3rd byte	10011001	6
4th byte	10001000	6

To convert the binary value of "SEE-NO-EVIL MONKEY" in Rust:

fn main() {
    let binary: u32 = 0b000011111011001001000;
    let character = char::from_u32(binary).unwrap();

    println!("{}", character); // prints: 🙈
}

Note: char::from_u32(...) converts a Unicode code point, not raw UTF-8 bytes. The actual UTF-8 bytes are what you see when calling .as_bytes(). This is done to help explain binary to UTF-8 characters.

You may wonder why 🙈 requires 4 bytes and not 3. The answer lies in its code point: U+1F648 (which is 128584 in decimal). UTF-8 uses 3 bytes only for values up to U+FFFF (65535). Since this character is above that range, it falls into the 4-byte category, which is defined for any code point from U+10000 to U+10FFFF.

Bonus section

More about bytes and chars

While a String in Rust is a UTF-8 encoded Vec<u8>, Rust automatically prints valid UTF-8. We can get hold of bytes or a characters by converting the strings using the built-in methods .as_bytes() and .chars().

To print the byte values of the "SEE-NO-EVIL Monkey", we can do the following:

fn main() {
    let character = "🙈";
    for byte in character.as_bytes().iter().map(|b| format!("{:0b}", b)) {
        println!("{}", byte);
    }
    // Prints:
    //
    // 11110000
    // 10011111
    // 10011001
    // 10001000
}

And to print the UTF-8 characters of a string, we can do the following:

fn main() {
    let value = "🙈!";
    for char in value.chars() {
        println!("{}", char);
    }
    // Prints:
    //
    // 🙈
    // !
}

UTF-8 Encoding Ranges

Code Point Range	Byte Length	Encoding Format
U+0000 to U+007F	1 byte	0xxxxxxx
U+0080 to U+07FF	2 bytes	110xxxxx 10xxxxxx
U+0800 to U+FFFF	3 bytes	1110xxxx 10xxxxxx 10xxxxxx
U+10000 to U+10FFFF	4 bytes	11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

Have a look at UTF-8 Visualizer to get detailed byte and hexadecimal information!

Conclusion

I hope this was helpful in understanding what is going on in the computers memory when storing UTF-8 strings. The UTF-8 Encoding Algorithm is an elegant solution to storing characters in a sequence of bytes, Vec<u8> in the case of Rust.

Using agenix on a non-NixOS Linux Home Manager Nix Flake

Mon, 30 Dec 2024 00:00:00 GMT

Adding encryption to your Nix flake is important. I used to use a private Git repository to keep my secrets, but I was looking for something that integrated directly into Nix for reproducability.

In my experience, Nix Darwin is typically more mature than Nix for non-nix Linux distributions and therefore instructions are a bit more lacking. I have recently been creating a Nix Home Manager flake to manage my environment. I was having several issues getting agenix to work correctly and this article is both to help get agenix setup on a non-NixOS Linux distribution (Ubuntu, Pop!_OS, Debian, etc) as well as helping anyone who got stuck along the way like I did 😅

What is agenix?

agenix is a tool for managing encrypted secrets declaratively within the Nix ecosystem, enabling secure, reproducible secret management.

It is a CLI tool that is installed and configured upon installation. After it has been installed, it is set to run through a systemctl service.

Steps

The steps in this article assume:

Your Nix flake at /path/to/flake/flake.nix
Secrets directory at /path/to/flake/secrets/
Home Manager .nix file at /path/to/flake/home-manager/home.nix
Your username is username, change this to your username (echo $USER)
Your public SSH key at ~/.ssh/key.pub and private key at ~/.ssh/key. NOTE: Your key must not contain a passphrase. agenix does not deal well with keys behind a passphrase and this is what caused me to be stuck figuring this out for many hours

Add agenix flake to your flake:

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
    home-manager = {
      url = "github:nix-community/home-manager";
      inputs.nixpkgs.follows = "nixpkgs";
    };
    agenix = {
      url = "github:ryantm/agenix";
      inputs.nixpkgs.follows = "nixpkgs";
    };
  };

Trigger a home-manager switch to install the agenix binary: home-manager switch --flake /path/to/flake#username.
Create /path/to/flake/secrets/secrets.nix
```
let
  pcName = "ssh-ed25519 AAAAC3...";
  users = [ pcName ];
in
{
  "secret1.age".publicKeys = users;
}
```
Note: pcName value is your SSH public key ~/.ssh/key.pub. Again, make sure ~/.ssh/key does not require a passphrase. I would suggest creating a new key for agenix specifically.
Change your current working directory to /path/to/flake/secrets and create a secret1.age file with agenix:

Run agenix -e secret1.age, this will cause an empty file to popup using your $EDITOR, paste your secret in there and save and close the file.
```
cd /path/to/flake/secrets
agenix -e secret1.age
```
You should now see an encrypted file at /path/to/flake/secrets/secret1.age.

Add the following to your /path/to/flake/flake.nix:

homeConfigurations."username" = home-manager.lib.homeManagerConfiguration {
  inherit pkgs;

  modules = [
    agenix.homeManagerModules.default

    {
      age = {
        secrets = {
          "secret1" = {
            file = ./secrets/secret1.age;
          };
        };
        identityPaths = [ "/home/username/.ssh/key" ];
        secretsDir = "/home/username/.local/share/agenix/agenix";
        secretsMountPoint = "/home/username/.local/share/agenix/agenix.d";
      };
    }

   ./home-manager/home.nix
  ];
};

Have a look at the agenix README.md for more information about the agenix secrets, identityPaths, secretsDir and secretsMountPoint properties above.

You can now use the agenix secret keys in your /path/to/flake/home-manager/home.nix file using config.age.secrets.secret1.path, an example of using this value and setting it to a session variable could look like this:
```
{
  config,
  ...
}:
{
  home.sessionVariables = {
    SECRET1 = "$(cat ${config.age.secrets.workDirName.path})";
  };
}
```

Debugging

Ensure all your paths are correct and don't contain typos.
Ensure your ~/.ssh/key is not protected by a passphrase.
If home-manager is building correctly but the secrets aren't being decrypted as expected, make sure the agenix service is loaded correctly: systemctl --user status agenix.service. You should see some information about the service, if the service is missing then something is wrong with the agenix installation.
journalctl --user -u agenix.service for more detailed agenix service logs.
If the service is there, try restarting it and then proceeding to check to see that the decrypted files are in the correct location (~/.local/share/agenix/agenix/secret1).

Conclusion

Hopefully this helps someone. Good luck!

Develop on a case sensitive file-system

Fri, 22 Sep 2023 00:00:00 GMT

Encountering case sensitivity issues, particularly in the context of version control, might not be a daily occurrence for most developers. Yet, when these issues do arise, they can be perplexing and time-consuming to resolve.

In the digital world, where every character matters, the nuances of case sensitivity can significantly impact your coding workflow. This short article seeks to explore the world of case-sensitive file systems and why they should be a deliberate choice, especially for your code directory which contains your version controlled work.

This guide is for people unfamiliar with case-sensitive file-systems and also assumes unfamiliarity with drive partioning and formatting.

Symbolic link concept

Something to note before beginning is that you can create a symbolic link pointing to a partition to anywhere in your drive. If you're unfamiliar with this, imagine it as a sort of "shortcut" to a directory, however you can use this shortcut as a legitimate path. So if you were to have a partition called "work" located at /mnt/projects, you could create a symbolic link pointing to it at ~/projects and then simply behave as if the partition is just a directory located at ~/projects.

I bring up the concept of symbolic links because however you work now, after creating a new partition you can simply copy across your work or projects directory to the new partition and symlink it with the same path as your old work or projects directory. After doing this, everything should work exactly the same way as before, with the only difference being that the "directory" (symbolic link to partition) is case sensitive.

Understanding Case Sensitivity

Case sensitivity in file systems refers to how they handle the letter case (uppercase and lowercase characters) in filenames and directory names. It's essential for developers to grasp this concept because it profoundly influences code consistency and functionality.

A case-sensitive file system treats filenames and directories as distinct based on their exact letter case (e.g., "file.txt" and "File.txt" are different).

A case-Insensitive file system ignores letter case, treating file.txt and File.txt as the same.

Understanding case sensitivity matters for developers because:

Version Control: Accurate filename tracking in version control systems like Git, Subversion and Mecurial rely on case sensitivity.
Consistency: Case-sensitive systems maintain uniform naming conventions across platforms, facilitating collaboration.
Bug Prevention: It minimizes subtle bugs caused by inconsistent case usage, ensuring code reliability.
Cross-Platform Development: Crucial for developing software meant to run on various operating systems, helping anticipate compatibility issues.

Case-sensitivity is one of the fundamental things to understand about how operating systems could be treating its file structure, and that understanding is another step towards becoming adept at the nuances of effective software development.

The Advantages of Case Sensitivity for Developers

In the realm of software development, choosing a case-sensitive file system offers several significant advantages for developers:

Consistency Across Platforms: Case sensitivity ensures consistent naming conventions across different operating systems, promoting collaboration. Collaborative coding benefits from consistent naming conventions, reducing confusion and errors among team members.
Version Control Integrity: Accurate filename tracking in version control systems is vital for maintaining a reliable history of changes, and case sensitivity plays a crucial role in this.
Bug Prevention: Case sensitivity reduces the chances of subtle, hard-to-diagnose bugs caused by inconsistent case usage in filenames.
- Cross-Platform Development: It facilitates the early detection and
resolution of compatibility issues when developing software for multiple platforms.
- Preserving File Distinction: Case sensitivity distinguishes files and
directories with similar names but different letter case, preventing ambiguity.
Compatibility with Third-Party Tools: Many development tools and libraries assume case sensitivity, aligning your environment with industry standards.

By embracing these advantages, developers can enhance code consistency, version control reliability, and overall software quality.

Setting Up a Case-Sensitive File System and moving across your work

Now that we've explored the advantages of case sensitivity for developers, let's dive into the practical steps to set up a case-sensitive file system. We'll provide instructions for both macOS and Linux, ensuring that you can tailor your development environment to meet your specific needs.

The following setup guide is going to assume you only have 1 partition and will help you shrink that large partition and create an aditional partition.

Before beginning, make sure you have enough free space on your drive for the new partition and for leftover space on your primary partition. My "code" partition is 50GB for reference. I would suggest having at least 20GB left on your primary parition after setting up the code partition. So if you were to follow the numbers I personally use and the suggestion I mentioned, you should have at least 70GB free before proceeding. I'm going to use the numbers I mentioned above in the following setup instructions, but feel free to change the 50GB value.

Setting Up a Case-Sensitive File System on macOS

Backup Your Data: Begin by creating a complete backup of all your data to an external drive or cloud storage. This is crucial to prevent data loss during the partitioning process.
Open Disk Utility: Launch Disk Utility, which you can find in the Utilities folder within the Applications folder.
Select Your Disk: In Disk Utility, select the primary disk that contains your macOS installation. Be cautious not to choose the wrong disk.
Shrink the Primary Partition:
- Click the "Partition" button to access the partition layout.
- Select your primary partition (the one with macOS) and adjust its size by clicking and dragging the partition divider.
- Create unallocated space by shrinking the primary partition. Be sure to leave enough space for macOS to function correctly.
Create a New Partition:
- With the unallocated space, click the "+" button under the partition layout to create a new partition.
- Choose "APFS (Case-sensitive, Journaled)" as the format for the new partition.
Apply Changes: Click the "Apply" button to commit the changes. Disk Utility will guide you through the process, and your new case-sensitive APFS partition will be created.
Format the New Partition: After the new partition is created, format it with a case-sensitive file system by selecting it and clicking the "Erase" button. Choose "APFS (Case-sensitive, Journaled)" as the format.
Mount the New Partition: Your new case-sensitive file system partition is now ready for use. It will be mounted and available in Finder.

Setting Up a Case-Sensitive File System on Linux

Backup Data: Before making any changes to the partition layout, it's crucial to back up all your important data to an external storage device or cloud storage.
Create a Bootable USB: Prepare a bootable USB drive with a live Linux distribution or a partitioning tool that can be used to modify the partitions. This includes most Linux bootable USB drives, such as Ubuntu, Pop!OS, etc.
Boot from the USB: Insert the bootable USB drive into your computer and restart it. Boot from the USB drive to access the partitioning tool. I suggest making sure GParted is installed, if it's not, then install it.
Shrink the OS Partition:
- Use GParted to shrink the existing OS partition. This process involves reducing the size of the OS partition to create unallocated space for the new partition.
- Be cautious when resizing the OS partition, as it can impact the system's bootability. Ensure you have enough space left for the OS to function correctly.
Create a New Partition:
- Once you've created unallocated space, use the partitioning tool to create a new partition within that space.
- Choose the file system format you want for the new partition (e.g., ext4 for a case-sensitive file system on Linux).
Format and Mount the New Partition:
- Format the new partition with the desired file system format.
- Mount the new partition to a directory to start using it for your development work.
Update Boot Configuration (if necessary): Depending on your system, you may need to update the boot configuration to recognize the changes in the partition layout.
Restore Data: After creating the new partition, you can restore your backed-up data to the appropriate locations.

Moving your work across to the partition

I will assume your new mounted partition is located at /mnt/projects and your working code directory is located at ~/projects.

Copy across all contents of ~/projects to /mnt/projects. You can do this any way you want, but here is a bash command:
```
cp -r ~/projects/* /mnt/projects
```
Rename ~/projects to ~/projects-old. I suggest a rename for safety so you don't lose anything unintentionally.
Create the symbolic link:
```
ln -s /mnt/projects ~/projects
```
Ensure the symbolic link exists by running:

   [ -L /path/to/directory ] && echo "The directory is a symbolic link" || echo "The directory is not a symbolic link"

You should receive the output "This directory is a symbolic link".

Everything should work as it did before. You IDE or editors should pick up where they left off.
When you're happy with everything, you can delete your old direcotry ~/projects-old. It doesn't hurt just being there, so you could do this step days or weeks after the previous step if that makes you feel safter.

Conclusion

Popular version control systems like Git, Subversion and Mecurial are case sensitive and when a case-sensitive issue silently arrise, it tends to be very frustrating to deal with.

By making sure your code is running on a case-sensitive file system, you won't be subject to these problems and won't perpetutate them either.

My Journey to the Perfect Text-Editor - Part 2

Thu, 21 Sep 2023 00:00:00 GMT

I wrote the article My Journey to the Perfect Text-Editor in 2012. I want to talk about my progession in text-editors since then.

This article is targeted at anyone interested in expanding their development environment or anyone interested in a relatively detailed journey of someone moving from using Atom to Neovim over a period of almost 10 years.

In this journey, you'll hear me mention CLI tools quite a bit later on. CLI stands for Command Line Interface, a type of software interface where users interact with programs by typing text-based commands. These tools are essential for many developers, offering a fast and flexible way to perform tasks that range from file manipulation to system administration and beyond. They're particularly powerful when used in conjunction with text editors like Vim, as they help to automate tasks, streamline workflows, and even extend the functionality of the editor itself. So while the article is for anyone, it does have a focus on Unix based operating systems (macOS, Linux, FreeBSD, etc).

Before I get into any specific editor, I want to summarise my goals for a text-editor in 2012, which is a point-summary of the previous article since this story continues from there. In 2012 I was working on HTML, CSS, JavaScript, PHP and some other scripting languages. I wanted the editor to fulfill the following crieria:

Cross-Platform OS compatibility: I worked on multiple operating systems.
Built for many programming languages
Aesthetically pleasing
Support plugins or extentions of the editor
Powerful tool with Plenty of options
- Find/replace throughout open tabs (I was quite specific with this
Fast: I didn't like waiting for anything or feeling a type of lag.

Ultimately I landed on using SublimeText 2 since it satisfied the above points.

Disclaimer: When I talk about "Pros" and "Cons" or any opinions of an editor, keep in mind this was how I felt when I used the editor many years ago. So I probably have a completely different opinion of the editor today.

Atom (2014 - 2015)

I had gotten used to Sublime Text 2's multi-cursor tool and used it heavily and Atom released with this functionality.

Atom was developed by GitHub and its motto was "A hackable text editor for the 21st Century". Atom was built with Electron, a cross-platform tool to create desktop applications using web technologies, and is the reason Electron exists today. Atom supported extensive customisation through packages (read "plugins") built with JavaScript. At the time, JavaScript was still finding its place as a "real" programming language and Electron gave me hope and inspired me, as a JavaScript developer, to not only build tools for the web, but also for the desktop.

Pros

Atom's focus on JavaScript, being a highly accessible language compared to others, as well as it's open-source nature fostered a very active community immediately, which meant the editor could be extended in any way you could imagine.

I worked with JavaScript daily. Knowing that I could easily create my own package for the text editor was compelling for me, even though I ultimately didn't create one for Atom haha, but I did play around with it.

Cons

Atom was noticeably slower than SublimeText 2 for me. Load time of large files and just general scrolling and switching files had a delay that Sublime Text 2 didn't, but the things I valued about Atom outweighed the con of the editor speed.

Conclusion

The ability to extensively customise the editor
The ability to create plugins myself
Easy to switch between projects
Open-source and active community
Be very fast and look smooth

VSCode (2015 - 2021)

Visual Studio Code (VSCode) was released in April 2015 by Microsoft. It was (and still is) a free, open-source code editor that's both lightweight and powerful. It focuses on modern web development and comes with built-in Git support. Its extensibility through plugins, a streamlined debugging experience, and its cross-platform nature, thanks to being built on the Electron framework, quickly garnered attention in the developer community.

I, however, was very skeptical to VSCode upon release for various reasons.

My issues with Microsoft at the time

By 2015 I had stopped using Windows entirely and solely worked on my Macbook Pro with OS X, macOS before the name changed. I was happy to have Windows out of my life and live in the Unix-based OS world. Developing in Windows for non-Microsoft related tasks was very cumbersome. Windows felt clunky and inefficient and I attributed these adjectives to Microsoft itself.

At the time, I was building websites which supported Internet Explorer 9 and 10 which were both far behind "modern" browsers like Firefox, Chrome or Opera. Earlier on in my career, I did development for Internet Explorer 6, 7 and 8. I was happy with the progress of IE9 over 8, but I was very disappointed in what IE10 brought to the table, especially after looking forward to its release day in October 2012 and with the knowledge that the next browser release would be very far away. I wanted IE to be better since a large portion of users were using IE as their primary browser.

With my deep-seated frustrations towards Microsoft—stemming from Windows' cumbersome nature for non-Microsoft tasks, the stagnation in Internet Explorer's development compared to more modern browsers, and the company's late entry into the open-source community—I was extremely skeptical of VSCode when it first launched.

With my frustration with Microsoft due to finding it cumbersome for non-Microsoft tasks and associating its inefficiencies with Microsoft as a whole as well as being letdown by IE and it's late entry into the open-source community, I was very skeptical of VSCode.

Initial thoughts after use

I didn't use VSCode for a few months since I was happy with Atom, but many co-workers were using it and were happy so I decided to give it a try. The transition from Atom to VSCode felt even smoother than SublimeText 2 to Atom. It felt like it was the same editor, but slightly better in almost every way; Almost like an Atom 2.0.

Continuing to use it as my primary text-editor was a no-brainer, since there wasn't a downside to it for my use-case, plus it felt a lot faster than Atom, which was the one downside I had when moving from SublimeText 2 to Atom.

Conclusion

The ability to extensively customise the editor
The ability to create plugins myself
Easy to switch between projects
Open-source and active community
Be very fast and look smooth

Vim (2021 - 2022)

Vim is a robust text editor that operates within your terminal, known for its high customizability through VimScript and its keyboard-centric design. In 2016, a friend shared their experience with Vim, sparking my curiosity. It was a while ago, so I can't remember the specifics, but Vim's focus on minimalism, speed and efficiency certainly caught my attention.

When I first tried Vim, I found that it didn't match VSCode's efficiency for my needs. Even after spending time setting it up, certain essential features eluded me. This led to me frequently alternating between Vim and VSCode. For smaller tasks or single file edits, I leaned towards Vim, but for broader projects, VSCode was my go-to — akin to how one might switch between a basic text editor and a full-fledged IDE based on the task.

I used Vim this way from 2016 - 2021, so I gained familiarity with it, even though it wasn't my primary editor. Over this time, my proficiency with Vim's unique keyboard commands grew, making my workflow as fast as it was in VSCode, but freeing me from mouse dependency.

For a deeper dive into Vim as of 2022, check out this video by ThePrimeagen: Why I use Vim in 2022.

Not a final conclusion, since I hadn't swapped to Vim

The ability to extensively customise the editor
The ability to create plugins myself
Easy to switch between projects
Open-source and active community
Very fast
Minimal
Efficient
Experienced enough to use the editor to fulfill my own needs

What was stopping me from switching to Vim as my primary editor

I didn't know this at the time, but I was thinking about Vim in the wrong way. I was trying to replace VSCode, or any of the editors I had previously used with Vim alone. Vim can be extended to do almost anything, but it doesn't need to be extended, since we have other tools for the job.

I was struggling to switch between projects in Vim and I would have different terminal tabs open, each with a different instance of a Vim project. This wasn't working for me and I wanted something to switch between projects within Vim. While there are plugins for this, I struggled to get them to work and they tended to be a bit too complicated for me to set up.

Other big issues I faced included project-wide search/replace and open a list of files containing a specific search term, and a good Git plugin.

I don't know when the "Aha" moment was exactly, but I realised I didn't need to recreate all the VSCode functionality in Vim because I could just use existing CLI (Command Line Interface) tools for the job. I had read people suggesting usage with Vim in this way on forums, but I just wasn't in the place to understand it at the time.

grep or git grep could be used to search through files for a specific term with a string or even regex.
sed could be used to search for a string or regex pattern and replace with something else.
git could just be used for my git needs.
tmux could be used to handle different sessions (read projects) and windows within those sessions.

Instead of attempting to replicate the functionalities of VSCode within Vim, I had an important realisation. Vim doesn't need to be an all-encompassing tool; instead, I could leverage existing CLI tools to complement its capabilities. Whether searching with grep, replacing text with sed, handling Git operations directly, or managing sessions with tmux, I discovered that a synergy between Vim and these command-line utilities offered a powerful and efficient development environment.

Switching to Vim full-time

After the realisation about the synergy between Vim and other CLI tools in 2021 I relentlessly consumed Vim related content and came across a video of ThePrimeagen talking about TMUX and saw how he was able to quickly switch between sessions and I finally understood how I could commit to vim full-time. Since that day, I haven't switched away from Vim.

Conclusion

Vim not only fulfilled all my criteria for the perfect text editor but also opened up a new realm of possibilities by deeply integrating with CLI tools and the terminal environment. This shift away from GUI-based editors felt like a natural progression in my journey, instilling a sense of connection to the very roots of computing. It encouraged me to explore powerful command-line utilities resulting in a workflow that's both flexible and efficient. While VimScript could technically allow me to create my own plugins, my aversion to learning it became an issue as it prevented me from expanding on Vim myself without plugins. Overall, Vim was not just an editor for me, but more of a highly personalized development environment where I felt challenged, yet at home.

The ability to extensively customise the editor
The ability to create plugins myself (Note: While VimScript gives me the technical ability to create my own plugins, I've always had an aversion to learning it. So, technically, I could create plugins, but I personally didn't take that step.)
Easy to switch between projects
Open-source and active community
Very fast
Minimal
Efficient
Experienced enough to use the editor to fulfill my own needs

Neovim (2022 - Now)

I was aware of Neovim for a while by the time I was using Vim as my primary editor, but I didn't find a need to use it since it didn't add any features that would affect my workflow.

That was until they released version Neovim 0.5 in July 2022, which added support for Lua as a supported language for config and plugins, while still maintaining support for VimScript.

I didn't like VimScript, I found it cumbersome to use and I didn't feel a particular need to learn it since it was only used for Vim. I had a large custom VimScript config file, but it just did what it needed to do and I wasn't interested in learning more than I needed to.

When Neovim 0.5 was released, I kept a keen eye on how the community was adopting it. By January 2022 I rewrote my entire config in Lua. I found it very fun and rewarding. I found myself exploring the Vim API a lot more through Lua than I ever did with VimScript. VimScript felt like a means to an end, whereas Lua felt enjoyable and like I was growing.

The Neovim community feels vibrant and exciting and I'm really glad to be part of it!

Vim9Script

As of July 2022, an update to Vim was released which allows users to write their config and plugins in Vim9Script. This change has forced Neovim to hard-fork off of the Vim repo, which is unfortunate. Vim9Script looks a lot better than VimScript, but I'm happy with lua and don't plan on switching back to Vim.

Conclusion

Switching to Neovim felt like I'd found a piece of the puzzle I didn't know was missing. Lua not only became a fun and enlightening way to engage with my editor, but it also reignited my excitement for customization and plugin development. Unlike VimScript, which always felt like a necessary hurdle, Lua became a joyous part of the process. Beyond that, the sense of community in Neovim is electrifying. It checks all the boxes for me—from extensive customization and plugin support to an active, open-source community and a sleek, efficient design. At this point, Neovim isn't just a tool; it's a vibrant community and a constant source of learning and growth in my coding journey.

The ability to extensively customise the editor
The ability to create plugins myself
Easy to switch between projects
Open-source and active community
Very fast
Minimal
Efficient
Experienced enough to use the editor to fulfill my own needs

Honorable mentions

Emacs

I haven't used Emacs before but I know it's a very powerful tool that isn't limited to a terminal emulator, like Vim and Neovim are. While I haven't used it before, I know enough about it to know that it would score full points on my checklist of requirements.

I'm already in the Neovim world and I'm happy here; If for some reason that were to change, Emacs would be at the top of the list of editors to swap to.

IntelliJ IDEA

Intellij IDEA offers a plugin named IdeaVim, which admirably supports Vi movements, basic VimScript configurations, and various IdeaVim plugins that emulate popular Vim plugins. IntelliJ is particularly proficient for Java and Kotlin development. For more complex tasks, especially within the JVM, I turn to IntelliJ with the Vi-Mode enabled.

Vi-Mode plugins in text-editors?

Vi-Mode is great and it's what I recommend to everyone since the Vi movements are amazing when you get used to them and if you can do that without leaving the comfort of your own editor, that's a plus. There are Vi-Mode plugins for VSCode (vscode-neovim), SublimeText ([Vintage mode]), IntelliJ (IdeaVim) and almost any GUI editor.

Applications are able to embed Neovim within them and VSCode has a plugin called vscode-neovim which does exactly that. Since it is literally running Neovim, not just a vi-mode emulator, you're even able to use a custom Neovim Lua config.

Comments I had received on the original article

I used to have a post-comment feature on this blog. When I wrote the first article in 2012, I received these two comments

I like using Vim on my Windows/Linux/Mac machines. It is cross-platform and pretty -- 7hao

Of course. Sublime Text is one of the most advanced editors today. I myself prefer Emacs (IMHO you can't measure it with other editors), but Sublime Text is very powerful also. -- Marko

To both of those comments, I say "Here here!". I completely agree with those two comments, but didn't understand them at the time since I didn't have a real understand on Vim or Emacs at the time.

Conclusion

Neovim has been a game-changer for me, not only meeting but exceeding what I sought in a modern text-editor. The shift to Vim initially opened my eyes to the power of keyboard navigation, improving both my speed and ergonomics. This journey has not only honed my skills in shell scripting and using command-line tools but has elevated my development process to what feels like "the speed of thought." It's as if tasks unfold effortlessly before me, making me not just a better developer, but one who feels in sync with my tools.

Many years ago, a good friend and I spoke about building our own text editor. We wanted to tweak and adjust every tiny bit to get it just right. Who would have thought that legends like Vim and Emacs were already out there, offering the very customization we dreamt of? Looking back, each editor I dove into, from Sublime's slickness and innovation to Neovim's extensibility and synergy with CLI tools, had its own charm and taught me something new. Right now I love Neovim, but the world of text editors and development environments is ever-evolving. While I have pushed myself to learn Vi-keybindings and explore new ways of working when I was already comfortable, I wouldn't suggest people make big changes, but I would definitely encourage others to learn something new about their development environment every week. No matter where I land in future, this journey has taught me that the perfect editor isn't just about features, it's about feeling right at home while also continuously expanding my understanding of how I can work.

Permissions issue with Intellij-Idea on Linux

Tue, 16 Aug 2022 00:00:00 GMT

I didn't find anything mentioning this specific issue online so I thought I'd make a short article to help anyone in the same position. This should be relevant to anyone who has installed Intellij-Idea (or any other Jetbrains app) within a sandbox environment, such as Flatpak or Ubuntu Snap and is having problems accessing files from their system through Intellij.

Problem

I installed Intellij-Idea on my Pop!_Os Linux (A fork of Ubuntu) setup through the Pop!_Shop, which typically installs the apps as a flatpak file. I was having strange issues where Intellij-Idea wouldn't list all files under certain directories, such as /usr/bin. In my case /usr/bin/bash was visible and selectable, but not /usr/bin/zsh.

I tried various things to get this to work as well as searching for anyone who had run into the same situation. I ended up setting up a separate .bashrc mimicking most of my .zshrc for Intellij-Idea itself.

I was trying to find a quickfix instead of trying to figure out what was going on. Today I wanted to get it to work since I wasn't able to export my local DB through pg_dump, since /usr/bin/pg_dump was one of the binaries not there.

I realised that it was installed as Flatpak app, which runs in a sandbox and must not have some or other permission. I tried installing Flatseal to give the permissions. Unfortunately I wasn't able to give Intellij-Idea the necessary permissions. I'm really glad I came across Flatseal though, it looks like a great tool.

Solution

To make sure there weren't sandbox permission issues, I installed the Jetbrains toolbox app via the instructions on the Jetbrains website. The standalone install would work too.

This solved all of the app permission issues I was having.

While I had this issue with Flatpak, I suspect this would be an issue on Ubuntu if installed as a Snap package.

How to merge two MySQL WordPress databases

Mon, 30 Mar 2015 00:00:00 GMT

Recently I've had to do this and I was unable to find something that could solve my problem online. I wanted to merge a WooCommerce Wordpress site into a very large Wordpress blog. It ended up being relatively simple to do this, however I'd just like to note that I'm not a MySQL so there may be much more efficient ways of doing this, however this was good enough for my needs. Make sure to backup your Wordpress database before messing around with it.

Problems were faced

The problem when merging Wordpress databases is that you end up having conflicts with the primary keys. Initially I thought this wasn't a problem since I could just merge the one into the other without specifying the primary key. Mysql would auto-increment this and all my problems would have been solved. I tried this and quickly realised that this would only work for me if I was merging a single table. By auto-incrementing the primary keys in the various tables I was merging, it broke the primary/foreign key relationship between them. What was the solution? Simple, increment all primary and foreign keys in one of the databases by X (read: insert number here). X can change depending on how large your database is. I was working on a particularly large one and did an increment of 10 000.

You have db1 and db2. You want db1 to have the extra posts/content types/categories/images included in db2. Do the primary/foreign key increments on db2. Mysqldump the relevant tables from db2 with --no-something-or-other flag and then import that script into db1.

Bash script

The bash script below will export posts, pages, products, images, categories and tags from db2 into db2.sql. Edit it to your needs. I've left comments in the bash script.

# Wordpress export
# Assuming the db details are:
# db_name = db2
# db_user = root
# db_pass = pass
# =============================================================================

echo "Change all IDs to avoid conflicts"
echo "===================================================="

# wp_posts
mysql --user=root --password= db2 -e "UPDATE wp_posts 
    SET id = REPLACE(
        id, 
        wp_posts.id, 
        wp_posts.id + 10000
    ) 
    WHERE id &gt; 0"

# wp_postmeta
# Increment post_id 
# Increment meta_value fields for post thumbnails to retain reference
mysql --user=root --password= db2 -e "UPDATE wp_postmeta 
    SET post_id = REPLACE(
        post_id, wp_postmeta.post_id, 
        wp_postmeta.post_id + 10000
    ) 
    WHERE post_id &gt; 0"
mysql --user=root --password= db2 -e "UPDATE wp_postmeta 
    SET meta_value = REPLACE(
        meta_value, 
        wp_postmeta.meta_value, 
        wp_postmeta.meta_value + 10000
    ) 
    WHERE meta_key = '_thumbnail_id'"

# wp_terms
mysql --user=root --password= db2 -e "UPDATE wp_terms 
    SET term_id = REPLACE(
        term_id, wp_terms.term_id, 
        wp_terms.term_id + 10000
    ) 
    WHERE term_id &gt; 0"

# wp_term_taxonomy
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET term_taxonomy_id = REPLACE(
        term_taxonomy_id, wp_term_taxonomy.term_taxonomy_id, 
        wp_term_taxonomy.term_taxonomy_id + 10000
    ) 
    WHERE term_taxonomy_id &gt; 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET term_id = REPLACE(
        term_id, 
        wp_term_taxonomy.term_id, 
        wp_term_taxonomy.term_id + 10000
    ) 
    WHERE term_id &gt; 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_taxonomy 
    SET parent = REPLACE(
        parent, 
        wp_term_taxonomy.parent, 
        wp_term_taxonomy.parent + 10000
    ) 
    WHERE parent &gt; 0"

# wp_term_relationships
mysql --user=root --password= db2 -e "UPDATE wp_term_relationships 
    SET object_id = REPLACE(
        object_id, 
        wp_term_relationships.object_id, 
        wp_term_relationships.object_id + 10000
    ) 
    WHERE object_id &gt; 0"
mysql --user=root --password= db2 -e "UPDATE wp_term_relationships 
    SET term_taxonomy_id = REPLACE(
        term_taxonomy_id, 
        wp_term_relationships.term_taxonomy_id, 
        wp_term_relationships.term_taxonomy_id + 10000
    ) 
    WHERE term_taxonomy_id &gt; 0"

echo "Now for the dumping"
echo "===================================================="

mysqldump --no-create-info --user=root --password= db2 wp_posts &gt; wp_posts.sql
mysqldump --no-create-info --user=root --password= db2 wp_postmeta &gt; wp_postmeta.sql
mysqldump --no-create-info --user=root --password= db2 wp_terms &gt; wp_terms.sql
mysqldump --no-create-info --user=root --password= db2 wp_term_taxonomy &gt; wp_term_taxonomy.sql
mysqldump --no-create-info --user=root --password= db2 wp_term_relationships &gt; wp_term_relationships.sql

echo "Edit exported files to allow for seamless inserting"
echo "===================================================="

# wp_postmeta id's don't need to be force incremented. Remove all ID inserts
sed -ir "s/[)],[(][0-9]*,/),(/g" wp_postmeta.sql
sed -i "s/INSERT INTO \`wp_postmeta\` VALUES ([0-9]*,/INSERT INTO \`wp_postmeta\` (\`post_id\`, \`meta_key\`, \`meta_value\`) VALUES (/g" wp_postmeta.sql

# Prevents duplicates on wp_terms and wp_users script import
sed -i "s/);/) ON DUPLICATE KEY UPDATE slug = slug;/g" wp_terms.sql

Note: Users have been removed from the above export, therefore db1 users will be untouched.

Once the script has done all of the hard work, it's time to import db2.sql into db1.

# Import into dummy DB
echo "Import into dummy DB"
echo "===================================================="
mysql -u root -p db1 &lt; wp_posts.sql
mysql -u root -p db1 &lt; wp_postmeta.sql
mysql -u root -p db1 &lt; wp_terms.sql
mysql -u root -p db1 &lt; wp_term_taxonomy.sql
mysql -u root -p db1 &lt; wp_term_relationships.sql

That's it! Everything should have merged correctly.

How to install Sass and Compass

Mon, 26 May 2014 00:00:00 GMT

This is a simple article that covers how to install Sass and Compass for terminal/command prompt usage, not how to use it.

If you're looking for the latter, check out this css-tricks screencast.

Installing

When running Sass/Compass you'll only need Sass or Compass, but this article will instruct you to install both.

Sass and Compass are Ruby applications, meaning you need to have Ruby installed. Ruby is a programming language.

Install on Windows

Make sure to read this whole section before installing.

Firstly, you need to begin the Ruby installation. It's probably best to pick the latest version. At the time of writing I would choose Ruby 2.0.0-p481 (x64) since that's the latest version and I'm running a 64 bit OS.

Important note: While running the installation, there is a checkbox option that is un-ticked by default: Add Ruby executables to your PATH. Make sure that is ticked. This allows for the keyword ruby to be linked to the Ruby installation for your command prompt.

Once this is done it's time to install Sass and Compass.

Run the following commands:

gem install sass compass

The above will install both Sass and Compass. It may take a while so just give it time to do it's thing. Once it's done, you're done. Give yourself a high five.

Install on OS X/Linux

By default OS X and Linux have Ruby installed. So this should be very easy. Run the following command:

sudo gem install sass compass

That's it. Yay for Unix based operating systems.

But... I don't like the terminal/command prompt

It's not as complicated as it seems. The feeling of being at home within the terminal is quite a liberating feeling and I suggest you learn it. There are a bunch of Sass/Compass GUIs out there and I've tried 3 of them. The following work in Windows, OS X and Linux.

Compass.app is my favourite because it runs in the background and there is minimal interface.
Prepros App Is also pretty good. I've found some irritating things about it with regards to very specific Compass customization but it's really easy to use.
Scout is pretty easy to use. I found it a bit slow and laggy.

Create your own jQuery Image Slider

Wed, 02 Oct 2013 00:00:00 GMT

I originally posted this article on 15 September 2010. This is an updated version.

This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to understand.

It is important to picture what the HTML and CSS should be doing in order to create the component before actually beginning with the javascript. This way you know exactly what you are working towards. Below is a gif explaining the concept of the slider in terms of HTML and CSS.

Common things that cross my mind before actually jumping into development are:

Where are the hidden elements situated?: Beneath, on top, next to or behind the visible element?
How are they hidden?: Is their display set to none?; Are they outside of the parent element which is set to overflow: hidden?; Are they hidden behind visible element via z-index?

All right, enough of that, let's get started.

The HTML

Before we create anything, we should try and get an idea of exactly what we are trying to achieve. I've drawn up a quick image slider wireframe.

So let's turn that into HTML.

&lt;div class="gallery-wrap"&gt;
  &lt;div class="gallery clearfix"&gt;
    &lt;div class="gallery__item"&gt;
      &lt;img src="images/image1.jpg" class="gallery__img" alt="" /&gt;
    &lt;/div&gt;
     &lt;div class="gallery__item"&gt;
      &lt;img src="images/image2.jpg" class="gallery__img" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gallery__controls clearfix"&gt;
    &lt;div href="#" class="gallery__controls-prev"&gt;
      &lt;img src="images/prev.png" alt="" /&gt;
    &lt;/div&gt;
    &lt;div href="#" class="gallery__controls-next"&gt;
      &lt;img src="images/next.png" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

.gallery-wrap will be the visible area. .gallery is the element that contains the list of images. .gallery__controls contains the next and previous controls.

Generally an image slider would contain more than 2 images but I've left out the exact HTML I used in the demo for readability.

The CSS

.gallery-wrap { margin: 0 auto; overflow: hidden; width: 732px; }
.gallery { position: relative; left: 0; top: 0; }
.gallery__item { float: left; list-style: none; margin-right: 20px; }
.gallery__img { display: block; border: 4px solid #40331b; height: 175px; width: 160px; }

.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }

The most important thing here is to set .gallery to 'position: relative' and to set .gallery-wrap to 'overflow: hidden'. The CSS is quite straight forward.

The jQuery/Javascript

This is where all the fancy tricks take place.

// Only run everything once the page has completely loaded
$(window).load(function(){

    // Fancybox specific
    $(".gallery__link").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

    // Set general variables
    // ====================================================================
    var totalWidth = 0;

    // Total width is calculated by looping through each gallery item and
    // adding up each width and storing that in `totalWidth`
    $(".gallery__item").each(function(){
        totalWidth = totalWidth + $(this).outerWidth(true);
    });

    // The maxScrollPosition is the furthest point the items should
    // ever scroll to. We always want the viewport to be full of images.
    var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();

    // This is the core function that animates to the target item
    // ====================================================================
    function toGalleryItem($targetItem){
        // Make sure the target item exists, otherwise do nothing
        if($targetItem.length){

            // The new position is just to the left of the targetItem
            var newPosition = $targetItem.position().left;

            // If the new position isn't greater than the maximum width
            if(newPosition &lt;= maxScrollPosition){

                // Add active class to the target item
                $targetItem.addClass("gallery__item--active");

                // Remove the Active class from all other items
                $targetItem.siblings().removeClass("gallery__item--active");

                // Animate .gallery element to the correct left position.
                $(".gallery").animate({
                    left : - newPosition
                });
            } else {
                // Animate .gallery element to the correct left position.
                $(".gallery").animate({
                    left : - maxScrollPosition
                });
            };
        };
    };

    // Basic HTML manipulation
    // ====================================================================
    // Set the gallery width to the totalWidth. This allows all items to
    // be on one line.
    $(".gallery").width(totalWidth);

    // Add active class to the first gallery item
    $(".gallery__item:first").addClass("gallery__item--active");

    // When the prev button is clicked
    // ====================================================================
    $(".gallery__controls-prev").click(function(){
        // Set target item to the item before the active item
        var $targetItem = $(".gallery__item--active").prev();
        toGalleryItem($targetItem);
    });

    // When the next button is clicked
    // ====================================================================
    $(".gallery__controls-next").click(function(){
        // Set target item to the item after the active item
        var $targetItem = $(".gallery__item--active").next();
        toGalleryItem($targetItem);
    });
});

I have heavily commented the above code. All lines beginning with // are comment lines.

To recap, the following was done:

Only run everything once the window (page) loads.
Calculate the total width of all the images.
Calculate the maximum scroll position. This is the total images width subtract the viewport (.gallery) width.
Create the toGalleryItem function. This function will scroll to any item we desire.
- If the target item exists, continue. Otherwise there is nothing left to run.
- The new position is the left position of the slide/image, relative to it's container .gallery.
- If the new position is less than or equal to the maximum scroll position, toggle active classes accordingly and animate to the new left position.
- Otherwise animate to the maximum scroll position.
Set slide container (.gallery) width to the sum of all the images width.
Set the first image as active.
When the previous button is clicked, go to the previous slide/image.
When the next button is clicked, go to the next slide/image.

I will break down the javascript into 2 parts. I'm going to break the above up into 2 parts. Part explaining the variable declarations and part 2 explaining the rest of the jQuery/javascript.

Summary of javascript/jQuery methods used:

A function is a bit of javascript that can be run just by calling the function name. Essentially it's a shortcut. Functions can be made dynamic by allowing the user to pass in variables or parameters such as $targetItem

`if ($targetItem.length) {`

JavaScript conditional statement documentation.

I've written an article about the if statement you may want to have a look at.

`addClass` and `removeClass`

jQuery addClass and removeClass documentation.

These are self explanetory jQuery functions.

`$(".gallery").animate()`

jQuery .animate() documentation. This is a magic jQuery function that allows you to animate a wide range of CSS properties.

That's about it! I hope you've found this tutorial useful.

If you have any questions or comments, feel free to leave a comment below.

inline-block: The complete story

Mon, 07 Jan 2013 00:00:00 GMT

inline-block is something I hadn't used until a couple of months ago. I was comfortable with block and inline elements so I didn't feel the need to learn anything more. I was also under the impression, as I'm sure many developers are, that anything other than display: block and display: inline has cross-browser inconsistency problems and should be avoided.

This article focuses on why you should start using display: inline-block, understanding this value as well as how to make sure it is consistent across all modern browsers and IE7+.

Note: If you don't yet know the differences between inline and block level elements, check out what css-101 has to say about it.

inline-block is your missing friend

inline-block solves all sorts of problems web-devs run into on a daily basis. I'm going to go through various common scenarios and cover how I would deal with them in a cross-browser fashion. You may notice some odd/hacky CSS included in the following examples - this will be covered in the Browser Compatibility section later in the article.

inline-block vertically center (IBVC) hack

Chris Coyier talks about a "Ghost" IBVC method and he credits Michal Czernow for it's origin. Chris also mentions how it's equivalent to the display: table/table-cell method since it also doesn't support IE7. I've been playing around with inline-block and tinkering with vertical centering and I've come up with something that seems to be the 'Ghost' method (I'd discovered the 'Ghost' method after stumbling upon this solution) with a few differences. The two differences being mine supports IE6+ (not that IE6 matters at all anymore, just an FYI) and it doesn't require pseudo elements to function.

Being able to vertically center an element with a dynamic height is something that has plagued developers (or me at least) for a very long time and the cross-browser solution has been somewhat of a holy grail. I've seen many different vertical centering methods, the most popular being the display: table used with display: table-cell. The problem with this is IE7 doesn't support either of those display values.

I feel this hack is a more simple and easily understandable way of vertically/horizontally centering an element than the previously mentioned table/table-cell/IE7-bug-hack method. I also feel it's much easier to understand and work with than the Gary Turner method too, but well done to him for coming up with that over 7 years ago. I'm sure other people will feel differently about this being the "best" way, however this is what I prefer..

Problems

vertical-align property

One slight downside to this I've noticed is vertical-align: middle vertically aligns the capital letters, so lower case letters or inline-block elements are very slightly off center. I've noticed elements being off by about 2px to 4px depending on what size the items are. Although this occurs it's pretty much negligible for me - especially since I can't actually notice this unless I actually count pixels.

Space characters

Space characters are handled like a space would be handled within inline-elements. This means that spaces and or tabs will be displayed as a space once the page has rendered. There are a couple of ways to work around this problem but it can be annoying nonetheless.

IE7 hand-holding

The above mentioned ‘space characters' problem doesn't take affect in IE7. The problem IE7 does come with is that it requires at least 1 other inline-block element to be present to allow the inline-block to vertically center. To get around this, I've added an "invisible" element after the item I'm centering - I've added it afterwards incase :first-child is used. This was included in the Ghost method through pseudo elements. Even though I've managed to remove pseudo elements, I've had to add an equivalent (or worse since it's actual markup) for IE7. Boo.

Alternative methods

There is an IE7 CSS bug in which you can center an element vertically, and if used along side the table/table-cell method, it can work nicely (However I haven't used it in practice). This can also be done using the Flexbox layout module - Flexbox is definitely something that will be used much more in future, however as Le Roux pointed out to me, the current Flexbox support right now is a bit flakey - So it may be another 1 or 2 years before we can start using it with absolute confidence.

Centering navigation items

I often come across a navigation design where the amount of items in the navigation should be dynamic, however the navigation itself should remain centered regardless of how many or how wide the items are. Previously I would have centered this with display: table, however, since display: table doesn't have any IE7 support, I would have probably also used an IE7 javascript fallback (Or just let the navigation appear left aligned in IE7). With display: inline-block, this same result can be achieved with 2 (or 4 including IE7 support) css properties and values.

How simple was that? Seriously?

Article block listings

Generally I solve the following kind of problem differently depending on the exact design and how I feel at the time.

An easy inline-block solution would be:

The design could have been more tricky, though. Typically the height would be dynamic, or possibly both the height and width. As you can see this isn't exactly a masonry layout since each row starts and ends at the same top-offset. It is still not possible to solve a masonry design in LTE IE9 without javascript. The height of these items are dynamic though, mere floats wouldn't work correctly. If we used floats would end up with something like this:

To avoid that we could use :nth-child and detect the first item in each row and then clear: left, but that would pose some cross-browser problems itself since :nth-child is only supported by modern browsers. We could add classes to these items via the CMS/backend language, but it would be easier if we could just get this working with CSS alone and without any problems! :( Yay, inline-block the the rescue again! :D You didn't expect that did you?!

More navigation

Surely there is some limit to the IE7 support? What about an inline-block within an inline-block?!

In the above example I have 3 levels of nested inline-block items and it works perfectly in IE7+.

Browser compatibility

If you've read up until this point, you are well aware that an IE7 hack should be used to "enable" the inline-block functionality.

The IE7 hack

.item { display: block; *display: inline; zoom: 1; }

This could be turned into valid CSS if you are using the <html> conditional classes (included in h5bp):

.item { display: inline-block; }
.lt-ie8 .item { display: inline; zoom: 1; }

Why does that work?

IE7 doesn't support inline-block per se, however you can mimic the functionality by making it be an inline element and triggering hasLayout on the element. The zoom: 1 visually doesn't change anything. It is applied this way because it is one of the properties that triggers hasLayout.

Conclusion

inline-block is an amazing and underrated and underused property, in my opinion. inline-block is something that can and should be used today with confidence. We fear that which we do not understand - hopefully inline-block is now added to your CSS toolbox.

CSS Animation: How it works from transitions to animations

Mon, 23 Jul 2012 00:00:00 GMT

CSS animation is definitely the next big step in CSS. Absolutely amazing things can be done with this. It is literally up to your imagination, as you’ll come to realize if you don’t already understand how CSS animations work. HTML5 and javascript continues to replacing what Flash was previously used for, and similarly CSS continues to replace functionality javascript was used to provide. In this article we’re going to cover the CSS animation basics and make sure we’ve learnt it well enough to add it to our development-toolbox.

So, what’s the difference between the Transition property and the Animation property?

There are two basic differences:

The first major difference is that transitions only have a to and from state. Transitions also only effect once a pseudo class (such as :hover, :focus, :checked, etc) is triggered or removed. The second notable difference between animations and transitions are @keyframes. Transitions only have two @keyframes (the to and from states), but animations can have an endless number of @keyframes. The keyframe positions are set with percentage values. You could make a ball spin and bounce up and down with only few lines of CSS (Sort of. Since you’ll have to do everything multiple times with vendor prefixes, the CSS gets quite a bit longer).

Animation syntax

The animation property and keyframes go hand in hand. The animation property’s ‘values’ are the element-to-be-animated’s options and the keyframes are the actions it should follow.

A simpler way to put it is:

Animation: How to animate – duration, speed, etc. Keyframes: The properties to animate – from/to.

The following animation property is shorthand for the various CSS properties which will be covered later in this section.

#element { animation: name duration timing-function delay iteration-count direction; }
 
@keyframes name {
    0% { property: value1; }    /* Start of animation duration */
    35% { property: value2; }   /* 35% through the animation duration*/
    100% { property: value3; }  /* End of animation duration */
}

`animation-name`

The name of the animation. This value links the animation properties to the keyframes. This value is required, without this the keyframes can’t be referenced.

`animation-duration`

The time it takes for the animation to complete in seconds.

`animation-timing-function`

Supported timing-function keywords are: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end. The cubic-bezier() CSS function is supported by animation-timing-function and can be used to create custom timing-functions.

If left out, this property defaults to ease.

`animation-delay`

The amount of time, in seconds, waited before the animation begins after the animation has been applied to the element.

If left out, this property defaults to 0s.

`animation-iteration-count`

The amount of times the animation should run. Negative values are treated as 1 and fraction values play that fraction of that animation. For example 1.5 will play through the animation 1 time and stop halfway through the second iteration. infinite does what you’d imagine, it doesn’t stop the animation.

If left out, this property defaults to 1.

`animation-direction`

The direction of the animation. This property has 4 values: normal, alternate, reverse, alternate-reverse.

The “normal” state would play through the keyframes from the lowest percentage to the highest. This property can be set to reverse where it will play from 100% down to 0%.

alternate runs the animation in reverse every second iteration, so the animation goes from 0% to 100% the first time and then from 100% to 0% the second time and repeats that pattern. This is property gives the effect that the animation doesn’t restart.

reverse runs the keyframes in reverse, for example it begins at 100% and ends at 0%.

Lastly, alternate-reverse begins at 100% and reverses every second iteration.

If left out, this property defaults to ‘normal’.

CSS Keyframes

Along with the animation-name, keyframes are the most important aspects of CSS animations. Keyframes are the animation instructions.

Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The from keyword references 0% and the to keyword references 100%. Functionally the following is identical:

@keyframes example {
    0% { bottom: -90px; right: -40px; }
    100% { bottom: -90px; right: -40px; }
}
/* And */
@keyframes example {
    from { bottom: -90px; right: -40px; }
    to { bottom: -90px; right: -40px; }
}

Quick demonstration based on the previously covered properties

See the Pen CSS Animation - Moving a ball around by Jamy (@jamygolden) on CodePen.

In the above example I’ve made use of:

animation-name
animation-duration
animation-timing-function
animation-iteration-count

The 4 ball keyframes are telling the element to animate through each of the 4 keyframes within 6 seconds, while making use of a the boring ‘ol linear timing-function and to do this indefinitely.

As you can see, the keyframes syntax is similar to the media query syntax (And SCSS!) – which most people have been exposed to. Hopefully that makes you feel more at home!

That’s really all there is to it. Let’s go over a more detailed tutorial to make this even more digestible.

Simple tutorial

First we have to come up with a cool animation idea. I’m a big fan of Paul Irish (and you should be too) so I’m going to do some sort of animation involving him.

I’ve taken this image and cut out the arm quite badly, so I have two images. The plan is to layer the arm on top of the larger image and animate it. First we need to define the html

HTML

<div id="paul">
    <img class="arm" src="img/paul-arm.png" alt="" />
</div>

CSS

#paul {
   background: url(../img/paul-bg.jpg) no-repeat left top;
   height: 450px;
   margin: 0 auto;
   overflow: hidden;
   width: 600px;
   position: relative;
}
#paul .arm {
   animation: pumping-iron 2s ease-out alternate infinite;
   position: absolute;
   right: -40px;
   bottom: -90px;
}
@keyframes pumpingIron {
    0% { bottom: -90px; right: -40px; transform: rotate(20deg); }
    100% { bottom: -20px; right: 70px; transform: rotate(-20deg); }
}

So a recap of the above CSS

Set the basic properties to #paul Absolutely position .arm and set the animation property with the relevant values. I’ve named the keyframe animation pumping-iron, set the animation-duration to 3s, used the boring-old linear timing-function and set the loop to infinite because Paul never gets tired of pumping-iron. Keyframe #1 sets the starting position of Paul’s arm and keyframe #2 sets the end position. The animation-direction value alternate tells the animation that once it has completed, it should alternate the keyframes. This brings the animation back to the starting position. The animation-iteration-count value infinite tells the animation to continue forever. You would really feel the vendor-prefixes on this one. A prefix on the @keyframes means you duplicate that entire keyframe section 5 times! Looking at the prefixed version of animation and @keyframes is definitely intimidating, but as long as you realize it’s just CSS bloat you should be fine. Let’s take a look at this for visual reference… Be prepared:

#paul .arm {
    -webkit-animation: pumping-iron 2s ease-out alternate infinite;
    -moz-animation: pumping-iron 2s ease-out alternate infinite;
    -ms-animation: pumping-iron 2s ease-out alternate infinite;
    -o-animation: pumping-iron 2s ease-out alternate infinite;
    animation: pumping-iron 2s ease-out alternate infinite;
}
@-webkit-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -webkit-transform: rotate(20deg); }
    to { bottom: -20px; right: 70px; -webkit-transform: rotate(-20deg); }
}
@-moz-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
}
@-ms-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
}
@-o-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
}
@keyframes pumping-iron {
    from { bottom: -90px; right: -40px; transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; transform: rotate(20deg); }
}

And now for the final product!

See the Pen CSS Animation - Strong Paul by Jamy (@jamygolden) on CodePen.

Cross Browser compatibility

To quote HTML5Please:

For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.

Currently all modern browsers and/including IE10 support CSS animations with a vendor prefix. Next time you come across an animation you need to add, use CSS animations and either fall back to no animation or use Modernizr to detect for the support and fall back to the javascript you would have added anyway. Viva la progressive enhancement.

…And because Modernizr is so damn cool and simple to use I’ll briefly explain how exactly to make use of this feature detection and fallback option.

See the Pen CSS Animations - Working with fallbacks by Jamy (@jamygolden) on CodePen.

Modernizr adds various classes to the HTML element depending on whether the browser supports a feature or not. You could make use of classes such as .boxshadow, .no-boxshadow, .borderradius, .no-borderradius, etc. This puts the power of feature detection right into the CSS which is great and easy to make use of. You could also do more intricate feature detection by using their Modernizr javascript object.

Conclusion

I think you should all be using CSS animations right now, provided you include the vendor-prefixed versions and have a decent fallback for non-modern browsers.

How to horizontally center elements of a dynamic width

Mon, 21 May 2012 00:00:00 GMT

A couple of months ago I wrote an article titled "How to horizontally center anything with CSS". The featured method of the article was to center an element with a dynamic width using display: table. This works wonderfully in IE8+ and modern browsers. I would usually ignore IE7's inability to render this property, however, every now and then it would have to work in IE7. This is an example of the display: table method:

New Method

Ever since I came across the IE7 inline-block hack, I've been using it whenever I can. It works in IE7, why wouldn't I use it everywhere?

Inline-blocks can be centered with the use of text-align: center. Therefore, a list of inline-blocks can be centered extremely easily. This works absolutely wonderfully for horizontally centered navigations, or anything that doesn't have block level elements within it. This is an example of a navigation dynamically centered with the use of inline-block elements and the text-align: center property:

You may have noticed that the HTML doesn't have spaces between the elements for readability like the previous example does. This is because the elements are treating the spaces/enters/tabs between them as an actual space since they are behaving like inline elements. IE7 doesn't support inline-block, however an inline element which receives hasLayout behaves as if it were an inline-block. zoom: 1 is one of the properties which forces hasLayout on an element in IE.

Conclusion

This is an extremely simple way of solving a dynamically centered navigation problem with brilliant browser support. It may not be the solution for every display: table that is/was used, but it can definitely help in a bunch of different scenarios.

A border-image Investigation

Wed, 18 Apr 2012 00:00:00 GMT

border-image is a really great property that can and should be used right now. There are some decent fallbacks which gets covered later on in the article.

MDN is usually really great resource when it comes to documentation relating to HTML, CSS and Javascript but their border-image documentation is definitely lacking - I think it's due to the absence of actual examples. The best resource I've come across for border-image is definitely the /W3C spec/ - I can't say I've said that before. That's the reason I've decided to write this article - A resource that thoroughly explains the basics of the border-image properties with relevant examples.

What is `border-image`?

border-image is quite self-descriptive - It allows you to use an image as a border for an element. Before getting into too detailed, here is an example:

See the Pen Basic border-image example by Jamy (@jamygolden) on CodePen.

border-image is shorthand for the following properties:

border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat

If these properties replaced their value counterparts in the border-image property, it would look like this:

.border {
    border-image: <border-image-source> <border-image-slice> <border-image-width> <border-image-outset> <border-image-repeat>;
}

the bolded properties are required, the others may be left out.

Where are the pixel values? A typical example of a border-image property could look like this:

.border { border-image: url(../img/border.png) 20 10 20 10; border-width: 20px 10px; }

Numerical values are used instead of pixel values and percentage values are accepted too. The numerical values refer to pixels if it's a rasterized image ( jpg, png, gif ) and co-ordinates if it's a SVG image. Every border-image-* property is heavily reliant upon the border-width property since no pixel values are set within the border-image property.

Vendor Prefixes

Vendor prefixed versions of border-image only support the border-image shorthand and not border-image-slice, border-image-repeat, etc.

Now for the border-image properties

`border-image-source`

This property requires the CSS url function just like background-image property does. The image we provide here is the image that is going to be used as the border's image.

.border { border-image: url(../img/border.png); }

SVG

Svg elements can be used. They are handled slightly differently within the different browsers - firefox seems to rasterize the svg element and apart from IE9, at the moment Firefox seems to have the worst border-image support.

`border-image-slice`

This property accepts 4 values, just like the margin and padding property as well as an optional fill value:

.border { border-image-slice: top right bottom left fill; }

The 4 numerical values

These 4 values cut the image into 9 parts or regions. TopLeft, Top, TopRight, Right, BottomRight, Bottom, BottomLeft and the Center region.

The image below is an example .png file that could be used for the border-image-source.

Below is the same image with the border-image-slice region as a grid overlay:

Obviously 4 numerical values are not required, there are shorthand versions just like the margin and padding properties have.

.border { border-image-slice: 10 10 10 10; }
.border2 { border-image-slice: 20 10 20 10; }
/** Shorthand version **/
.border { border-image-slice: 10; }
.border2 { border-image-slice: 20 10; }

Fill

You may be a bit unsure as to what exactly the 9th section of the image is for. Well, it's up to you whether you want to use it or not, but it could be used as a pseudo-background. You have the option to completely ignore it and use the background property, or you could use this 'pseudo-background' by appending the fill value to the border-image-slice property. This 'fills' everything within the border with that section of the image. This fill image is either repeated or stretched depending on the border-image-repeat property. An example of fill in use:

.border { border-image-slice: 10 20 fill; }
/** or **/
.border { border-image-slice: 30 40 10 20 fill; }
/** or **/
.border { border-image: url(../img/border.png) 10 fill; }

If the fill keyword is left out, by default the fill is not applied, HOWEVER: all vendor prefixed versions of border-image have fill applied by default and there is no way of disabling this option. A work around would be to have the center area of the border-image-source image transparent.

Ratio

The border-image-slice is heavily dependant upon the border-width property. Imagine these properties being linked by ratio: border-width and border-image-slice. Let's say we have a 30px border - 90% of the time we would make sure the border-image-slice matches the border width:

30px:30 - There is a 1:1 ratio.

If we have: 90px:30 - that is a 3:1 ratio. This means the border image will be stretched to 3 times its original size.

See the Pen border-image-slice example by Jamy (@jamygolden) on CodePen.

Bugs

The firefox doesn't seem to actually set the slice area correctly while using a vector image. When the border-width increases, the slice doesn't scale along with it. This defeats the point of using a vector image for a border image. Hopefully this will be fixed soon.

`border-image-width` & `border-image-outset`

These properties don't affect the box-model. By default the border-image-width value is 1 and the border-image-outset is 0. These properties accept a numerical value. Their values are multiplied by the border-width and rendered accordingly.

`border-image-width`

This value represents how large the border's image should be. If you had something like:

.border {
    border-image-width`: 3;
    border-width: 40px;
}

The width of the border's image would be 120px. The more the border-image-width value increases, the more the border's image grows into the box model without affecting the box-model by layering itself on top of the element's background.

See the Pen border-image-width example by Jamy (@jamygolden) on CodePen.

`border-image-outset`

This value represents how far outside of the box-model the border image should be rendered. So:

.border {
    border-image-outset: 2;
    border-width: 30px;
}

Would render the border 60px outside of the box model without affecting the box model.

See the Pen border-image-outset example by Jamy (@jamygolden) on CodePen.

`border-image-repeat`

This property attempts to solve a possible problem with the repeated border-image area. 4 possible values are accepted: stretch, repeat, round or space.

Stretch is the default value for the property. This value stretches the tile across the height/width of the element.

Repeat merely repeats tiles.

Round is the 'magic' property. It repeats this area, however if a whole number of tiles don't fit in this area, the browser resizes the tiles so that it fits snugly. Currently only Firefox and Opera support this value. Any value Chrome doesn't recognize in this property is treated as 'repeat'.

Space is similar to round. A whole number of tiles must fit in correctly, otherwise the left over space is distributed evenly between the tiles. This is the only value that is currently not supported by any browser.

An example of each follows:

See the Pen border-image-repeat example by Jamy (@jamygolden) on CodePen.

Cool Tricks

The stretching colours cause gradients! You can do some pretty cool things with this:

See the Pen Creating a gradient with border-image by Jamy (@jamygolden) on CodePen.

Fallback

border-image overwrites the border-color and border-style properties or visa versa depending on which has a higher specificity. Make sure you apply border-image after the usual border properties for a 'normal border' fallback. Alternatively, there is always a web-developer's best friend, Modernizr. As for IE support, there is CSS3PIE. Unfortunately I've failed to get this to work even though I followed the site's documentation. I never have much like with CSS3PIE outside of border-radius and box-shadow, it's probably something I'm doing wrong. Firefox Nightly doesn't yet have support for prefix-free border-image. Firefox Nightly 14.0a1 wasn't able to render any example of border-image I had so I wasn't able to see how well it faired with proerties/values Firefox doesn't currently support, but I'm sure it will support the prefix-free version sooner than later. Chrome Canary doesn't yet support the border-image-repeat properties apart from stretch and repeat.

Great resources

If you don't already know, HTML5Please is an excellent resource and lead me to border-image.com which is a great webapp that could help with any border-image development and understanding.

Gaussian Blur and CSS3/SVG

Tue, 27 Mar 2012 00:00:00 GMT

Edited: 07 January 2014 - Updated article to reflect current browser support. Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of 'filter' power within a browser environment.

Before we get started, I think it's just important to understand that both the SVG and CSS filter properties affect an element and all of it's children. A child element cannot be 'un-blurred', only blurred more. There are a few methods of recreating this Gaussian blur effect, some work cross-browser, others don't but will be supported in future.

In the example jsfiddles you may notice HTML IE conditional statements: Usually those conditional statements are applied to the <html> element and I've added them to a div to mimic that functionality.

CSS3 text-shadow

Supported by:

I'm sure you're either aware of, or easily understand how this trick works. Very simply, you give the text a text-shadow and make the it transparent so that only the shadow is visible. This gives a simple and effective blurred text effect. Usually I would detect for IE9 but it's necessary in this case since IE9 doesn't support text-shadow.

See the Pen Gaussian Blur applied through Blur effect applied to text with CSS3 by Jamy (@jamygolden) on CodePen.

Problems

Opera doesn't currently support the transition to the text-shadow property. The blur works well though!
I've applied a lte-IE8 shadow filter to the text. It looks more like a smudge than a blur, but there you have it - use it, don't use it.

Fallback

Use Modernizr ( or feature detect manually ) for text-shadow support to apply fallback styles. This is necessary due to the fact that the text has a transparent color and without the shadow, the font is illegible.

SVG blur filter applied to a SVG element

Supported by:

The title may seem superfluous but it's actually quite important to understand when it comes to SVG filters. SVG supports filters and we can easily and freely apply these filters to all kinds of SVG elements. Note: NOT all kinds of HTML elements, I'll elaborate a little later.

See the Pen Gaussian Blur applied through SVG blur filter applied to a SVG text element by Jamy (@jamygolden) on CodePen.

Problems

Chrome isn't currently able to apply a SVG filter if one has already been applied to an element. This means: if a SVG element contains a filter, another filter won't be applied via class change, hover or any other CSS pseudo class.
IE6-IE8 doesn't support SVG within HTML. They see these tags as made up tags and treats them as that. They elements are not able to be styled unless the SVG is wrapped in an element and that wrapper element is styled. Alternatively document.createElement() could be used (This is what the HTML5 shim/shiv makes use of. more about it by Paul Irish).
No browser supports the transition property being applied to a SVG element

SVG blur filter applied to a SVG image element

Supported by:

Most of us want to apply a blur filter to images so the above example is all well and good, but it probably won't be of too much assistance since the CSS3 text-shadow blur does the same thing. We're not able to drop <img> elements into SVG an image, luckily SVG has it's own way of inserting external images. Suddenly this gives us quite a lot of freedom when it comes to Gaussian blur or other SVG filters.

See the Pen Gaussian Blur applied to SVG element by Jamy (@jamygolden) on CodePen.

Most of the above problems apply here as well as a few more:

Chrome can't apply a SVG filter if one has already been applied, however there is a work around for this in Chrome Canary. If you apply a filter to a parent SVG element and a hover filter to the child element, the hover effect will take place.
No browser supports the transition property being applied to an SVG element
IE9 renders the image (without an applied filter), But lte-IE8 doesn't display the image whatsoever.

SVG Blur Filter applied to HTML elements

Supported by:

See the Pen Gaussian Blur applied through SVG Blur Filter applied to HTML elements by Jamy (@jamygolden) on CodePen.

Problems

Firefox is the only browser that supports this
The transition property still doesn't take affect when applied

CSS Blur Filter

Supported by:

This is where it all gets very exciting. A CSS property that fully supports all kinds of filters including the most important one (for this article at least), the blur filter. It is more simple to use than you could ever imagine – element { filter: blur(2px) }

Unfortunately this can't be applied to SVG elements, however there is a bit of a work around: You can wrap the SVG element within an HTML tag and apply the CSS filter to that. The only draw back is that the entire SVG element will be blurred, and not a single element.

See the Pen Gaussian blur applied through CSS Blur Filter by Jamy (@jamygolden) on CodePen.

It's merely a filter property with a blur value applied. Absolutely amazing. On top of everything, since it's a standard CSS property, the transition property works perfectly. You can transition from a normal image, to a half blurred/half grey scale image if you'd like. It's all up to your imagination.

Problems

Not complete browser support. Webkit only, currently.

The "problem" is quite a large set back here. The only browser that supports this is a nightly browser version - This means that we should pretty much stay away from it until at least 2 popular browsers support it... Right?

I think you could use it now actually

As long as it's not an absolutely dependant feature, browsers will degrade gracefully - If the property isn't supported, the image is unaffected.
It should be supported in Chrome pretty soon
You could use the CSS filter (Webkit only) along with the SVG filter applied to an HTML element (Firefox only)

Here is an example of the CSS Filter used alongside the SVG filter.

See the Pen Gaussian blur applied through CSS Blur Filter and SVG filter by Jamy (@jamygolden) on CodePen.

HTML5 Rocks has a cool article and demo about this property - Keep in mind the demo currently only works in Chrome Canary.

Good old fashioned images

Supported by:

This is obviously the most popular at the moment due to the browser support.

See the Pen Gaussian blur effect applied through images by Jamy (@jamygolden) on CodePen.

Problems

Increased page size due to extra images
Increased HTTP requests (if you don't use a sprite)
Annoying to manage if something has to change across all images

What was learnt?

Chrome can't swap SVG filters. This means that an element can't have a SVG filter applied and then have that filter change on hover. IE9 can't do much of this which was expected, but what I didn't expect was for Safari to be almost as bad at it.

Anything else?

You could blur the images via the HTML5 canvas, but that's another article.
I don't really mention Safari in this article - Most of this doesn't seem to work in Safari 5.0.1 for Windows.
The CSS filters are going to be very cool

Article influences

Paul Irish helped me look in the right direction - There is a surprisingly little amount of information about this topic out there.

@jamygolden canary supports CSS filters dvcs.w3.org/hg/FXTF/raw-fi... certainly the shorthands. havent tried the others. you should! — Paul Irish ◕‿◕ (@paul_irish) March 6, 2012

Paul's article SVG filters on HTML5 video was quite informative. High Res Browser Icons was a life saver and I now make use of CSS3 Please multiple times a day.

The IE 'blur' method which was used originates from a useragentman article. Subsequently Zoltan Hawryluk's (the owner of the useragentman blog) added some really helpful comments in the comments area and helped achieve a really good looking text-blur effect for IE7+.

My Journey to the Perfect Text-Editor

Mon, 20 Feb 2012 00:00:00 GMT

This article is about why I feel SublimeText 2 is the best text editor ever and how/why I ended up using it. I've decided to write this because I seem to talk about this topic quite often and it would be easier for me to reference someone to an article rather than explaining my rationale over and over again.

Dreamweaver

I started using Dreamweaver's design mode when I began web-development. I didn't touch HTML. I started using some of the DW javascript functionality which I thought was quite powerful at the time ( this was literally all done without looking at HTML ), but I was getting frustrated with the tabular layout - It felt like I was fighting it more than working with it. Changing the width of tabular layouts isn't easy when you have multiple nested tables.

I started seeing all kinds of unbelievable tutorials and javascript plugins online. Things like dragging elements around as if they were windows in an operating system. I slowly started manipulating other people's code within the DW code view and eventually I was permanently using that view. I felt design mode was for newbies and tabular design was old-school and evil. It was at this time that I started following popular online blogs such as CSS-Tricks and David Walsh, etc.

Dreamweaver features that stood out for me:

I enjoyed the syntax highlighting colours
Wrap text in element functionality
tags closed automatically
Find/replace throughout open files

Note: It took Dreamweaver 30 seconds to load up so I could take the screenshot. Core2Quad 2.3ghz with 3gb of ram.

Notepad++

I eventually moved over to Notepad++. I enjoyed how quick it was - Lightning quick compared to the bulky Dreamweaver. However it didn't have most of the things I liked about Dreamweaver and it wasn't nearly as aesthetically pleasing with regards to icon layout, icons, colours in general and the syntax highlighting. I actually found - and still do find - the toolbar of icons ( including print, copy/cut/paste, find, etc) very insulting. Eventually I was using Notepad++ without turning back to Dreamweaver for anything, but still I didn't feel completely comfortable with it, something was missing.

Note: I probably didn't use this editor to it's full potential.

E-TextEditor

I began noticing how many people were talking about TextMate but I could not use it since it was/is a Mac specific application. After some googling I noticed there was a 'Windows' version of TextMate called 'E-TextEditor'.

I found the syntax highlighting very pleasing and it had almost everything I could want, including FTP built into the app - This felt much more simple to get going than the Dreamweaver FTP functionality. One thing it didn't have was 'Find/replace throughout open files'. This was something I had missed since Dreamweaver.

Without a doubt, this became my text-editor of choice.

GEdit

I was getting fed up with Windows for various reasons and I couldn't afford a Mac, so Linux ( Ubuntu ) was my next logical step. GEdit was/is the default text editor for Ubuntu and I was surprised that the default text editor that was so 'advaced' compared to other default OS text editors. This mainly included pleasing syntax highlighting and tabbed functionality. GEdit didn't have the 'Find/replace throughout open files' functionality and something about it didn't feel great when using it for larger projects. As far as features went, it didn't have too many that I was aware of. For small HTML/CSS/JS projects or tests it was perfect though.

Scite

By default Scite has ( or my default installation at the time ) the line numbers disabled. This is/was highly annoying and on top of that, it wouldn't 'remember' my option to keep line numbers enabled. Small things like this can really get to me - I want to feel completely at ease, comfortable and happy with my tools.

I didn't really like the icons and the general look and feel of the editor, however, it was definitely much more advanced and nicer to use than GEdit - with options like “Convert selection to lowercase” to regular expression searches. By this time I had decided Scite was the Linux text editor for me, however as much as I liked it I preferred E-TextEditor, but I had completely moved away from Windows - apart from my virtual machine with PhotoshopCS3 and IETester. It's difficult using a text editor when I would have switched it for E-TextEditor or TextMate in a heartbeat.

Coda

I began using a Mac at work and it had Coda pre-installed. I had heard almost as much about Coda as I had about TextMate, mainly from Chris Coyier and a co-worker/friend. I enjoyed Coda - It had extremely simple and intuitive FTP support and was very nice to use. Coda had random nuggets I hadn't seen in editors, like a wildcard character within searches. This could be achieved with regular expressions in other text editors, but the simple option was nice. The lack of functionality I was used to got to me. Coda was nice for larger PHP projects or smaller HTML projects.

TextMate

I was really eager to try out TextMate. I had heard so much about it and E-TextEditor was based on it.

TextMate was very different from other editors - especially since I was new to OSx. It was pretty much just a window of text. All the options could be accessed via keyboard-shortcuts or by the options panel. It took me a couple of minutes to get used to it but I really loved it.

Komodo Edit

As much as I liked TextMate, I could never get completely used to it because at the time I was working on 2 operating systems - OSx ( work ) and Ubuntu ( home/dev ). I was also sure I would end up using Windows for some or other reason in future due to work or somewhere else I was forced to. This meant that I would be using a different text editor on each operating system. This made me feel uncomfortable and I didn't want to learn to use something I'd end up not using. It felt like a waste of time investment. I definitely wanted to get used to an editor that worked across all platforms. I wanted a text editor I would use for the rest of my life.

My seeking continued until I had found KomodoEdit. It was great. It had a couple of things I wasn't ecstatic about, but the fact that it was cross platform made me forget about those quickly. KomodoEdit was definitely a very powerful text editor. I was referred to the application by a hardcore PHP backend friend and that made me feel good since I felt that I could grow with the editor if I needed to.

KomodoEdit is a light-weight and free version of KomodoIDE. I had found pretty much everything I had wanted.

Light-weight - Check
Multiple language support - Check
Plenty of options - Check
Powerful - Check
Cross-Platform compatible - Check
Aesthetically pleasing - No
Find/replace throughout open tabs - No

SublimeText 2

Finally I stumbled upon SublimeText 2. And it was good.

It had everything I could ever want and more, this went from Multi-select to distraction free mode. It had all the above checks, it was aesthetically pleasing and had an unbelievable find functionality. The Mac text editors ( TextMate and Coda ) look and feel far better to use than applications on other operating systems - It's like they're just made better. SublimeText2 has kept this feeling, even on different operating systems. The fact that text editors had to look ugly in Linux and Windows had been something I had wondered about on and off for a long time - Finally there was one editor that broke my perception.

I had never used a dark theme before but the default SublimeText 2 was perfect. It had Chrome styled tabs, you could record macros, create your own snippets very easily and it had a visual map of document on the side of the editor ( this seemed like it could get old quickly, but I find it very useful in spotting patterns in larger documents).

The options worked differently compared to any other application I had used before. An options page was a text page in a sort of object/array layout. At first I thought this was temporary and it would be updated in a future version, but I finally realized how brilliant it was. You could search for options via the text editor. Search results appear in another default text-editor tab and it's all consistent. You don't ever leave tabs and text, brilliant.

The best part is, it's only a beta. That's right, until the time of this writing ST2 is a beta and it gets updated VERY often. New features, functionality and bug fixes come out with every update. ST2 has always been expensive for a text-editor, atleast $59 is expensive for one to me, but ST2 allows you to trial the software for as long as you'd like. On the site it says:

SublimeText may be downloaded and evaluated for free, however a license must be purchased for continued use.

The license comes with a bunch of perks, the most noticable includes a per-user license, not per-install or per-machine. This means you can use the registered version on whatever operating system and machine you're using. After running and using it on all operating systems I decided to purchase it and I would urge anyone who loves it half as much as I do to support the development.

On top of all of this, I've subsequently began to learn Ruby and it's got a Ruby build system installed - along with a bunch of other builds, including ant build. ST2 supports a vast amount of languages ( more than just syntax highlighting ), has plugin support and it supports Textmate snippets. The community is also pretty great.

As you may possibly know, I develop HTML, CSS, Javascript, PHP and Ruby. I've got friends who I've convinced to permanently use ST2 and they use languages ranging from Python to C++.

According to me, it is by far the best text-editor around.

tl;dr

SublimeText 2 is awesome.

Disclaimer

I don't own any of the icons used, they belong to the text-editor/operating system. I may have unfairly moved on from some of the text editors due to lack of specific functionality (or perceived lack of), aesthetics and cross-OS support. I may have been a bit unfair and some of you may disagree with me, but for me ST2 wins in every field. Also, if I've misrepresented any text-editor above, please correct me by with a comment.

Bulletproof full page background images don't exist

Thu, 05 Jan 2012 00:00:00 GMT

They don't and can't exist. Before I continue, let me explain what a 'bulletproof full page background' is. This is a solution that will always give the 'perfect' full page background-image across multiple viewports regardless of which image you are using. Note: I understand 'perfect' is a very subjective term.

I have been asked to create a full page background image before; There was a problem, however...

Images can stretch nicely as long as the proportion remains constant, otherwise the image looks stretched. This is an example of what someone might consider a perfect full page background-image: As you can see, the scale remains constant and this works with the perfect full page background-image.

Problem 1

The background in the previous example contains the width/height of the viewport. If the second viewport didn't have the same dimension ratio, that very same background could look something like this: That is clearly an example of a 'failed' full page background.

Problem 2

A typical and easy way to fix it would be to set the background-image width to be equal to the viewport's width, but leave the height a dynamic size. This would give you something that looks like this: Obviously the problem here is that the entire bottom area of the image is currently not visible... Unless you scroll down, which defeats the purpose of a full-page background-image.

Problem 3

You could very well set the height to fit the viewport's height and have a dynamic width. With this example, the output would now look something like this: This seems like the perfect full page background image solution right? Well... Not really. If we used the exact same technique with an image that has a larger width than it does height, it would look like this:

So, what is the solution?

The perfect solution exists, as long as you don't feel that 'perfect' implies every image should look great with the specific solution. As long as you have background images with similar layouts ( All have width > height or visa versa ) you could use a solution to work with them all.

I have seen a static image used as a centered background image which worked well for that situation.

Conclusion

When it comes to full page background images and dynamic backgrounds, make sure you understand how the dimensions work and pick the right solution for your needs.

Use :pseudo-elements as list-style-image alternatives

Thu, 01 Dec 2011 00:00:00 GMT

Styling lists with CSS can be a bit of a pain from time to time. If I require an kind of customized bullet, the first CSS property I think of is list-style: none;. I've tried on more than one occasion to use list-style-image but it's given me nothing but trouble when attempting to position it. A popular alternative is to use the image as a background-image of the list item.

li { background: url(images/bullet.png) no-repeat left top; list-style: none; }

This gives us the ability to move the 'list-item' around as we please without problems. Great solution! right?! No, there are three very annoying (however, small) problems with this method:

You can't effectively include the list item in a sprite, as you'd run into problems displaying areas of the sprite you wish to remain hidden.
An image obviously can't work with ordered lists as the numbered list-style-type would require a different image for each list item. This is possible but not very effective as it would require a lot of images and it wouldn't be ever-expanding - It would have static amount of numbered images.
Adds to HTTP requests - this is especially annoying if you've got a couple of different lists all using this method

Those are my two problems I have with the background-image, but I have managed to find a way around it.

Standard background-image method

Before I get started on the way I usually do this, let me show you what I did before and what I think most people do.

The HTML necessary

<ul class="first-example">
	<li>SEO</li>
	<li>Content Management System</li>
	<li>Social Network Integration</li>
	<li>Another list item for emphasis</li>
</ul>

The CSS necessary

.first-example li { background: url(../i/tick.png) no-repeat left 8px; }
.first-example li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; }

You can see what's going on, no explanation needed. The only thing to note here is the list items contain a background image and that image is a single file separate from the sprite which adds to http requests.

Make use of pseudo elements

Pseudo elements are our friends. They are that extra bit of gas in the tank. When everything looks dull and there is no easy way to do what it is you want to do, look towards pseudo elements.

We could use pseudo elements as the 'bullets'. This would solve the problem of showing more sprite than we'd like since we can set the pseudo-element's width and height and give it the sprite background.

The HTML

The HTML is exactly the same as the first example with. The only difference is the class selector used for us to target.

<ul class="second-example">
	<li>SEO</li>
	<li>Content Management System</li>
	<li>Social Network Integration</li>
	<li>Another list item for emphasis</li>
</ul>

li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; }
ul.second-example li:before {
content: '';
background: url(../i/sprite.png) no-repeat left top;
height: 20px;
width: 20px;
position: absolute;
left: 0;
top: 8px;
}
ul.second-example li:nth-child(2n):before {
background-position: -21px 0;
}

Why exactly are we giving every second example a different list item image? For two reasons:

It gives me an excuse to use a sprite in this example
We're just retro and hip like that

Le's see what would have happened if we gave the first example the sprite as the background.

List item with the sprite as a background-image

List item with pseudo element using the sprite as a background image - Preferred method

Make use of CSS counters

What exactly are CSS counters? A CSS counter is a function that is accepted by the content property of a pseudo element. You can count whatever it is you like. The amount of <section> elements in an article, the amount of <h2> elements, etc. In this case we're going to be counting the amount of <li> elements. This way we can dynamically give the :before/:after pseudo elements a numerical value which will help to number our list items.

The CSS counter property is within the CSS 2.1 spec. So this means that it has support down to IE8. I understand that it won't work in IE7 & IE6, but I don't really care too much — I'd probably just give them the default numerical list-item-type.

Bring on the CSS

Some of CSS following will be the same as the previous CSS, but that's because the list is styled in a similar fashion. li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; } li:first-child { border-top: 1px solid #eee; }

ul.first-example li { content: ''; background: url(../i/tick.png) no-repeat left 8px; }

ol.third-example { counter-reset: li; }

ol.third-example li { position: relative; }

ol.third-example li:before { 
	content: counter(li); 
	counter-increment: li; 
	background: #f692bb; 
	color: #333;
	font: bold 14px/20px sans-serif; 
	height: 20px; 
	text-align: center; 
	width: 20px; 
	position: absolute; 
	left: 0; 
	top: 8px; 
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
	   -moz-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
		box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15);
}

Before I continue, thanks paulirish and jon_neal for CSS3 Please - Quite a helpful tool.

Note: the position relative on the list item is very necessary since you'll be absolutely positioning the pseudo elements within each item.

To use the counter() function properly, 3 things need to ne done.

The counter of the specific element needs to be reset — Or as I like to think of it, enabled
The counter-increment needs to be told what to count, and by how much. (the increment could be by 2, or 10, in this example we're going to leave it on 1 by default)
The counter() function needs to be passed into the content property and then told what to count

Ok so first thing to do is to add the counter-reset property to the parent/ancestor container of the item you wish to count. You then give the counter-reset value the element type of the element to count. If you'd like to count the amount of paragraphs in the article element, you could reset the counting by adding the following CSS to your document:

body { counter-reset: p; }
/* Or */
article { counter-reset: p; }

It cascades, so any container will do.

You would then add the counter-increment property to the pseudo element, this tells the pseudo element which element to count and by how much.

li { counter-increment: li 5; }

That example would count in increments of 5 starting on that value, so: 5, 10, 15, etc. If you leave that value out it defaults to 1.

Finally, you would then add the counter() function to the content property of the pseudo element. This literally tells the pseudo element to contain the incremented value.

Conclusion

I find this extremely useful and consider it one of my better CSS tricks. Browser support isn't horrible, but not brilliant either — The inclusion of IE7 would make it brilliant. Never the less, it's completely usable in every day scenarios since I use it fairly often and I give IE7 the deafult numbered styling.

To recap: counter-reset: element, counter-increment: element num, content: counter(element).

Note: I actually make use of the custom bullets via pseudo elements on my unordered list items within my current website design.

How to make the input placeholder more user friendly

Thu, 22 Sep 2011 00:00:00 GMT

I've always loved placeholder text for input fields. Not too long ago the only way to achieve this would be to create a special javascript function that enabled the desired functionality, but now it magically comes pre-built into HTML5. Incase you're wondering, placeholder text is the text within an input field that disappears once you click on it. It's often used in place of a label.

How is it not user friendly? tl;dr - Take me to the tutorial already

Placeholder text can be very helpful and can save a lot of page space while also being aesthetically pleasing. With this great feature, however, comes a problem: If the placeholder text is being used in place of a label, it can become very confusing when you focus on the field and the 'label' disappears.

It's important for users to know:

What field they are currently on
What field they have filled in

Typical input placeholder problem

Which input field am I on?

Based on the image above, it's impossible to tell what the first/focused field is. It is relatively simple to deduce it's either a 'username' or 'email' field. The only way to find out which field you're on would be to remove all the text in the field and blur (lose focus). I have personally been caught by this dozens and dozens of times and I find it very annoying.

One method that websites, such as Twitter, have been adopting is to have the placeholder text fade out slightly on focus, but only disappear once the user inputs some text. This is arguably the way that the HTML5 placeholder should work by default.

An improved version

Normal Placeholder text
Placeholder text fades out slightly on focus
The input field is unknown once text has been added
The title attribute is used to add information

The method that the Twitter login system uses is a big step up from the problem in fig.1, however the same problem still exists once the user has added text.

The title attribute has been used here so a user can see the placeholder text by hovering over the input field which is a great addition. Unfortunately in general, I still don't feel this is as very user friendly as it could be.

The solution

I would like all of the bonuses of both the placeholder method and the standard label method. I've decided there is one basic way to achieve this: Have either the label of the input field or an appropriate icon appear to the right of the field after the field has received focus.

So that's it, in this tutorial I'm going to show you how you can make a form with placeholder text that is semantic, user-friendly and degrades gracefully for legacy browsers.

The HTML

The following HTML is normal <form> markup. It's what we do with the CSS that really matters.

<form id="login">
    <ul>
        <li>
            <input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
            <label for="email">Your Email</label>
        </li>
        <li>
            <input id="password" name="password" placeholder="Your Password" title="Your Password" type="password" required />
            <label for="password">Your Password</label>
        </li>
        <li>
            <input id="submit" name="submit" type="submit" value="Login">
        </li>
    </ul>
</form>

The CSS

#login{font-size: 12px; margin: 0 auto; width: 700px;}
# login li{float: left; list-style: none; margin-left: 30px; position: relative;}
# login li:first-child{margin-left: 0;}
label{line-height: 40px; position: absolute; right: 120px; top: 0; bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0}
input{color: transparent; font-size: 12px; height: 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;}
input[type="email"], input[type="password"]{border: 1px solid #ccc; height: 35px; padding: 0 10px; width: 240px; position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
box-shadow: inset 0 0 10px rgba(0,0,0,.06);
z-index: 2;}
input[type="email"]{color: rgba(47,130,194,.8);}
input[type="password"]{color: rgba(237,28,112,.8);}
/_ Placeholder _/
input[type="email"]:-moz-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]:-ms-input-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]::-webkit-input-placeholder{color: rgba(47,130,194,.6);}
input[type="password"]:-moz-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]:-ms-input-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]::-webkit-input-placeholder{color: rgba(237,28,112,.6);}
/_ Label _/
input[type="email"] + label{color: rgb(47,130,194);}
input[type="password"] + label{color: rgb(237,28,112);}
input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}
/_ Submit _/
input[type="submit"]{
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222; color: #fff; cursor: pointer; height: 35px; width: 110px;
}
input[type="submit"]:hover{color: #ff6937;text-shadow: 0 0 1px rgba(255,255,255,.2);}

The CSS mostly consists of general styling, I'd say the most important two lines are:

input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}

So the label is absolutely placed behind the input field. On focus the label moves to the right while the input's background fades to a lower opacity. This gives the illusion of the label sliding right while fading in.

That's pretty much all there is to it. I think it's a neat little trick.

Let's give IE a bit of love

As always, IE spoils the party, but as always Modernizr is here to save the day. We can get the form to act almost identically (sans animations) on IE8 and functionally on IE 6 and 7. Firstly, make sure you've given either the <html> or the <body> tag IE specific styles. For example:

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <script src="../../../js/libs/modernizr-2.0.6-min.js"></script>

Also, notice I've included Modernizr. I make use of Modernizr on pretty much every project I work on. It allows me to feature detect with javascript and I can make some pretty cool fallbacks with that.

Once we've got that set up we can easily start fixing up IE.

IE specific CSS

.ie input{line-height: 35px;}
.ie input[type="email"]{color: #2F82C2;}
.ie input[type="password"]{color: #ED1C70;}
.ie label{right: 10px;}
.ie input[type="email"]:focus, .ie input[type="password"]:focus{
background:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
zoom: 1;
}
.ie7 label, .ie6 label{display: none;}

The CSS just makes things work in IE. Nothing special really. The weird -ms-filter is to add opacity to the background in IE.

Placeholder functionality fallback - jQuery with Modernizr

if(!Modernizr.input.placeholder) {
    $("input[placeholder]").each(function() {
        var placeholder = $(this).attr("placeholder");
    $(this).val(placeholder).focus(function() {
        if($(this).val() == placeholder) {
            $(this).val("")
        }
    }).blur(function() {
        if($(this).val() == "") {
            $(this).val(placeholder)
        }
    });
});
}

This little snippet does the following:

Detects for the placeholder attribute support. If no support is found, it continues
It then looks for all input elements with the placeholder attribute
It then takes the placeholder value and puts that within the 'value' attribute
When focus is given to the element the value is set to none
When blurred, if the value attribute isn't nothing, it leaves the text alone
If the value attribute is nothing, it replaces it with the placeholder text again

Foreseeable problems

The user can't see the text if the input is full of characters.

True story, but the opacity of the label is so low that it doesn't really interfere with the readability of the text itself. A way around this would be to add padding-right which covers the length of the label. The only downside to this would be the input field having to be very long.

In general I think this is fine, but if you're very worried about this, I'd say add padding-right to the label and use icons instead of text. This will save a lot of space.

Conclusion

I think it's a pretty solid technique that will leave your website visitors — or me at least — happier and less confused while logging in.

Master the jQuery for each loop

Mon, 05 Sep 2011 00:00:00 GMT

The jQuery for each loop can be very powerful. It is used just like any other jQuery function such as .click(), .hover(), etc. and it accepts a callback. As you know, or have probably guessed, the jQuery for each function loops over selected items and does whatever you'd like to targetted items.

You may be asking yourself:

But isn't that what CSS or jQuery selectors do anyway? What's the difference?

Standard jQuery for .each()

Not only does the jQuery for each function loop over each selected element, it also keeps track of the element index within the loop. For example: As you can see in the example, it's some very basic HTML with some very basic CSS. The jQuery is also relatively simple, I'm pretty sure you would be able to guess what is going on even if I didn't explain, but I will!

The above example is selecting all <li> elements and looping over them. It is then adding a class of 'item-' with its index value appended to it. The index begins at 0.

The $(this) keyword references each iterated element. This is where .each() becomes very useful.

I feel that's a pretty straight forward jQuery for each loop that you should be able to get the hang of pretty quickly if you're fairly familiar with jQuery.

The javascript for loop

If you're still pretty new to jQuery and you're feeling adventurous, how about throwing in a javascript for loop instead of a jQuery for each loop? 'Why' you ask? Well because it is much faster.

While you won't notice the difference on small scripts and pages, it could make a difference while looping through many items and even other loops. It's also never a bad thing to learn some javascsript when you can.

Personally I prefer doing this. It certainly isn't much more complicated than the jQuery version.

Alright, how is $.each() any different?

If you didn't already know, there is another jQuery for each function, but it's not the same as the one we've already covered. The $.each() function loops over items in an array or items in an object. I didn't run into arrays or objects until quite a while after I was comfortable with jQuery, so don't feel left out if you don't know what's going on. I suggest having a look at the jQuery fundamentals page. It covers basic javascript and helps you use jQuery to it's full potential.

Back to the point: how would we use $.each()? Without further ado, here's an example!

In this example I've used an object instead of an array, but they both work pretty much the same way. First the object obj is declared with a couple of random key and value values. It is then looped over using the jQuery function. As an example, I've appended the values to a div and also used the key as the class of each paragraph.

Conclusion

As you can see, there isn't much to jQuery or javascript for each loops! Save time and make your life more simple by making use of them!

Create Accordions with CSS3, HTML5 and jQuery

Mon, 22 Aug 2011 00:00:00 GMT

First thing is first, let me clarify what I mean by Create an Accordion with CSS3, HTML5 and jQuery. I am talking about creating 3 different accordions, one which relies heavily on CSS3, one with jQuery and one with HTML5.

If you haven't already had to create some sort of accordion by now, I'm sure you will run into it sooner or later. It's actually a very simple concept that requires very little script to create a fully functional accordion.

Accordions are typically used to toggle extra information. They help to organize and de-clutter information. You could make use of an accordion to display:

child pages in a menu
the answers to questions on a FAQ page
Wordpress makes heavy use of accordions in it's admin-area.
Your imagination is the limit

Whatever the use, it's essential to have the ability to create any kind of accordion in your web-dev-brain-toolbox.

First, we're going to create a basic accordion with jQuery, then an accordion with CSS3 and finally an accordion with HTML5. The jQuery version will have excellent browser support while the CSS3 version will have less, and finally the HTML5 version will have the least browser support.

All right, let's get started.

HTML and basic CSS

This is the basic HTML and CSS of the accordion we'll be working with:

HTML

The layout is pretty basic.

<div class="accordion">
	<h2>Aliquam tincidunt mauris eu risus</h2>
	<p>lorem ipsum dolor....</p>
	<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
	<p>lorem ipsum dolor....</h2>
	<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
	<div>
		<p>lorem ipsum dolor....</p>
		<p>lorem ipsum dolor....</p>
	</div>
</div>

The h2 will be the "button" for the accordion. The element that comes directly after that will be the element being toggled by clicking on the previous h2. Any element, meaning it could be an image, a paragraph, a div containing whatever you want. I feel that's the most efficient way of creating this type of accordion.

CSS

.accordion{border: 1px solid #ddd; border-top: none; margin: 10px 0; width: 470px;}
# accordion > a{display: block; text-decoration: none;}
# accordion > h2, .accordion > a{background-color: #fff; background-image: url(../img/gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff); border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif; height: 30px; margin: 0; padding: 0; text-indent: 10px;}
p{color: #555; font: 12px/18px 'Verdana', sans-serif; padding: 20px 10px;}

The CSS is just doing some basic styling. I've thrown in some CSS3 gradients with a fallback image because that's how I roll.

The jQuery

It's really amazing at how simple jQuery can make our lives. This is all that is required for the accordion:

$('h2.accordion').click(function(){
    $(this).next().slideToggle();
}).next().hide();

Now if that's not simple, I don't know what is.

That's it. You now have a fully functional jQuery accordion!

The CSS3 version

The CSS version has some slightly different HTML and 2 new CSS lines.

The HTML becomes

<div class="accordion">
	<a href="#accordion-1">Aliquam tincidunt mauris eu risus</a>
	<p id="accordion-1">lorem ipsum dolor....</p>
	<a href="#accordion-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
	<p id="accordion-2">lorem ipsum dolor....</h2>
	<a href="#accordion-3">Aliquam tincidunt mauris eu risus</a>
	<div id="accordion-3">
		<p>lorem ipsum dolor....</p>
		<p>lorem ipsum dolor....</p>
	</div>
</div>

There are 3 basic changes:

The <h2>s have been turned in to anchor links
The hidden contents have been given an id
The anchor links have been given an href containing the id of the following element with an appended hash

The CSS

The CSS is the same as before, but with the added lines:

a[href^="#accordion"] + *{display: none;}
# accordion :target{display: block;}

Very basically, the CSS is doing this:

Target all anchor links that have an href that begins with '#accordion' and target whatever element comes directly after that.

As for the #accordion :target line, that's saying whatever is target should just display block. Unfortunately we can't use the transition property over here since we would have to define a set height. Transition doesn't animate display or height: auto so the height can't be dynamic — or maybe I just haven't figured that out yet.

There is a con to using the CSS3 method: The anchor links cause the page to jump to the :target which is pretty annoying. There are two ways around this that I've come up with.

return false with javascript
Make sure the page height is too short to have a scrollbar - This will work, but I'm not serious about this one

The Javascript - Remove page jump

$('#accordion a').click(function(){
	return false;
});

Return false just tells the HTML not react with it's normal behaviour.

The HTML5 method

I think this is the most semantic way of doing this and it has a pretty decent fallback (Same fallback as the jQuery version). If the sliding functionality isn't 100% essential, this is a pretty cool way of doing it. Currently only webkit (Chrome and Safari) support this.

The HTML

<div id="accordion-html5" class="accordion">
	<details>
	  <summary><h2>Vestibulum auctor dapibus neque</h2></summary>
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
	</details>
	<details>
	  <summary><h2>Vestibulum auctor dapibus neque</h2></summary>
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
	</details>
</div>

The CSS

By default the browser adds a little arrow next to <summary>. I didn't want this so I've turned it off:

details summary::-webkit-details-marker{display: none;}

Conclusion

The jQuery method is definitely the most cross-browser-friendly by far, but I think the HTML5 way may because used more and more as the browsers progress. Regardless of the CSS3 methods' cross-browser issues, it doesn't really work well enough for us to use in production without the added bit of javascript so I think it's best to use one of the other two methods.

jQuery if / else statements

Tue, 26 Jul 2011 00:00:00 GMT

This article is intentionally titled and optimised to help people who are googling for the wrong phrase. This is why "jQuery if statement" appaers often.

There is no such thing as a jQuery if / else statement. Shocking, isn't it? You might be thinking something like: "There must be! In fact, I'm 99% sure there is!".

It doesn't exist. This is because jQuery is JavaScript. What you're looking for is a JavaScript if/else statement otherwise known as a JavaScript conditional statement.

Why I decided to write about jQuery if

This article exists because when I started out with jQuery, I looked everywhere for a 'jQuery if / else statement'. It blew my mind that something as important as an if statement didn't exist on the web. It took me a while to realize that I couldn't find it because I was looking in the wrong place. It was because of this ~~giant journey~~ problem I decided to write an article for anyone following a similar path.

looking for useful jQuery tutorials?

Before I go on, if you're looking for some pretty useful jQuery tutorials, have a look at

What is jQuery?

jQuery is a one of many javascript libraries. Very simply, these libraries are shortcuts created by people with crazy javascript skills for people like you and I. You could look at these libraries as one giant javascript plugin which make writing javascript 100 times more simple.

jQuery syntax is javascript, and therefore a lot of the things you do in jQuery are pretty much the same in plain ol' javascript. 'jQuery if statements' are written the same way as javascript if statements, since it IS javascript.

The basic syntax

if (condition) {
    // code to be executed if condition is true
} else {
    // code to be executed if condition is false
}

The JavaScript (jQuery) if / else statement is almost identical to the PHP if / else statement.

$a = 5;
$b = 10;

if($a > $b) {
	echo "<p>A is larger than B</p>";
}
elseif($a == $b) {
	echo "<p>A is equal to B</p>";
}
else {
	echo "<p>B is larger than A</p>";
}

And the JavaScript (jQuery) if / else version is:

var a = 5,
    b = 10;

if (a > b) {
    $("body").html("<p>A is larger than B</p>");
} else if (a == b) {
    $("body").html("<p>A is equal to B</p>");
} else {
    $("body").html("<p>B is larger than A</p>");
}

Note: The jQuery function html() is not equal to echo.

Explanation of another example if statement

HTML

<div id="example">
    <div></div>
    <div></div>
</div>

jQuery/javascript

$(document).ready(function() {
    var n = $("#example div").length;

    if (n < 2) {
        $("body").css("background", "green");
    } else {
        $("body").css("background", "orange");
    }
});

Very basically the above is saying: Count the amount of div's within the ID #example, and if it is less than 2, change the body's background colour to green, otherwise change the background colour to orange.

What do you think the outcome would be?

If you guessed orange... Then you would be right.

Javascript shorthand conditional statement

var n = $("#example div").length;
$("body").css("background", n < 2 ? "green" : "orange");

Now that is pretty handy! Creating a javascript if statement couldn't be more simple.

Conclusion

What is a 'jQuery if statement'? It is a 'JavaScript conditional statement' that happens to contain some jQuery.

Behold the CSS Lightsaber

Fri, 22 Jul 2011 00:00:00 GMT

Note: Check out the demo before reading. I've been working on CSS lightsabers lately. I remember seeing one a while back and liking the concept, however I thought it could be greatly improved. I've also been itching to create animation out of CSS transitions. By "animation" I mean one event followed by another event. Transitions can mimic full blown animation by transitioning multiple elements at the same time with different delays. This gives the effect of an element being animated. Very simply they all occur simultaneously, but the initial delay make the events appear to follow each other.

The sabers were both very carefully crafted with CSS alone. With Yoda's saber I focused on having different options. Switch on, increase power and increase length. It was a bit of a work around to get the options to work with each other since only one transition can occur on an element at any given time. This would mean that in order to keep the Saber on, decrease power and decrease length is == to power up.

I'm pretty sure people will mention that some of this could be done with the CSS keyframe animations. Yes, it can and should, however, I started this a couple of weeks back (Firefox5 was only released yesterday with support for the CSS property) and I don't really like working in Webkit.

Firefox loves lightsabers

This demo looks best in Firefox by far. Everything is rendered absolutely perfectly. In other browsers? Not so much.

Chrome

The demo doesn't work as it should in Chrome and there were two main problems with this demo. The transition can be applied to pseudo elements. I started of animating pseudo elements all over the place, but I stopped because I wanted Webkit to at least partially support the demo. Also, Webkit doesn't seem to handle transitions very well yet. Have a look yourself. Go to the demo: Click on "Higher", then on "Longer". It refuses to do the transition. It seems like Webkit has a problem when going from one transition into another. In order to get it to work you have to use a transition, clear it and then fire off another transition. In comparison to Firefox, the shadows look a bit... Hard.

Opera

Opera has a different set of issues. It animates (along with a few rendering bugs here and there) from transition to transition, however, a transition on the box-shadow property doesn't seem to take.

IE10

I haven't tested this yet. If you have IE10 and you test it, let me know what the problems were.

That's about it

This took me a fair amount of time to complete and iron out the major bugs. Let me know if you have any questions and what you think.

CSS-Plus V2

Fri, 17 Jun 2011 00:00:00 GMT

If you haven't noticed the new design, you're either new to CSS-Plus or you have hit ctrl / cmd + r in a while. I've been talking about a redesign for longer than I'd like but it's finally here, however it's not 100% complete yet. You may notice that things look a little funky here and there, but don't worry, I'm working on it! It should be complete within this week.

What's new?

In general the font is larger, the headings are larger, the website is fluid (Or will be once I'm done). My main objective was the make the the website easier to read, easier to navigate and more enjoyable to be on.

Colour palette

I've decided to go largely with the blue and pink. The colour palette consists of 5 colours: Orange, pink, light-blue, navy blue and grey. I've decided to go with a very light template compared to the previous one. I feel it's much easier to read and more enjoyable to be on a lighter website. Darker colour palettes can work, but I don't feel they really work on blogs.

The logo

After messing around with many types of logos, I noticed that the 'P' in CSS-Plus could contain a plus symbol if I were to extend it a bit. I think it looks pretty cool. Other than that, the font used was 'Cantarell'.

Where did the tags go?

The tags are still there, I've just removed all links to them. Ultimately I'm going to remove them completely because I don't really think they serve a real purpose. The analytics agreed with me.

Navigation and Sidebar

I've realized that it's been a bit tough to navigate the site easily.

The sidebar now includes most popular articles, the latest articles and my latest plugins — I plan on making a handful of very useful jQuery plugins.

Search here...

I've always had a search bar but it was barely used. Also, the results page was pretty nasty... Perhaps that's the reason it wasn't used all that much? Anyway, I've implemented the new GSE code and the results are much easier on the eye.

Article Thumbnails

I've started using the Wordpress thumbnail feature. I think it makes everything much more interesting to look at. At largest they are 180x180 images with a border, drop shadow and inner shadow. The more CSS I used, the more control I have over everything.

Pretty comments

I quite like the new comments. I've made them much more orderly, easier and more enjoyable to read.

The footer

The footer is largely the same. I've replaced the latest tweet area with my delicious links. I think they are much more useful than what I've said last on twitter.

Social

The latest additions to the social family has been the Google +1 button and a link to my Github account. Why +1? Because I think Google is absolutely awesome.

Images and javasript has been avoided

I haven't avoided images as much as possible, but I have tended towards avoiding them. They aren't necessary (Excluding fallback images) and it's fun making everything as semantic as possible. As for javascript, it's overkill for something that CSS can easily and semantically do, such as the hover effect in the footer.

Suggestions?

Let me know if you have any suggestions.

Prevent :last-child from slowing you down

Sun, 29 May 2011 00:00:00 GMT

:first-child is a CSS selector that has been around since the CSS 2.1 spec. It is extremely useful and can be used effectively in various ways.

:last-child has finally made an appearance in CSS 3. One would think that selectors such as first and last child are pretty much the same and would be implemented at the same time. This is not the case and they have pretty big performance differences.

Why isn't :last-child included within CSS2?

Jonathan Snook has an extremely informative article called Why we don't have a parent selector. It is an interesting & in depth article that covers why :last-child is is so difficult for the browser to render and the article also has examples of :first-child vs :last-child.

Simply put, :last-child only functions correctly once the entire page has loaded. The way :last-child is rendered while the page is busy loading is executed differently throughout the different browsers.

Never use :last-child

I feel that last-child is not necessary in most cases. I say most cases to cover myself but I haven't run into a situation where it's a necessity. The only times I find I need first/last-child is when I'm styling some sort of list.

A typical example would be: padding-right and/or border-right applied to a navigation's list items.

#nav li{border-right: 1px solid black; padding-right: 20px;}

The padding and border isn't ideal on the last <li> element. This is what we want: It's pretty simple to solve with :last-child

#nav li:last-child{border-right: 0; padding-right: 0;}

This, however, won't even work on LTE IE8.

Use :first-child instead

:first-child is contained within the CSS2.1 spec and therefore is supported within IE8 and has buggy support within IE7. It would be a FAR better idea to make use of this.

Swap the properties around — Instead of border/padding right, set it to border/padding left.

#nav li{border-left: 1px solid black; padding-left: 20px;}

The menu example would look something like this: You can solve this problem very easily without :last-child and have it supported by IE7(buggy) and 8.

#nav li:first-child{border-left: 0; padding-left: 0;}

It's very easy to convert your CSS into very efficient and cross browser friendly CSS — All you need to do is think about what it is you are trying to doing and imagine how else it could be achieved.

I wish it worked properly in IE7

What is the deal with IE7 and :first-child? Very basically, IE7 will see a comment as the first child. In IE7 li:first-child would not work on the following html:

<ul>
	<!-- This is a comment -->
	<li>One</li>
	<li>One</li>
	<li>One</li>
</ul>

Now that we've established that things can be done more efficiently and in a cross-browser friendly fashion without too much difficulty, would it be possible to make :first-child function properly within IE7 even if there are html comments throughout the html?

Your first thought might be:

No, it's the way IE7 renders HTML. Let's move onYour first thought

What selectors do IE7 support that are more reliable and could solve this simple problem? IE7 supports adjacent selectors. I really love adjacent selectors and I think it is very under-rated. Chris Coyier has an article which explains adjacent selectors and other selectors too.

Basically, an adjacent selector selects the element that directly follows the targeted element. For example:

p + p{background: red}

This would select any paragraph element that has a preceding paragraph element. This would mean that the first paragraph element would not be selected because it does not contain any preceding paragraph element.

Pseudo-select via Non-selection

By this I mean that you could add a left border to every list item except the first. This could create the illusion of :first-child.

li + li{border-left: 1px solid black; padding-left: 20px}

This probably isn't as efficient as :first-child, but it does add to the cross-browser compatibility and it can be of great use in many cases.

PlusAnchor jQuery Plugin

Tue, 17 May 2011 00:00:00 GMT

PlusAnchor is a jQuery plugin I've just created. At the moment it solves a simple and specific problem: Anchor links cause the browser scroll to the destination instead of merely jumping there.

How does it work?

It's very simple, all you need to do is link to the jQuery plugin and activate it by pasting this in your <head> section:

<script type="text/javascript" src="js/jquery.plusanchor.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(document).plusAnchor();
});
</script>

That's it

It's a set and forget type of plugin. I've got a bunch of extra functionality I'm thinking of building in, but nothing worth talking about yet. If you have any suggestions, comments or if you find any problems let me know.

Download

IE and rounded corners

Mon, 16 May 2011 00:00:00 GMT

Note: The original post was published March 19 2010. The original article's CSS3 emulator of choice was CurvyCorners

When someone uses the words "rounded corners" and "IE" in the same paragraph, rest assured a puppy has died somewhere.

There are a few ways to achieve rounded corners in IE, unfortunately none of them are pain free. I usually like to use rounded corners as progressive enhancement, so IE8 and lower just have to deal with square corners. Luckily, IE9 has been released and it supports the border-radius CSS property. IE10 is already on the way and it should be released sometime at the end of this year. Go Microsoft.

There are two methods I would use to round lteIE8 corners.

CSS3 PIE

CSS3 PIE stands for CSS3 Progressive Internet Explorer. It aims to emulate CSS3 properties such as border-radius, box-shadow, etc. within IE6, 7 and 8. It's currently at version 1.0 beta 4.

The Pro's

Very simple once you get it working
It rounds corners nicely, unlike other CSS3 emulators
Extremely flexible - The border-radius, background and border properties can be changed at will and the corners will round perfectly

The Con's

I always seem to run into problems while trying to get it to work
There are random inconsistencies which annoy me - They are too weird to even explain properly, but I'll give it a try: The corners would only round if I target two different elements. If one was removed, the corners would be square for the other - This has only happened to me once. It's this kind of "illogical" inconsistency which frustrates me.
Rounded objects have to have the position: relative property and value attached to it
I don't know what it's doing in the background

CSS3 PIE Conclusion

You can count on CSS3 PIE to round something big and singular like the sidebar, but don't expect it to round something like 100's of little buttons. I always feel a tiny bit upset when I think of CSS3 PIE and I know there will be a bit of wrestling to get it to work, but it's definitely the best CSS3 emulating plugin out there. They are working on it constantly so my list of cons can only decrease.

CSS3 PIE Implementation Instructions

Make sure you read the instructions very well.

My Rock Solid Method

I use this method as a last resort. This means, the client is complaining about the square corners in IE and CSS3 PIE has failed me.

This method is pretty rock solid. Very basically I place little images in each corner to give the container the effect of rounded corners. In my opinion this is the best of the old methods and you can use technologies such as javascript to make it relatively painless. I've always found this method to be pretty limiting since the rounded corner images only "work" on containers of the same colour. While daydreaming one day, I realized I could invert the way I do this. By 'this' I mean create a transparent .png that 'contains' the outside of the element. Let me show you what I mean. This is the what a general image could look like this:As you can see, that would limit you to a red background. Very specific. Imagine the same thing, but without the red. It would create the exact same effect, but it would work on a background of any colour:The only downside with this is you have to make use of a transparent .png file, so a pngfix has to be used for IE6. (I've stopped supporting IE6, so this doesn't effect me).

The Pro's

Pretty rock solid
Easy to fix problems since it's easy to understand exactly what is going on
Images are only loaded for IE6, 7 and 8

The Con's

Not very flexible - New images must be created for different border-radii and to incorporate borders.
Requires the .png fix plugin for IE6
Uses images
Relies on javascript
Rounded objects have to have the position: relative property and value attached to it
New image required for different sized border-radius

Rock Solid Method Conclusion

Images are used with this method, therefore it becomes pretty limiting. It is, however, very reliable which can end up saving you time and a lot of potential headaches.

Rock Solid Method Implementation Instructions

The two most notable things my RSM requires is javascript and a sprite.

Firstly let's create the sprite.Wow, that was quick! Wasn't it?

Next up is the HTML

<div class="rounded">
	<div class="tl"></div>
	<div class="tr"></div>
	<div class="bl"></div>
	<div class="br"></div>
</div>

The CSS

.rounded{position: relative; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }
.tl, .tr, .bl, .br{background-color: transparent; background-image: url(images/rounded-sprite.png); background-repeat: no-repeat; position: absolute;}
.tl, .tr{top: 0;}
.bl, .br{bottom: 0;}
.tl, .bl{left: 0;}
.tr, .br{right: 0;}
.tl{background-position: 0 0;}
.tr{background-position: -10px 0;}
.bl{background-position: 0 -10px;}
.br{background-position: -10px -10px;}

And lastly, the jQuery/Javascript

<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.rounded').prepend('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>');
});
</script>
<![endif]-->

The javascript automates this process to a certain extent. It will only load in IE browsers less than IE9 due to the HTML conditional statement. This javascript will pick up any class of .rounded and prepend the HTML for us. Unfortunately, we are still limited to the border-radius size and corner colour.

And that's it! I haven't used this with more than one border-radius size or background color, but you can just add classes for that, for example: .rounded-10px-orange{}

Good luck ;)

May is Maintenance Month 2011

Tue, 03 May 2011 00:00:00 GMT

Last year Chris Coyier posted an article titled "May is Maintenance Month". Chris' idea was to rewrite older articles to keep the resource (his website) up to date. I didn't join him in doing so last year — mostly because css-plus was still very new at that point. This year, however, I am supporting the fight against old/outdated articles. I'll mention that the article was rewritten and also refer to the original date.

Create a lightbox with CSS3

Wed, 23 Feb 2011 00:00:00 GMT

The days of using javascript lightboxes are over!

Just kidding,javascript lightboxes remain a much more efficient and cross-browser friendly way of doing achieving the lightbox effect. This CSS3 lightbox tutorial is for demonstration purposes only. I'm doing this because it's interesting to see how far you can push CSS and you end up learning quite a lot. I do at least.

The HTML

The HTML isn't very semantic at all.

<div id="page-wrap">
    <div id="lightbox">
        <div id="img1">
            <img src="images/beatles.gif" width="920" alt="" />
            <a class="close" href="#"></a>
        </div>
        <div id="img2">
            <img src="images/brand-new.jpg" width="520" alt="" />
            <a class="close" href="#"></a>
        </div>
        <div id="img3">
            <img src="images/the-killers.jpg" width="920" alt="" />
            <a class="close" href="#"></a>
        </div>
    </div>
    <ul id="gallery">
        <li>
            <a class="clearfix" href="#img1">
                <img src="images/beatles.gif" alt="The Beatles" width="200" />
                <span>The Beatles</span>
            </a>
        </li>
        <li>
            <a class="clearfix" href="#img2">
                <img src="images/brand-new.jpg" alt="Brand New" width="200" />
                <span>Brand New</span>
            </a>
        </li>
        <li>
            <a class="clearfix" href="#img3">
                <img src="images/the-killers.jpg" alt="The Killers" width="200" />
                <span>The Killers</span>
            </a>
        </li>
    </ul>
</div>

As you can see, there is quite a lot of markup, some of it even looks — and is — unnecessary, such as <a class="close" href="#"></a> which appears as many times as there are lightbox images. There are obviously no "for each", "append" or "prepend" functions in HTML or CSS so all of this is done manually. Each gallery image-thumbnail has a corresponding lightbox image. Each lightbox image contains a close button. I've also set a width to the gallery images, this forces a width but allows for a dynamic height while keeping the image in proportion.

The <span> elements are going to be used as a caption.

The CSS

#page-wrap {
    margin: 0 auto;
    position: relative;
    width: 980px;
}
#gallery {
    display: table;
    margin: 0 auto;
}
#gallery li {
    float: left;
    margin: 10px 20px 0 0;
    position: relative;
}
#gallery span {
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    padding: 10% 0;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    -moz-transition: opacity 0.6s ease-in;
    -o-transition: opacity 0.6s ease-in;
    -webkit-transition: opacity 0.6s ease-in;
}
#gallery li:hover span {
    opacity: 1;
}
#gallery a {
    border: 5px solid rgba(0, 0, 0, 0.1);
    display: block;
    position: relative;
    -moz-transition: border 0.6s ease-out;
    -webkit-transition: border 0.6s ease-out;
    transition: border 0.6s ease-out;
}
#gallery a:hover {
    border: 5px solid rgba(39, 25, 0, 1);
    border: 5px solid rgba(0, 0, 0, 0.5);
}
#gallery a:focus {
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
#gallery img {
    float: left;
}
#lightbox div {
    background: #fff;
    border: 30px solid #fff;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 6%;
    z-index: 0;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#lightbox div:target {
    opacity: 1;
    z-index: 10;
}
#lightbox img {
    float: left;
    border-radius: 3px;
}
#lightbox #img2 {
    left: 15%;
}
#lightbox a {
    background: url(../images/close.png) no-repeat left top;
    height: 28px;
    width: 30px;
    position: absolute;
    top: -42px;
    right: -42px;
}

Al right, time to break this thing down. #gallery {display: table; margin: 0 auto} - This centres something that has a dynamic width. Yes that's right folks, if you add another item it will still be centred. Very awesome, simple and handy.

I've set the transition property on #lightbox div to 'all'. Why not just do this for opacity? Because the z-index also needs to be animated. If transition isn't applied to z-index, it fades away after immediately falling beneath a couple of elements. I had no idea you could apply a transition to z-index before this. After tinkering for a while I finally gave it a try and it works perfectly in Firefox 4 and Webkit.

What is `:target`

The pseudo class that is responsible for this whole experiment is `:target. Target is quite a simple concept, and it can really broaden your ideas as to what CSS can actually do.

Let's say you have a url: [http://css-plus.com/] Whatever CSS properties you apply to:

#footer:target {
    /* Apply properties here */
}

Will affect #footer when the url changes to this: [http://css-plus.com/#footer]

Therefore, when you click the "back" button on your browser after clicking around for a while in the demo

How does this work in almost-plain-English?

You click an anchor link with a hash value equal to that of an ID. Once this happens, the :target pseudo-class kicks in and the properties it contains take effect. The transition property on the ID then takes effect

The close button isn't really a "close" button. It's an anchor link that contains a different hash value to the value in the in the URL. Once this "close" button is clicked, the previously :targeted id is not targeted any more. Therefore it loses the z-index and opacity properties that were applied to it. Once this happens the transition property takes affect again and this creates the "fade out" effect.

Problems I ran into

I wasn't able to recreate the transparent black overlay that normally accompanies a lightbox. - I'm sure there is a way of doing this, I just haven't figured it out yet. If you know of a way let me know and I'll update this.

Conclusion

This was a fun experiment which shows you that there are many things that can be done with CSS.

Fancy testimonials page with CSS3

Thu, 03 Feb 2011 00:00:00 GMT

All too often images are given borders, drop-shadows, rotated slightly, etc via photoshop or some image editing program. This is not only undesirable since CSS should be taking care of the layout, but it is very restricting. A single change in the image would force you to change all the images individually. CSS cascade, which is what makes them so awesome.

I've been avoiding things like CSS3 gradients, transitions but most of all selectors. I use CSS3 as progressive enhancement and I feel selectors cross over from progressive enhancement to complete layout alterations. This obviously isn't the case if the selectors are used in the right way.

What is "the right way?"

I'm very glad you asked. Simply put, "the right way" degrades gracefully. An IE6 user shouldn't notice that they are missing out on anything. It looks right for every user regardless of the browser. I think designers probably have the biggest problem with this concept, "IT MUST LIEK LOOK THE SAME EVERYWHERE LOLZ". Yes, this example-designer is a troll who types in caps. More to the point, designs look different via different mediums, everything plays a role. A piece of paper is always the same resolution, font-size, font-family etc. A webpage can be viewed VERY differently on different computers/browsers. Differences can include font-size, browser width/height, possible font-type and even language.

Have you ever seen that "Translate" link next to a Google search result? This causes words become different lengths & wraps these words in <span> tags. This can have a major impact on your websites and it's important to take note of this if you are targeting foreign traffic. I didn't take this into account when I developed the current CSS-Plus theme.

There are many things that one needs to take into account, not just lte IE 7. Keep this in mind when developing anything.

The HTML

The whole point of doing this was to keep the HTML as clean and standardized as possible.

&lt;ul id="testimonials"&gt;
	&lt;li&gt;
		&lt;img src="images/image1.jpg" alt="" /&gt;
		&lt;h2&gt;Jeffrey Rose&lt;/h2&gt;
		&lt;div&gt;
			&lt;p&gt;
				Lorem ipsum...
			&lt;/p&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;img src="images/image2.jpg" alt="" /&gt;
		&lt;h2&gt;Fred Tigerlily&lt;/h2&gt;
		&lt;div&gt;
			&lt;p&gt;
				Lorem ipsum...
			&lt;/p&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;img src="images/image3.jpg" alt="" /&gt;
		&lt;h2&gt;Craig Dandelion&lt;/h2&gt;
		&lt;div&gt;
			&lt;p&gt;
				Lorem ipsum...
			&lt;/p&gt;
		&lt;/div&gt;
	&lt;/li&gt;
	&lt;li&gt;
		&lt;img src="images/image4.jpg" alt="" /&gt;
		&lt;h2&gt;Jordan Lilly&lt;/h2&gt;
		&lt;div&gt;
			&lt;p&gt;
				Lorem ipsum...
			&lt;/p&gt;
		&lt;/div&gt;
	&lt;/li&gt;
&lt;/ul&gt;

Let me explain the HTML. Each testimonial is contained within a separate list item. Each list item includes an image, an h2, a div, and paragraph tags within the div. I think everything is quite straight forward except the rogue div. It seems a bit unnecessary doesn't it? Well, one of the coolest CSS tricks I know is to have 2 perfect columns while only setting the width of 1 column. To do this you float each columns left and right, and set the dynamic columns overflow to hidden. This will force text to stay in the column instead of wrapping around objects. This will be clear when you see the example.

The CSS

I'd never used this much CSS3 features on a production site before this.

#testimonials{
	width: 500px;
	margin: 0 auto;
}
#testimonials h2 {
	color:#ccc;
	font:26px Georgia, serif;
	text-shadow:-1px -1px 0 rgba(255,255,255,0.25);
}
#testimonials li {
	border-top:3px solid rgba(0,0,0,0.2);
	clear:both;
	padding:40px 0;
}
#testimonials li img {
	border:5px solid transparent;
	float:left;
	-moz-box-shadow:0 0 10px #333;
	-webkit-box-shadow:0 0 10px #333;
	box-shadow:0 0 10px #333;
	-moz-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-webkit-transform:rotate(-5deg);
	transform:rotate(-5deg);
	margin:0 20px 0 0;
}
#testimonials li:nth-child(2n) img {
	float:right;
	-moz-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-webkit-transform:rotate(5deg);
	transform:rotate(5deg);
	margin:0 0 0 20px;
}
#testimonials p {
	padding:0 0 20px;
}
#testimonials li:first-child {
	border:none;
}
#testimonials div {
	overflow:hidden;
}

Take note of the following CSS features:

overflow: hidden

This is applied to the dynamic column I was referring to earlier.

rgba()

This is very awesome and can be used in many areas to get cool effects

nth-child(2n)

This is the life saver. We should all take a moment of silence to thank the nth-child inventor...

If we had created images that included the all off these effects (drop shadow, rotate, border, etc) and we wanted to remove the second testimonial, it would mess everything up. It would be

Image align left -Missing- Image align left Image align right

look at that! We would have to either have to replace the deleted testimonial with another one or manually go and change each image, and change the floats accordingly. Nth-child is a lifesaver.

Compatibility

Again, I think it degrades very well, however you could add support for a few of those CSS3 features to IE6,7 and 8 with CSS3 PIE and selectivizr. CSS3 PIE adds support for a few CSS3 properties, such as box-shadow and Selectivizr adds support for CSS3 selectors - Which is really awesome. These libraries work well together (selectivizr requires jQuery or some other big javascript library such as MooTools) and are very easy to implement, just paste the following code in the header.

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/selectivizr.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/PIE.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
	#testimonials li img{behavior: url(js/PIE.htc);}
&lt;/style&gt;

Note 1: Make sure the file paths are correct. Note 2: Selectivizr doesn't work without apache running. So make sure you're running it through localhost or on the web. I spent two hours learning this the hard way. Note 3: CSS3 pie is very finicky. One tiny change can stop it from working (at least in my experience). I also attached the PIE.htc via an internal stylesheet because I usually get problems otherwise.

Conclusion

Start using this as soon as possible. Aesthetically pleasing, easy to maintain and graceful degradation.

PlusSlider 1.0

Mon, 10 Jan 2011 00:00:00 GMT

I've been working on PlusSlider and I've finally finished Version 1 as promised.

The two features I'm most proud of:

The ability to swap between fading & sliding seamlessly
Extremely easy to use

Compatibility

I've tested PlusSlider 1.0 on IE7+, Chrome 8, Firefox 3.6, Safari 5, Opera 10.63 and it works perfectly.

If you find any problems or would like new features, let me know and I'll work on it.

Demo

Download

See you in early January

Thu, 23 Dec 2010 00:00:00 GMT

I think the title says it all, I'm taking a short and much needed break, but first a quick recap...

This year (2010)

For me, this year has been eventful to say the least. I've learnt so much in many different areas. I've launched CSS-Plus, which has taught me and given me a lot, and I started working for a company called ClayAnt Creative.

Next year (2011)

I think next is full of awesome things to come. I'm going to release PlusSlider Version 1 in early January. The new CSS-Plus theme should be done in early 2011. I've also got a few useful jQuery plugins in the pipelines which will make my life, and hopefully yours too, easier.

Have a merry Christmas

And a very decent new years eve.

P.S. You can still catch my one liners on twitter.

How to Create a Fancy CSS3 Menu

Thu, 09 Dec 2010 00:00:00 GMT

It's good to know and keep up with the latest CSS tricks, especially with all the latest browsers on the verge of coming out.

In this tutorial, I'm going to create a navigation menu that relies heavily on CSS3. The purpose for this is to learn about CSS3 Properties you might not have already known, see them in use and perhaps get you to dream about the things developers will be able to do without relying on other technologies such as javascript.

If you're not sure how to create a standard navigation menu, have a look at these tutorials.

CSS3 Properties to keep your eyes on

Gradients
Border-Radius
Text-Shadow
Transition

The Standard HTML

&lt;ul id="menu"&gt;
	&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
	&lt;li class="freebies"&gt;
		&lt;a href="#"&gt;Freebies&lt;/a&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="#"&gt;Accordions&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Menus&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Sliders&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Zoomers&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li class="tutorials"&gt;
		&lt;a href="#"&gt;Tutorials&lt;/a&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="#"&gt;Javascript&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

The CSS

#menu{
	/* fallback color */
		background-color: #f1f1f1; 
		
	/* Gradient support for IE9 and Opera */
		background-image: url(../images/svg-gradient.svg); 
		
	/* Mozilla Gradient Support */
		background-image: -moz-linear-gradient(100% 100% 90deg, 
			#ccc, #f1f1f1);
							
	/* Webkit Gradient Support */
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
			from(#f1f1f1), to(#ccc));
							
	/* Rounded Corners */
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-radius: 10px;
		
	/* Box Shadow */
		-moz-box-shadow: 0 0 5px #5C5C5C; 
		-webkit-box-shadow: 0 0 5px #5C5C5C; 
		box-shadow: 0 0 5px #5C5C5C; 
		
	height: 30px; 
	font: 18px Georgia, serif; 
	margin: 0 auto; 
	width: 640px; 
}
#menu li{
	float: left; 
	padding: 0 23px; 
	position: relative; 
	line-height: 30px;
}

#menu &gt; li ul{
height: 0;
overflow: hidden;
position: absolute;
left: 0;
top: 30px;

    -moz-transition-property: height;
    -moz-transition-duration: 0.2s;
    -moz-transition-timing-function: linear, ease-in;

    -webkit-transition-property: height;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear, ease-in;

    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: linear, ease-in;

}

#menu &gt; li &gt; ul{background: #cdcdcd;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#menu li li{
margin: 4px 0;
font: 14px Arial, Helvetica, Verdana, san-serif;
text-shadow: none;
}
#menu &gt; li.freebies:hover ul{
height: 100px;
}
#menu &gt; li.tutorials:hover ul{
height: 75px;
}

#menu a{
color: #333;
padding: 1px 10px;
text-shadow: 1px 1px 2px #999;
}
#menu a:hover{
background: #d6d6d6;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The Transition property

transition-property: height; 
transition-duration: 0.2s; 
transition-timing-function: linear, ease-in;</code></pre>

transition-property: height – The property transition should affect transition-duration: 0.2s; – The durtion; transition-timing-function: linear, ease-in; – This is

What's up with the .svg file?

This is used to achieve a scalable vector within IE9 and Opera.

Yes, I know it is possible to create a CSS gradient within IE without the help of weird file-type, but I've stuck to the .svg file as this is future proofs the menu. Visit CSS3 Wizardry to find out more about this.

These gradients are confusing!

If you're still finding the gradients a bit overwhelming, have a look at Chris Coyier's article: Speed up with CSS3 gradients

What are the downsides to using this?

There are two major ones I can see.

Browser Compatiblity

It does not work in IE6, it's a bit funky in IE7 and it works in IE8, but without all the CSS3 which makes it look a bit bland.

Luckily if a browser doesn't support the transition property it will still work and look good, except for the sliding hover effect.

Dynamic Menus

You might have noticed that I've given both sub menus a fixed width. This means that if I add another item, it won't dynamically grow. I've been trying to find a work around for this (without javascript) but I haven't found a solution as of yet. If you manage to find one, let me know and I'll add it.

Conclusion

It wasn't too long ago when I wouldn't even consider using border radius, and now I would most probably add a few CSS3 transitions here-and-there for the 'cool kids' who have the latest browsers. As you would have noticed, throughout this article I've linked to a few articles that go into more depth about the these properties.

I hope you've learnt something from this brief tutorial.

Create a scrolling anchor link with jQuery

Tue, 30 Nov 2010 00:00:00 GMT

I've been meaning to do this tutorial for a while now and it seems as if I'm finally getting around to it!

Very simply put, this will function like a normal internal anchor link or named anchor link, but will scroll to the specified destination instead of merely jumping there. It's a really easy-to-implement and awesome thing to add to almost any website.

I'm going to jump right into it.

The HTML

All that is needed for this example is an element to click, and an element to scroll to.

<a id="scroll">Click here to scroll</a>
<img src="images/cat.png" alt="cat" />

I've decided to scroll to an image of a random cat, however I think this would be most useful for something like a table of contents.

The jQuery/Javascript

We will be using the click() event, animate effect, scrollTop() manipulation and offset manipulation.

// When the Document Object Model is ready
jQuery(document).ready(function(){
	// 'catTopPosition' is the amount of pixels #cat
	// is from the top of the document
	var catTopPosition = jQuery('#cat').offset().top;
// When #scroll is clicked
jQuery('#scroll').click(function(){
	// Scroll down to 'catTopPosition'
	jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
	// Stop the link from acting like a normal anchor link
	return false;
});
});

Fairly simple and straight forward jQuery. Note: jQuery('html, body') is necessary for cross-browser compatibility.

PlusSlider Beta

Thu, 18 Nov 2010 00:00:00 GMT

I've been creating and working with sliders a lot lately and there have been a few things that have bugged me about them, the main ones are:

Image-only sliders
Sliders (Carousels) fade, but don't slide or vice-versa
Invalid and complicated markup

I know there are way too many content/image sliders out there, but—Ironically—I haven't managed to find one that can fade and slide. You might be thinking to yourself: This can't fade and slide either. You are 100% correct. However, this is the Beta release. I am releasing a Beta so that I can receive feedback and work on useful things I may have overlooked, while implementing the 'slide' functionality.

So, feel free to give feedback!

How to horizontally centre anything with CSS

Tue, 09 Nov 2010 00:00:00 GMT

There two kinds of display elements we work with most of the time, and they are inline-level elements and block-level elements. By default, elements such as <span> and <a> are examples of inline elements whereas <h1>, <h2>, <p> and <div> are examples of block elements. These elements are not forced to stay inline or block. The browser applies basic styling to elements and it is this that gives the elements their seemingly engrained properties.

Just like the browser styles these elements, we can style them too and over-ride the browsers styling.

It's important to understand the difference between inline-level elements and block-level elements, because different methods are used to centre these different level elements.

Centring text, single and multiple inline-level element

These are definitely the most straight-forward thing to centre with CSS.

The HTML

<div class="center">
	This is some text that will be centred
</div>
<div class="center">
	This is some text as well as a <span>few</span> <span>inline-level elements</span>.
</div>

The CSS

.center{text-align: center;}

All of the text will be centre aligned. You can have a look at the demo.

Centring a block-level element

This is slightly more confusing than text-align: center.

In order to centre a block-level element, the element must have a fixed width and the left and right margin must be set to auto.

The HTML

<div class="block">Example Block<div>

The CSS

.block{margin: 0 auto; width: 100px;}

This will centre the 100px wide block.

That's it for the single block-level element. Not too confusing, but definitely more complicated than the text-align: center.

Centring multiple block-level elements

This isn't much trickier than centring a single block-level element.

We will need to wrap the elements we want to centre in a container block-level element and centre the container/parent. Technically, we still centring a single block-level element.

The HTML

<div class="container">
	<div class="block">
	<div class="block">
	<div class="block">
</div>

The CSS

.container{margin: 0 auto; width: 360px;}
.block{background: #333; float: left; height: 100px; margin: 0 10px; width: 100px;}

As you can see, all 3 .blocks fit perfectly in the container. The outer-width (width, margin and padding) of each block is 120px. 120px * 3 = 360px

That's awesome, we have successfully centred multiple block-level elements. That's it... Right?

Nope, there is still more.

How do I centre a dynamic amount of block level elements?

This is a tricky question, at least if you don't know the solution.

What if a user has CMS control and adds another .block to that container div? Answer: The block will appear below the first block because the container has a set width of 360px.

We could fix that by adding another 120px to the container's width, but there will probably still be future problems if the amount of .blocks change.

2 solutions

The one solution is so simple it's almost funny: Remove the width of the container and change the display to 'table'. For example:

.container{display: table; margin: 0 auto;}

Magic!, all solved. Now we can upload and implement, right?

Almost, but we have a problem... or two: IE6 and IE7. Those two browser don't support CSS 2.1 properly, and display: table is one of the properties they don't support.

If you insist on getting it to work within IE6 and 7, here is a jQuery solution.

The jQuery

I was faced with this problem before and I used jQuery to calculate the total width of the container's children, and set that as the container's width, therefore, if set to margin: 0 auto, it would always be centred. The only downside to this is each child-element has to have the the same width and margin.

jQuery(document).ready(function($){
	var	totalWidth = $('.container').outerWidth(),
		totalChildren = $('.container').children().size(),
		containerWidth = totalWidth * totalChildren;
$('.container').width(containerWidth);
});

And that's it.

Hopefully this article solves some of your problems.

4 Useful jQuery selectors

Thu, 28 Oct 2010 00:00:00 GMT

I've created quite a few jQuery components before, and I continue to do so every day. This forces me to find best practices and short-cuts to cut down development time, keep things simple and cross browser compatible. This article is going to be about a bunch of jQuery selectors that I find useful and use on a daily basis because, they simply work well for me.

One of my favourite things about CSS are the selectors. I get an extremely warm and tingly feeling when I can make an amazing website with a very small and compact CSS file. Using the correct selector when it is appropriate can cut your CSS file size in half.

At the moment, we can't use CSS3 selectors or properties guilt free yet (For obvious reasons). This is where jQuery selectors come in and save the day.

Not only does jQuery allow you to use most CSS3 selectors, but there are a bunch of extra very awesome and unique jQuery selectors.

:animated

:animated selects all elements that are currently being animated. This might not sound too useful, but it really is.

I use it almost every time I use an animation on hover with jQuery. Consider the following:

$('#nav li a').hover(function(){
	$(this).fadeTo(300, 1);
}, function(){
	$(this).fadeTo(300, 0.5);
});

On hover, that will cause each #nav li a to fade in completely on hover, and fade to 50% opacity on mouse-exit. If you quickly hover your mouse - on and off, on and off - multiple times, it will cause the animations to queue up. This is almost never an ideal situation. We want the animation to run once, something must be done about it!

Chris Coyier has an interesting article about this and as he mentions, Ralf Stoltze seems to have the best solution.

The quick solution I generally use is as follows:

$('#nav li a').hover(function(){
	// If this is not animated
	if(!$(this).is(':animated')){
		$(this).fadeTo(300, 1);
	}
}, function(){
	$(this).fadeTo(300, 0.5);
});

I find :animated most useful when it comes to excluding animated elements.

:contains

This selector selects an element that contains specific text.

I've used this selector quite a few times in very similar situations. I generally use it to select specific <li>s in a navigation menu. This is normally useful when there is limited HTML control, such as within certain CMSs.

Wordpress 3 has a new feature which allows users to add items to the navigation menu and easily move them around, this is a prefect situation for this jQuery selector.

Consider the html:

<ul>
	<li><a href="index.php">Home</a></li>
	<li><a href="about.php">About</a></li>
	<li><a href="contact.php">Contact</a></li>
</ul>

Let's say we want to add a class of .contact to the <li> that contains the text 'Contact' in order to add a custom background. We could use CSS3 but that isn't supported in IE6-8. We could select the third item in the list or the last item using jQuery. This would work perfectly, but if the user changes the position of the list items, the wrong item will have the class of contact.

I've found that the easiest way to deal with this is to use the jQuery selector :contains. All we need to is:

$('ul li:contains("Contact")').addClass('contact');

This will select Contact no matter where it is situated.

Note: This will select anything containing contact, even 'Mr Contact' or 'Contact Me'.

:visible / :hidden

These jQuery selectors, are opposite, yet very similar. :visible selects all visible elements and :hidden selects all hidden elements.

I've found myself selecting elements that are not visible instead of looking for elements that are hidden.

$('li').not(':visible')
!$('li:visible')
$('li:hidden')

Each of those do the same thing, but as you can see, the third example is the most simple and semantic.

I use :visible very often. It is extremely easy, efficient and useful when creating an image viewer or something that only has one visible element at a time.

:has()

Lastly we have the :has jQuery selector. I find it extremely useful when fixing up other people's work for some reason.

Borders are often used to style links in place of text-decoration: underline. Often it looks slightly more stylish. I'm currently using this border-method on css-plus.com. Unfortunately, this is a pretty common problem:

a{border-bottom: 2px solid #000;}
a:hover{border-bottom: 2px solid #000;}

<a href="#">Link</a>
<a href="#"><img src="images/image.jpg" alt="" /></a>

This method creates a border underneath the image because it is wrapped within an anchor link. :has can be used to solve this problem.

$('a:has("img")').addClass('image-link');

a.image-link{border: none;}
a.image-link:hover{border: none;}

:has is extremely useful, but since it requires javascript, I wouldn't base a websites styling on too much jquery :has. Unfortunately, this will probably never be supported within CSS. Jonathan Snook has written a very interesting article regarding this topic.

Conclusion

jQuery offers some very awesome selectors, some of which might be available via CSS one day. However, as much as I feel like I am free to use them within a javascript component, I feel I am prevented from using them to help me create a layout because there are still people who have javascript disabled - for whatever reason - and the website should still look presentable without javascript.

Solid mobile HTML development

Mon, 11 Oct 2010 00:00:00 GMT

Before I even get started, the word "Solid" in the title implies that the HTML should work on pretty much all mobile phones. So no fancy smart-phone tricks, just a few good old wholesome HTML and CSS tips.

Use an internal-stylesheet

This is very important. Some mobile browsers' don't support external-stylesheets. So if you have created the mobile site with one stylesheet (Like I would), just remember to migrate the stylesheet onto each page as an internal-stylesheet. I find it easiest to open all the pages and do a find/replace throughout open documents. This saves a lot of copying/pasting work. If you're using windows and your editor doesn't support the 'find/replace throughout open documents' option, have a look at Notepad++. Dreamweaver also has this option.

Mobile Doctype and Charset

First of all, mobile devices have their own DOCTYPE.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

You can declare the charset by either adding the following before the DOCTYPE:

<?xml version="1.0" encoding="UTF-8"?>

Or by adding the following within the <head> section:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Mobile devices are smarter than you think

I feel that developing for older mobile devices lies somewhere between developing for email-clients and relatively advanced browsers. For example: The child and attribute selectors are well supported, however the position property should be avoided.

Here is an extremely useful website regarding mobile css properties and selector support.

Fluid width - `140px` to `320px`

There are different sized mobile screens, just like there are different sized monitors. Design and develop for a minimum width of about 140px. This is very tiny, but there are very old mobile screens that are actually this small and we should do everything we can to avoid users from having to scroll horizontally.

I generally wrap everything within a #page-wrap div with a max-width limit to achieve this. The CSS would look something like this:

#page-wrap {
    margin: 0 auto;
    max-width: 320px;
}

Pixels are your enemy

Pixels should be avoided as much as possible. You might be wondering to yourself: 'What exactly does he mean?'. Well, everything should be as fluid as possible since the device's display will vary in resolution.

Alternatively, if something is given a fixed width, it should not exceed the 'minimum' width. (In this case, it's 140px)

Get your logo to remain constant

The only way to keep things fair and constant, is to work with ratio. I believe that applies to everything in life, including mobile devices.

The following is an example of how logos could be displayed by mobile devices. This is achieved by setting the width of the <img> element to 100% within the CSS.

#logo {
    width: 100%;
}

This will grow and shrink proportionally as required thanks to the #page-wrap div.

Font-size

Set the body's font size to small medium or large and work with font-size percentages for the other elements. For example:

body {
    font-size: medium;
}
h1 {
    font-size: 80%;
}
h2 {
    font-size: 70%;
}
p {
    font-size: 60%;
}

Clearing floats

.clear {
    clear: both;
}

<br class="clear" /> and <div class="clear"></div> is well supported, so use it as often as you would like. It's helped me get out of a few sticky situations, especially when developing forms.

Relax when designing/styling

Keep in mind that there are elements that certain mobile devices won't allow you to style. For example:

Form elements, such as <input />.
The :hover pseudo class.
And sometimes even the <a> links.

Things to remember

Remember to add some form of CSS reset.

/* Hard reset */
* {
    margin: 0;
    padding: 0;
}

I hope you've taken something useful from this article. If you have any questions or comments, feel free to leave a comment below.

The Best of CSS-Plus

Thu, 30 Sep 2010 00:00:00 GMT

What is 'The Best of CSS-Plus'? It's the beginning of a possible series about some of my CSS tips and tricks.

I wouldn't say I have many CSS tricks, but I do have a few practical cross-browser-compatible CSS methods I like to make use of.

I find cross-browser compatibility CSS tips, by far, the most useful of all. What use is CSS when it's going to force you to create an extra (IE specific) stylesheet?

The fight against padding

HTML emails have slightly changed the way I develop websites. It's made me very wary of padding, because it's not well supported across all email clients. I try to avoid the 'padding' property when possible... You may be thinking: 'Why? Browser's aren't email clients and padding is well supported'. Well, Because the IE box model is different to the W3C box model. So yes, padding is well supported by basically all popular browsers, but the W3C box model isn't, therefore, padding - As it should work - isn't supported by all browsers. The doctype does solve a lot of cross browser issues, however, I like to make my sites as rock-solid as possible.

This is not to say I don't use padding - I use it all the time. I try to avoid it where I can though. This is generally while I'm styling navigation menus, <h1> tags, <h2> tags, etc. Also, I try to substitute the 'margin' property for 'padding' when possible.

text-indent VS padding

Text indent isn't used very often, but it's extremely well supported. It's even supported by almost every email client!

I tend to think that using 'text-indent' is a no-brainer when it comes to certain situations, such as the examples below.

I would, however, use left and right padding for a navigation menu like this:

Not only is it beneficial to use text-indent for padding to solve browser problems, but it can actually simplify your life a whole lot more...

If you have a set width of 200px and then add a 20px left padding, the total element size would be 220px. It's possible to solve this problem by changing the width to 180px, but I find this very annoying as the width has to be changed every time the padding is changed. Text-indent solves this absolutely wonderfully.

line-height VS padding

Line-height is simple way to centre a word or a line of text such as a heading. You can also be sure that it will display perfectly consistent across all browsers.

overflow: hidden

This is one of my favourite properties. How often do you have an image floated to the left or right with text wrapping around it? Here is an example:

There are many cases where this is not the desired effect. How do we fix this? Are extra divs necessary? Are properties such as 'width' required?

No.

All you need to do is to add 'overflow: hidden;' to the <p> element. - p {overflow: hidden;}

How ridiculously simple was that?

The Conclusion

It's absolutely OK to use padding and ignore everything I've been ranting on about. I've just found my methods work for me and I've decided to share some of them.

Create a simple jQuery looped timer

Tue, 07 Sep 2010 00:00:00 GMT

Timers are useful things to have in your javascript toolbox of tricks. Common examples of looped timers are carousel plugins. These normally have a couple of options, and often one of them is to have the carousel window change every --insert amount of seconds here-- seconds. This is basically what we're going to go through during this tutorial.

This timer isn't going to be doing anything crazy, it's merely going to rotate between <p> tags every second. The rest is up to you and your imagination.

I'm going to keep this tutorial as simple as possible with regards to the HTML and CSS. This is the kind of thing I'm going to include within the Snippets section once it goes live.

The HTML

<div id="example">
    <p>A</p>
    <p>different</p>
    <p>word</p>
    <p>appears</p>
    <p>every</p>
    <p>one</p>
    <p>second!</p>
</div>

As you can see, this is absolute basic markup, nothing much to explain here.

The CSS

#example {
    background: white;
    border: 2px solid #333;
    display: block;
    margin: 0 auto;
    padding: 10px;
    width: 100px;
}
#example p {
    color: #333;
    display: none;
    font-weight: bold;
    text-align: center;
}
#example p:first-child {
    display: block;
}

The CSS is just styling the markup in a very basic manner. #example p is set to display: none so that the <p> elements aren't visible until the javascript needs it. We've added the :first-child pseudo class as a fallback in case the user's browser doesn't have javascript enabled. If javascript is disabled, the first <p> element will be visible as opposed to nothing at all.

The jQuery/Javascript

$(document).ready(function() {
    $("#example p:first").css("display", "block");

    jQuery.fn.timer = function() {
        if (
            !$(this)
                .children("p:last-child")
                .is(":visible")
        ) {
            $(this)
                .children("p:visible")
                .css("display", "none")
                .next("p")
                .css("display", "block");
        } else {
            $(this)
                .children("p:visible")
                .css("display", "none")
                .end()
                .children("p:first")
                .css("display", "block");
        }
    }; // timer function end

    window.setInterval(function() {
        $("#example").timer();
    }, 1000);
});

Make sure the first <p> element is visible
Function "timer" is defined
If the last-child <p> element is NOT visible
Target the visible <p> element, set it's display to none and set the very next <p> element's display to block
Or else
Target the visible <p>
Set it's display to none
Target the first <p> element set it's display to block
Set the repeat interval of $("#example").timer(); to 1000 milliseconds (1 second)

If you don't already know, I'm slowly creating a jQuery carousel plugin and these little tutorials are things which I've ended up needing to include in the plugin.

If you have any questions or comments, feel free to leave them in the comment section below.

Tweaking CSS-Plus

Sat, 28 Aug 2010 00:00:00 GMT

You might notice that one or two things look a bit out of place – This is probably because they are!

I’m going to be adding new features to the site, such as a Request page, where you can request tutorials, freebies or articles and a few other tweaks to make the site a bit easier to navigate and make it a bit more interesting in general.

I am planning on completely redesigning CSS-Plus, but first I’m going to add the functionality that I would like to see on the next theme onto the current theme. This will let me know if it will work and/or if it is worth doing.

If you have any comments or suggestions, feel free to leave a comment below.

Basic CSS Selectors you're missing out on

Thu, 19 Aug 2010 00:00:00 GMT

This article isn't about CSS selectors that you should be using and you don't know it yet... It's about CSS selectors you might not know about because 1 or 2 popular browsers don't support them.

Basic CSS selectors are extremely useful... Unfortunately they are not well supported cross-browser. When I say "not well supported", I'm not even referring to CSS3 selectors.

CSS 2.1 is not properly supported by IE 6 or 7. Due to this issue, we are forced to stay away from these selectors almost as much as we 'avoid' CSS3.

Properties we can't wait to use

There are entire basic properties we have to stay away from - Such as outline which basically functions as a border to border - let alone values we can't rely on (I was planning on mentioning them, but there are just too many). There is so much we could do with these properties and/or values. As I've noticed, a lot of us do use some of these 'unsupported' properties - Such as CSS3 properties like box-shadow, border-radius, text-shadow, etc. but we use this as progressive enhancement.

Selectors we dream about

CSS selectors can't really be used as progressive enhancement. Selectors are not used without properties. Therefore the properties declared would also be considered as progressive enhancement whether or not they are supported by the browser. For example:

/* This #example-1 example is a common of progressive enhancement. The layout does not change */
#example-1 {
    border-radius: 5px;
}

/* This selector affects the first <img> sibling element that follows #example-2 */
#example-2 + img {
    border: 3px solid #fff;
    float: left;
    margin: 5px;
}

In the example above, #example-1 will progressively enhance the element, whereas #example-2 has completely changed the layout.

This is the reason unsupported CSS selectors have to be avoided more than CSS3 properties. It's quite amusing how we've had these powerful CSS selectors within grasp for years now, yet we use them less than we use the latest properties.

This is not to say that you can't use selectors and common properties as progressive enhancement. For example:

li:nth-child(2n) {
    background: red;
}

Yes yes, I know this is not a pseudo-class, but it acts as a selector. This will create the even/odd background effect which will only be seen on browsers that support this CSS3 selector. Unsupported selectors can be used as progressive enhancement, depending on the properties used within them.

Pseudo classes are boring

Pseudo classes are the new in thing, but I'm really into the basic, unused selectors, such as:

/* Selects the first <ul> sibling element to follow a <p> element */
p + ul {
    background: red;
}

/* Selects elements that have both classes 'foo' and 'bar' such as <div class="foo bar"></div> */
.foo.bar {
    background: red;
}

/* Selects input elements that have the attribute 'type="submit"' */
input[type="submit"] {
    background: red;
}

/* Selects <a> links that are child elements of <li> elements */
li > a {
    background: red;
}

IE6 doesn't support any of those, whereas IE7 support all except for p + ul - And because of this I've started using them more and more often.

Save time - Define a function

Wed, 11 Aug 2010 00:00:00 GMT

Functions save you time - And if you didn't know that, you should probably get on the function band wagon.

Functions are shortcuts. They:

Save you time
Save you the hassle of rewriting code you have already typed
Make it easier to read the code
Make it easier to manage and update the code
Reduce errors and trouble-shooting

It is, however, a time waster to create a function for something when it is not needed. As developers, we should think ahead and decide when it would be appropriate to create our own jQuery functions. Recently, I created a piece of javascript which I needed and found useful. I needed to use that same snippet with slight modifications. I copied and pasted the code, which suddenly started filling up my screen, but I thought nothing of it... Until... I had to copy and paste it again. I decided that it was far from acceptable to do this so I turned it into a simple function which I now use in almost every project.

We'll start off by going over HOW to define our own functions and then into creating a function that could benefit us in future.

The HTML

&lt;form action=""&gt; &lt;fieldset&gt; &lt;legend&gt;Example Form&lt;/legend&gt; &lt;input type="text" /&gt; &lt;input
type="submit" value="Submit"/&gt; &lt;/fieldset&gt; &lt;/form&gt;

It's a pretty simple form. This HTML isn't very important right now, what is important is the javascript! - Because of this I'm not going to style it and jump right into the javascript instead.

The jQuery/Javascript

// Declare function 'bgColor'
jQuery.fn.bgColor = function(yourColor) {
    return this.css("background", yourColor);
};

// When the DOM is ready
$(document).ready(function() {
    $("input").bgColor("green");
});

What we've done is declare the function bgColor. You can obviously call it anything you want, but you should try and make sure your functions have a unique (to avoid conflicts) and descriptive name. I've called it bgColor because, as you have guessed, it changes the background color of the targeted element. jQuery.fn.bgColor = function(yourColor) { - If you haven't created a jQuery function before, this line is probably the most tricky. What it is saying is: The function bgColor is equal to whatever is within the function. The variable 'yourColor' is defined by the user by typing a value within the defined-function's brackets. In this case .bgColor("green")

Any value that would be a valid in this situation: .css("background", yourColor); would now be valid in this situation: .bgColor(yourColor)

But turning something already very short into something slightly shorter doesn't really help anyone too much. So let's put this newly learnt skill to use.

I'm not sure what you call this "trick", but it's when there is text within an input-field, and it disappears when you focus on the field, and comes back when it loses focus if there is no value in the field. Anyway, let's get started with the jQuery.

Also, on a side note, it is important to use $(this) a lot because it will be affecting the element you choose, as opposed to a preset element.

// Define the function - In this case, "inputValue"
// We will use the variable "value" - Defined by the user - throughout the function
jQuery.fn.inputValue = function(value) {
    // Target this value and replace it with the variable 'value' defined by the user
    return this.val(value)
        .focus(function() {
            // If this value is equal to the variable
            if ($(this).val() == value) {
                // Remove the text
                $(this).val("");
            }
            // When the focus is lost
        })
        .blur(function() {
            // If there is no value
            if ($(this).val() == "") {
                // Replace this with the variable
                $(this).val(value);
            }
            // Else do nothing
        });
};

That's it, we have a defined variable. Now all we need to do is actually test it.

$(document).ready(function() {
    $('form input[type="text"]').inputValue("Example Value!");
});

And there you have it. A simple and useful function you will probably use over and over... I know I do.

If you don't already create your own functions, I hope this inspires you to start!

Create an infinite polaroid image viewer with jQuery

Mon, 26 Jul 2010 00:00:00 GMT

The name of the tutorial might be a bit confusing, so I'll start by clearing it up.

Infinite - Refers to the fact that if you click the "next button" on the last slide, it loops to the first image, and vice-versa with the "previous button". (Achieved with jQuery javascript) Polaroid - Refers to the look (achieved with CSS) Image Viewer - I was going to use "Carousel", however, this doesn't really slide... It fades. So "Image Viewer" found a place in the title. (Achieved with jQuery javascript)

I like image/content sliders, however, they are always so complicated: Divs within divs containing unordered lists, list items, anchor links and span tags. This Infinite Polaroid Image Viewer works on a single div containing <img> tags. The caption text is taken from <img> alt tags. Also, this is designed to look decent without CSS3 and with javascript turned off.

Let's get started.

The HTML

What exactly is needed besides the div#polaroid? Yes, you guessed it, the controls and caption area. The caption area is not necessary without javascript (since this won't work at all without it) so it would be best to inject it using javascript. It is added in the HTML below, however we will remove it at a later stage to minimize the markup.

<div id="polaroid">
    <img alt="People at a bar" src="images/image-1.jpg" />
    <img alt="Tree and Dam" style="display: none;" src="images/image-2.jpg" />
    <img alt="Puppy" style="display: none;" src="images/image-3.jpg" />
    <img alt="Clouds" style="display: none;" src="images/image-4.jpg" />
</div>
<div id="polaroid-caption">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
    <p class="caption"></p>
</div>

I don't think we could work with much less markup, and because of this, there really much to explain about the HTML. It's very straightforward: We will be able to cycle through the images included within the #polaroid div.

The CSS

We're going to do the obvious styling with the CSS, including some CSS3 and a fall-back in case javascript is turned off. We've added some inline styling to the images in the HTML. This is done to make sure only one image is shown if the javascript is turned off.

#polaroid {
    background: #ededed;
    margin: 0 0 0 20px;
    padding: 15px 15px 0 15px;
    width: 500px;
}
#polaroid img {
    width: 500px;
    height: 380px;
}
#polaroid-caption {
    color: #000;
    background: #ededed;
    height: 40px;
    margin: 0 0 0 20px;
    padding: 30px 15px;
    width: 500px;
}

/* Caption and controls */
#polaroid-caption a {
    color: #000;
}
#polaroid-caption p.caption {
    font-weight: bold;
    text-align: center;
}
#prev,
#next {
    display: block;
    height: 24px;
    width: 14px;
}
#prev {
    background: url(../images/prev.jpg) no-repeat left top;
    float: left;
}
#next {
    background: url(../images/next.jpg) no-repeat left top;
    float: right;
}

/* css3 */
#polaroid {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}
#polaroid-caption {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}

The jQuery Javascript

Alright, now it's time for the cool part javascript:

$(window).load(function() {
    $("#polaroid").after(
        '<div id="polaroid-caption"><a id="prev" href="#"></a><a id="next" href="#></a><p class="caption"></p></div>'
    );

    $("p.caption").text($("#polaroid img:visible").attr("alt"));

    // Next controls
    $("#next").click(function() {
        if ($("#polaroid img:last").is(":visible")) {
            $("#polaroid img:visible").fadeOut(function() {
                $("#polaroid img:first").fadeIn();
                $("p.caption").text($("#polaroid img:visible").attr("alt"));
            });
        } else {
            $("#polaroid img:visible").fadeOut(function() {
                $(this)
                    .next()
                    .fadeIn();
                $("p.caption").text($("#polaroid img:visible").attr("alt"));
            });
        }
        return false;
    });

    // Previous controls
    $("#prev").click(function() {
        if ($("#polaroid img:first").is(":visible")) {
            $("#polaroid img:visible").fadeOut(function() {
                $("#polaroid img:last").fadeIn();
                $("p.caption").text($("#polaroid img:visible").attr("alt"));
            });
        } else {
            $("#polaroid img:visible").fadeOut(function() {
                $(this)
                    .prev()
                    .fadeIn();
                $("p.caption").text($("#polaroid img:visible").attr("alt"));
            });
        }
        return false;
    });
});

What it's "saying" is:

firstly, make sure that p.caption's text is that of the visible image's alt attribute.
When "next" is clicked, if the last image is visible, fade out this image and once that is done, fade in the first image and make sure that p.caption's text is that of the visible image's alt attribute.
Else, if this is not the case, fade out the visible image and once this is done, fade in the next image and and make sure that p.caption's text is that of the visible image's alt attribute.
Return false makes sure that the anchor link doesn't act as a normal link.

The "previous" controls work the same, but in reverse.

Pretty cool, right? I find it very simple, and the simplicity makes it very nice to work with.

I hope you enjoyed the tutorial and if you have any questions or anything to say, feel free to leave a comment.

Forms, jQuery and CSS3

Mon, 05 Jul 2010 00:00:00 GMT

Everyone needs to create a form at one point or another and I've got a few rules I generally stick to when designing and developing forms in general.

Before we get started on actually coding the form, let's recap on the dos and don'ts of forms

It should be simple

It can get complicated quite quickly

This could confuse you and/or the user. If the user gets confused, lost or overwhelmed, there is a high chance that he/she will close the page and you will have lost a potential customer/submitter.

Avoid overwhelming the user

Don't give the user unnecessary options, such as "Fill this in if you have chose option B". Rather have an extra field fade in or pop-up if a certain option was chosen. Create a mini wizard if it is appropriate.

Validation syndrome

Don't add captchas, validate the names, surnames, telephone numbers and emails unless you are getting spammed with false information all the time. Validation is there to help the user as well as obtain valid information, so don't give the users a bad user experience.

Be wise, Optimize

The content should be efficient.

Don't ask for unnecessary information. The longer it takes for the person to complete the form, the higher the chance is that he/she may leave.

The HTML should be as simple as possible. - Semantic markup makes your browser smile

don't use <div>s when you don't need to I've found pre-defined elements work better cross-browser than divs. We have <form>, <fieldset>, <legend>, <label>, <input>, <select> and <option> to work with. They were created for a reason, use them.

Visually appealing

Don't over do the CSS3

Sometimes people inappropriately overdo the drop/text-shadow and it gives me the impression that the site was designed by an amateur developer.

Be subtle

You could use drop shadows, text-shadows, rounded corners, hover and focus events, etc. every single time you develop anything, but be subtle. A drop-shadow or text-shadow that is barely noticible at first could make a whole world of difference to the atmosphere of the web-page.

Now that we have the basics down, let's get started.

The plan

My plan is to create a wizard-type form - with next and previous buttons - in order to add an element of simplicity. Basically, I'm going to follow the above 'tips' and use them while I create this form.

The HTML

<form action="">
    <fieldset>
        <legend>Step One</legend>

        <label for="name">Name:</label>
        <input id="name" name="name" type="text" size="20" />

        <label for="email">Email:</label>
        <input id="email" name="email" type="text" size="25" />
    </fieldset>

    <fieldset>
        <legend>Step Two</legend>

        <label for="company">Company:</label>
        <input id="company" name="company" type="text" size="20" />

        <label for="tel-no">Tel No:</label>
        <input id="tel-no" name="tel-no" type="text" size="20" />

        <label for="fax-no">Fax No:</label>
        <input id="fax-no" name="fax-no" type="text" size="20" />
    </fieldset>

    <fieldset>
        <legend>Step Three</legend>

        <label for="country">Country:</label>
        <input id="country" name="country" type="text" size="20" />

        <label for="address">Address:</label>
        <input id="address" name="address" type="text" size="20" />

        <label for="state">State:</label>
        <select id="state" name="state">
            <option value="Option one">Option one</option>
            <option value="Option two">Option two</option>
            <option value="Option three">Option three</option>
        </select>

        <br class="clear" />

        <input id="submit" type="submit" value="Submit" />
    </fieldset>
</form>

The HTML is fairly simple. I've added the for, name and id attributes because it's more semantic to do so than to leave it out.

The form has the empty attribute 'action' because every form has to have an action. If the action attribute is not added, the page will not validate.

A legend is the heading text on top of the border. It requires no styling (from us) in order to achieve this effect cross-browser. All that is needed is a <legend> within a <fieldset>. Pretty decent, right?

The CSS

form {
    width: 760px;
}
fieldset {
    background: #827254;
    border: 2px solid #c7b795;
    margin: 0 0 20px 0;
    padding: 15px 10px;
}
fieldset.submit {
    background: none;
    border: none;
    margin: 0;
    padding: 0 10px;
}
fieldset legend {
    color: #fff;
    font-weight: bold;
    text-shadow: 4px 4px 7px #4d412a;
}
fieldset input {
    border: 1px solid #516764;
    border-right-color: #504532;
    border-bottom-color: #504532;
    height: 25px;
    line-height: 25px;
    margin: 0 20px 0 0;
    padding: 0 2px;
}
fieldset input:last-child {
    margin: 0;
}
fieldset input:focus {
    border: 1px solid #4d412a;
}
fieldset label {
    margin: 0 10px 0 0;
}
fieldset input[type="submit"] {
    background: #827254;
    border: 3px solid #585246;
    color: #e5d8b9;
    cursor: pointer;
    height: auto;
    line-height: 15px;
    margin: 20px 0 0 0;
    padding: 4px 6px;
}
fieldset input[type="submit"]:hover {
    color: #fff;
}

/*
	Navigation
*/
div.nav {
    width: 200px;
    margin: 0 auto;
}
#prev,
#next {
    display: block;
    background: #827254;
    border: 3px solid #585246;
    color: #e5d8b9;
    cursor: pointer;
    height: auto;
    line-height: 15px;
    margin: 20px 0 0 0;
    padding: 4px 6px;
    text-align: center;
    width: 65px;
}
#prev {
    float: left;
}
#next {
    float: right;
}
#prev:hover,
#next:hover {
    color: #fff;
}

/*
	CSS3
*/
fieldset,
fieldset input,
#prev,
#next {
    border-radius: 5px;
    -moz-border-radius: 5px;
}
fieldset {
    box-shadow: inset 0 0 10px #4d412a;
    -moz-box-shadow: inset 0 0 10px #4d412a;
    -webkit-box-shadow: inset 0 0 10px #4d412a;
}
fieldset input:focus {
    box-shadow: inset 0 0 7px #a4a4a4;
    -moz-box-shadow: inset 0 0 7px #a4a4a4;
    -webkit-box-shadow: inset 0 0 7px #a4a4a4;
}
fieldset input[type="submit"]:hover,
#prev:hover,
#next:hover {
    -moz-box-shadow: 0 0 5px #5f553e;
}

In general, I don't usually use black as a drop-shadow colour. I normally find a darker tone of the background colour and use that.

As you can see, along with CSS3, I've used the selector[type="submit"] selector. IE 6 and 7 have a few problems with this (Don't they always), but I've made sure it gracefully degrades.

And here is the IE specific stylesheet:

form {
    width: 780px;
}
fieldset {
    background: none;
}

The jQuery Javascript

I tend to create the javascript after I have completed the HTML and CSS. That way I know that the page will be functional without javascript.

The first thing I'm going to do is remove div#nav from the HTML and inject that into the page via javascript, as it will be a useless element to include if javascript is disabled.

$(document).ready(function() {
    $("form").prepend(
        '<div class="nav"><a id="prev" href="#">Previous</a><a id="next" href="#">Next</a></div><div class="clear"></div>'
    );
    $("#prev").css("display", "none");

    $("fieldset")
        .not(":first")
        .css("display", "none");

    $("#next").click(function() {
        $("fieldset:visible")
            .css("display", "none")
            .next()
            .fadeIn();
        $("#prev").css("display", "block");

        if ($("fieldset:last").is(":visible")) {
            $("#next").css("display", "none");
        }
    });

    $("#prev").click(function() {
        $("fieldset:visible")
            .css("display", "none")
            .prev()
            .fadeIn();
        $("#next").css("display", "block");

        if ($("fieldset:first").is(":visible")) {
            $("#prev").css("display", "none");
        }
    });
});

The jQuery is saying:

Target the form and prepend the HTML we typed up earlier
Target #prev and hide it - So that the users can't click previous while they are on slide one
Target fieldset, but not the first fieldset, and change the display to none
When you click on next, hide the visible fieldset, and display the next fieldset
Whenever next is clicked, the display of #prev is changed to block - Because there is never a scenario where #prev should be hidden once next is clicked
When you click on next, hide the visible fieldset, and display the next fieldset
If the last fieldset is visible, hide the #next button in order stop the user from continuing past the last slide
And finally, if #prev is clicked, do the exact opposite of #next

Pretty cool how jQuery reads so nicely, huh?

$("fieldset")
    .not(":first")
    .css("display", "none");

Target fieldset, not the first, change the CSS display property to none.

If you have any questions or anything to say, feel free to leave a comment.

How to make a jQuery Drop-Down Menu with a CSS fall-back

Sun, 20 Jun 2010 00:00:00 GMT

The biggest problem with javascript is that we can't completely rely on it. It can easily be disabled, and once this happens, websites should still function correctly. Javascript powered sub-navigation menus are a big problem, because if javascript is disabled, your website's navigation suddenly goes out the door. But fear not, there is a solution!

CSS 'popups' do exist, but are almost never used (Well, I barely ever see them). Their only problem, is the IE6 and IE7 compatibility. The selectors used to achieve this 'popup' effect are not supported in IE6, however it does work in IE7 (With a few bugs, but I've got it working nicely in the demo). People tend to stay away from this because IE6 doesn't support it, but I think this is a terrible reason not to use it.

If we are going to use jQuery/javascript to handle the navigation menu's 'popup' effect, there will be no fallback alternative for any browser. People will just have to live with an incomplete navigation menu. So why not use CSS to achieve this when javascript is turned off? There might be no backup plan for IE6, but it does work with javascript enabled.

Let's get started!

The HTML

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul class="child">
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li>
                <a href="#">Speakers</a>
                <ul>
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul class="child">
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

This is a very simple nested Unordered List. The second level Unordered List will be hidden until the parent List Item is hovered on and the third level will be revealed once the second level <li> is hovered on.

The classes of "child" and "grandchild" are added to the sub-menus so that the CSS and javascript don't handle this at the same time. The CSS hover function specifically targets these classes, however, if the javascript is enabled, it will remove these classes in order to reduce conflict.

The CSS

/* Targeting both first and second level menus */
#nav li {
    float: left;
    position: relative;
}
#nav li a {
    background: #d6cfbd;
    border: 3px solid #4f4026;
    color: #333;
    display: block;
    margin: 0 5px 0 0;
    padding: 5px 8px;
}
#nav li a:hover {
    background: #f7f7f7;
    text-decoration: none;
}

/* Targeting the first level menu */
#nav {
    display: block;
    height: 35px;
    padding: 10px 0;
    width: 500px;
    z-index: 100;
    position: absolute;
}
#nav > li > a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
}

/* Targeting the second level menu */
#nav li ul {
    background: #e1ddd3;
    border: 3px solid #4f4026;
    color: #333;
    display: none;
    margin: -3px 0 0 0;
    width: 200px;
    position: absolute;
}
#nav li ul li {
    width: 100%;
}
#nav li ul li a {
    background: none;
    border: none;
    line-height: 30px;
    margin: 0;
    padding: 0 0 0 5px;
}
#nav li ul li a:hover {
    background: #f7f7f7;
}

/* Third level menu */
#nav li ul li ul {
    right: -200px;
    top: 0;
}

/* A class of current will be added via jQuery */
#nav li.current > a {
    background: #f7f7f7;
}
/* CSS fallback */
#nav li:hover > ul.child {
    display: block;
}
#nav li:hover > ul.grandchild {
    display: block;
}

As you can see, there is only one line of CSS needed for the CSS fallback. The style is simply saying: When you hover on an <li> element, make it's children (specifically the ul.child) display as a block.

The CSS3 properties are only applied to the <a> links that are children of the <li> which are children of #nav. This is done so that rounded corners are not given to the sub-menu's <a> links.

Almost there, so far this is a fully functional menu with a sub-menu in IE7+ and all modern browsers.

The jQuery/Javascript

Now it's time for some minor fade effects and support in IE6.

$(document).ready(function() {
    // Remove the class of child and grandchild
    // This removes the CSS 'falback'
    $("#nav ul.child").removeClass("child");
    $("#nav ul.grandchild").removeClass("grandchild");

    // When a list item that contains an unordered list
    // is hovered on
    $("#nav li")
        .has("ul")
        .hover(
            function() {
                //Add a class of current and fade in the sub-menu
                $(this)
                    .addClass("current")
                    .children("ul")
                    .fadeIn();
            },
            function() {
                // On mouse off remove the class of current
                // Stop any sub-menu animation and set its display to none
                $(this)
                    .removeClass("current")
                    .children("ul")
                    .stop(true, true)
                    .css("display", "none");
            }
        );
});

And that's it! A cross browser sub-menu with a CSS fallback!

I can see this being done (with the fade effects) using CSS in the foreseeable future.

Create a Search Form with CSS3 and jQuery

Mon, 07 Jun 2010 00:00:00 GMT

Most websites nowadays have a search form somewhere. I'm pretty sure I don't need to explain why it's a good idea to have a 'search' functionality built into a website and most Content Management Systems already come with the functionality built in. Usually the search area is in an easy to see/find place and it's because of this reason it's a good idea for it to look good - Or at least consistent with the rest of the website.

I immediately notice when a search form looks a out of place because it's not styled appropriately or at all. It always gives me the impression that the website hasn't been designed by a professional. Perhaps that thought might not go through every persons mind when they see a poorly designed form, but I'm pretty sure a stylish form will give the website a better appearance overall.

What should a search-form contain?

There are a few things I like a search-form to have:

The search form should be consistent with the rest of the website - Which means that the input-field and submit-button should be styled appropriately.
I think search forms should have a little 'search' image somewhere. Images can help people to know what something is without having to read. It's pretty common to use a magnifying glass.
People should know that the search form will do exactly that. So I think it's a good idea to have the word 'Search' next to the form or within it.

Two decent examples of search forms are

CSS-Tricks

and

David Walsh Blog

The HTML

<form action="" id="search-form">
    <fieldset>
        <input type="text" id="search" name="search" />
        <input type="submit" id="search-submit" value="" />
    </fieldset>
</form>

The HTML is pretty standard. I've included action="" because the form will not validate without it and because something should happen once you click submit. So it's there to remind you to add that php. value="" has been added to the submit buttons because some browsers like to add the text submit to the submit button automatically. This tells the browser not to do that.

The CSS

* {
    margin: 0;
    padding: 0;
}
fieldset {
    border: none;
}

#search-form {
    width: 190px;
    position: relative;
}
#search {
    background: #b2a48c;
    border: 3px solid #402f1d;
    color: #2b1e11;
    height: 20px;
    line-height: 20px;
    width: 150px;
    padding: 2px 4px;
    position: absolute;
    top: 11px;
    left: 0;
}
#search-submit {
    background: #b2a48c url(../images/search.png) no-repeat 12px 7px;
    border: 3px solid #402f1d;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
}

.empty {
    color: #524630;
}

/* CSS3 */
#search {
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
    background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
    text-shadow: rgba(0, 0, 0, 0.2) 0 0 5px;
}

#search-submit {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -mox-box-shadow: 0 0 5px black;

    /* Webkit-transition */
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.4s, 0.4s;
    -webkit-transition-timing-function: linear, ease-in;
}

I generally separate the CSS3 properties from the CSS2.1 like I've done above. It's just how I like writing my CSS.

The first two lines are a quick css-reset. I've set the input field's line height to the height of itself so that the text will be forced to be centred in all browsers. What I've done is given the form a set width and given it a relative positioning - The other items have been absolutely positioned so that the search-button can be placed on top of the input field. I've done this because I think it looks pretty cool. The class of .empty was added to change the colour of the placeholder text.

The webkit-transition property is pretty cool. Have a look at the example in Chrome or Safari.

And that's about it. The javascript is an optional part of the tutorial to add a little bit more of an 'edge' to the form.

The jQuery Javascript

The javascript is used to achieve the word "Search.." that displays within the input field. If the input field is clicked and it contains the word "Search...", the input field is then emptied. If the input-field loses the focus and it is empty, the input field's value is changed back to "Search...".

I'm pretty sure you have seen this somewhere before, it's not really anything new, but it's a cool little space-saving addition to a search-form.

$(document).ready(function() {
    // Add the value of "Search..." to the input field and a class of .empty
    $("#search")
        .val("Search...")
        .addClass("empty");

    // When you click on #search
    $("#search").focus(function() {
        // If the value is equal to "Search..."
        if ($(this).val() == "Search...") {
            // remove all the text and the class of .empty
            $(this)
                .val("")
                .removeClass("empty");
        }
    });

    // When the focus on #search is lost
    $("#search").blur(function() {
        // If the input field is empty
        if ($(this).val() == "") {
            // Add the text "Search..." and a class of .empty
            $(this)
                .val("Search...")
                .addClass("empty");
        }
    });
});

Implementing fonts with @font-face

Tue, 18 May 2010 00:00:00 GMT

This is probably one of the coolest CSS3 features, along with box-shadow and border-radius. @font-face was introduced in CSS2 by IE and it has been around since IE 5. Most browsers have the ability to use .otf or .ttf fonts, however IE has to be difficult - it only supports.eot fonts. Luckily it is very easy to implement all of these file types.

How you say? Well I used to find a .ttf or .otf file and then try and find a converter in order to convert it to an .eot - I never managed to get this to work though. Thankfully, fontsquirrel.com exists. Not only can you find font files to download, but you can download entire @font-face kits, which does absolutely everything for you by giving you the @font-face CSS code, as well as all of the font files you will be needing.

The CSS

@font-face {
    font-family: "Chunkfive";
    src: url("../fonts/Chunkfive-webfont.eot#") format("eot"), url("../fonts/Chunkfive-webfont.woff") format("woff"),
        url("../fonts/Chunkfive-webfont.ttf") format("truetype"), url("../fonts/Chunkfive-webfont.svg#webfontM8M0EYs2")
            format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Applying it to some text */
p {
    font-family: Chunkfive, Arial, Helvetica, Sans-Serif;
}

It is as simple as that! The HTML would simple be a <p> tag containing some text. The other fonts that have been called for the <p> element are added as a backup in case our newly-added-font doesn't load for some reason.

What is actually going on?

Line 2 - A CSS name for the font has been declared - "Chunk-five"
Line 3 - The first source file, .eot, solves IE's problems.
Line 4 - This searches for a local version of the font file and uses it instead of downloading it again.
Line 5 - .woff files are supported by Firefox 3.6+. This file font type has the ability to be a compressed version of .otf and .ttf fonts and unlike the latter, .woff fonts can contain meta data.
Line 6 - The standard .otf file is loaded.
Line 7 - .svg fonts are supported by most modern browsers except Internet Explorer. These files are small and a single .svg font file can contain multiple types of fonts.
Line 8 & 9 - This makes sure that the website knows Chunkfive is the regular text and that when you add font-weight: bold or font-style: italic, it should change shape.

Why are all these fonts included in the CSS you say? They are a backup. They don't hurt anyone or anything by being included in the CSS, but if one of the files gets deleted or becomes corrupt, the font-file will be swapped out and the website will carry on as usual.

I have tested these @font-face fonts with:

Chrome 4.0 +
Firefox 3.5 +
Internet Explorer 5 +
Opera 10.5 +
Safari 3.1 +

If you find that this works on an earlier browser version than I have above, let me know and I'll update the list.

!important

Make sure you are legally allowed to use the fonts you wish to use on your website! fontsquirrel.com is a great free-font resource, but be sure to read the license agreement attached.

Conclusion

The CSS code doesn't feel wonderful to type out, but it works in ALL major browsers which is what counts. I noticed the font looked a tiny bit jagged in IE 8 (IE 7 seemed fine). I solved this by creating an IE8 only stylesheet and I changed the font's opacity to 90%.

p {
    filter: alpha(opacity=90);
}

In short, I think this is very awesome.

How to create an image caption with jQuery

Thu, 13 May 2010 00:00:00 GMT

I've been meaning to create an image caption for a while now and instead of putting it off I just decided to do it. This image caption is not a plugin - It merely allows you to understand how a jQuery image caption would be created. I will eventually turn it into a plugin with useful options, etc. But for now, this will just have to do.

Let's get started:

The HTML

The markup is very simple:

<p class="caption">
    <img src="images/image1.jpg" alt="" />
    <span>Rainbow and Tree</span>
</p>

<p class="caption">
    <img src="images/image4.jpg" alt="" />
    <span><big>Pellentesque habitant</big>morbi tristique senectus et netus.</span>
</p>

As you can see, all that is needed is a paragraph tag with a class of caption that contains an image and a span tag. The span tag would be the caption information. If you would like a heading within the caption, just enclose it within a <big> tag.

The CSS

.clear {
    clear: both;
}
.caption {
    display: block !important;
    position: relative !important;
}
.caption img {
    position: absolute !important;
}
.caption span {
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color: white !important;
    display: none;
    padding: 5px 10px !important;
    text-align: center;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}
.caption span big {
    font-weight: bold;
}

I've thrown quite a few !important's around to make sure other CSS selectors don't interfere with it. There isn't really anything interesting going on within the CSS. The span is set to display none because we only want it to display once we have hovered over the image. So for now, it is display: none.

The jQuery

$(window).load(function() {
    // For each instance of p.caption
    $("p.caption").each(function() {
        $(this)
            // Add the following CSS properties and values
            .css({
                // Height equal to the height of the image
                height:
                    $(this)
                        .children("img")
                        .height() + "px",
                // Width equal to the width of the image
                width:
                    $(this)
                        .children("img")
                        .width() + "px",
            })
            // Select the child "span" of this p.caption
            // Add the following CSS properties and values
            .children("span")
            .css(
                // Width equal to p.caption
                // But subtract 20px to callibrate for the padding
                "width",
                $(this).width() - 20 + "px"
            )

            // find the <big> tag if it exists
            // And then add the following div to break the line
            .find("big")
            .after('<div class="clear"></div>');

        // When you hover over p.caption
        $(".caption").hover(
            function() {
                // Fade in the child "span"
                $(this)
                    .children("span")
                    .stop()
                    .fadeTo(400, 1);
            },
            function() {
                // Once you mouse off, fade it out
                $(this)
                    .children("span")
                    .stop()
                    .delay(600)
                    .fadeOut(400);
            }
        );
    });
});

It might look quite confusing but it's all very simple actually. What I've had to do is break up the code so that it is readable, otherwise it would all be on one line. Everything is done on a single $(this) statement.

The p.caption element's width and height are set to the same width and height as the image. That way there is a - {position: relative;} - wrapper and we can make the span tag act as a caption by sticking to the bottom of the image/wrapper.

Note: On the span tag - padding is definitely needed other wise the text sticks right up against the top and sides. This is the reason width: 100% could not be applied to it within the CSS, otherwise the span would start moving outside of the wrapper. Padding has been used on the span, but this is only because the total span-padding-width has been subtracted from the span's total width within the javascript.

Set the <span>s width to the width of the image/.caption, but subtract 20 - This 20 refers to the 10px padding on either side. "width", $(this).width() - 20 + "px")

Finally

So far, this image caption works with IE 7+, Opera 10, Webkit browsers and Firefox. I hope you found this useful.

How to add a Gaussian Blur effect to elements within firefox

Mon, 10 May 2010 00:00:00 GMT

I have been trying to find an easy, efficient way of applying a Gaussian blur effect to images and elements. I would usually achieve this by creating the image with the Gaussian Blur effect already applied. I wouldn't say this is efficient at all. It is about as efficient as creating rounded corners using images.

One of the ways to apply a Gaussian blur to elements and images is by making use of the svg filters. It can be applied to any element or image just by adding a bit of code to the HTML and specifying which element you would like to target within the CSS.

The HTML

xmlns:svg="http://www.w3.org/2000/svg" must be added to the <html> tag. A working example would look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"></html>

This allows Firefox to make use of the SVG filters. We also have to add one last bit of HTML to get this thing working.

<body>
    <p>Pellentesque habitant morbi tristique senectus</p>
    <img src="images/gaussian-blur.png" alt="" />

    <svg:svg>
        <!-- Filter ID/Name -->
        <svg:filter id="example-one">
            <!-- Amount of Gaussian Blur that should be applied -->
            <svg:feGaussianBlur stdDeviation="0.9" />
        </svg:filter>
        <svg:filter id="example-two">
            <svg:feGaussianBlur stdDeviation="2" />
        </svg:filter>
    </svg:svg>
</body>

The CSS

The CSS is quite simple and easy to implement. (This must be an INTERNAL stylesheet. - It does not work if it is external, for some reason)

<style type="text/css">
    p {
        filter: url(#example-one);
    }
    img:hover,
    p:hover {
        filter: url(#example-two);
    }
</style>

The ID that the url refers to is the ID we set within the svg html section.

!important

Any problems? - In short, yes. In long, yes. There are quite a few problems and little annoyances I have come across. Here is a list (There are probably more that I haven't come across):

The filter only works in Firefox
The filter only works if the file extension is .xhtml
IE doesn't seem to open .xhtml file extensions, it automatically attempts to download it.
An internal style sheet HAS to be used in order for the svg filter to take effect.
jQuery doesn't seem to work properly with .xhtml file extensions. Certain methods that I tried, worked - css(), animate() - and other methods didn't - html(), prepend(), append().
The HTML doesn't validate. Adding the html via jQuery in order to achieve validation doesn't work since the methods I used to achieve this didn't work within the .xhtml file

Conclusion

I think the effect is very cool and I have fun playing around with it, but I would never use this on an actual web page since there are just too many quirks. For the moment, I think I will stick to images. If you are interested in applying clip-paths, filters and/or masks within webpages, or if you would just like more information regarding the Gaussian Blur, have a look weblogs.mozillazine.

Adding user options to your jQuery plugin

Thu, 06 May 2010 00:00:00 GMT

Recently I created a tutorial named How to write a simple jQuery plugin. It is necessary to go through that tutorial if you have no idea how to create a simple jQuery plugin. This tutorial will teach you how to create user-friendly-options for the plugin user - Like you have probably seen and used many times before.

Why are options necessary?

These options turn a script into a jQuery plugin. It changes the script from being static to dynamic. It can save you time in a few ways:

It makes the script dynamic.
It saves you the time of sifting through the code.
It saves you the time of re-scripting the jQuery.
You don't have to worry about messing up the working plugin.

Let's get started.

What are we planning on doing?

I think we should do something similar to the 'How to create a simple jQuery plugin' tutorial, since the most simple examples often gives us the "AHA!" moment. This plugin is going to be called "redBorder" and it will be create a 3px, solid red border around the targeted element by default. The options we are going to have is to change the values of the property, and to change the property itself as well!

The jQuery Javscript

(function($) {
    $.fn.extend({
        // Plugin Name
        redBorder: function(options) {
            // Defaults options are set here
            // Every default goes within the { } brackets as seen below
            // A comma separates the different values
            var defaults = {
                property: "border",
                value: "3px solid red",
            };
            var options = $.extend(defaults, options);

            return this.each(function() {
                // Add 'options.' before the value
                // This is done to inform jQuery it is part of the default options
                jQuery(this).css(options.property, options.value);
            });
        },
    });
})(jQuery);

If we target a paragraph element like this:

$("p").redBorder();

It will come out looking like it did in the other plugin example.

However, if we add the following options (The properties and values options have to be valid CSS properties and values)

$("p").redBorder({ property: "background", value: "red" });

It will produce the following results:

Conclusion

And that is it! You now know all you need to know in order to create a jQuery plugin with user options. I had an "AHA!" moment when I figured out how to add options. It seems to open up a whole new world.

Why you should download IE9 Platform Preview

Mon, 03 May 2010 00:00:00 GMT

IE is a pretty bad browser. It used to be the go-to browser, but now it would be an extreme understatement to say "it is no longer the go-to browser."

IE9 is probably going to be a pretty decent browser, but this article isn't about IE9, it's about IE9 Platform Preview. (It does not support Windows XP) Something I personally find annoying, is that there is no firebug - or something equivalent - for IE, like there is for Firefox, Chrome, Opera, etc. I have tried using firebug-light but it doesn't help much and I don't really like it.

Document Mode

I was having a look at IE9 Platform Preview recently and I found that I could switch between IE5, IE7, IE8 and IE9 Document Mode which is pretty handy. The IE8 document mode is to IE8 as IE8 compatibility mode is to IE7. Basically, the webpage might render exactly the same in the browser version and the document mode, or it might be slightly off. It's mostly accurate though.

My method

What I generally do (And I'm sure lots of other people do this too) is have a look at what my webpage looks like in IE8 compatibility mode (Checking for IE7).

If there are problems, I would fix them using (probably) an IE7 conditional stylesheet and then make sure everything is good in IE7.
If I find no problems, I would test it in IE7 immediately, and fix any problems.

So far, this method has worked perfectly for me, however I may very well start using IE9 Platform Preview's IE7 Document Mode for this from now on since I'll be using IE5 Document Mode to check for IE6.

Developer Tools

The coolest thing about IE9 Platform Preview is that it comes with Developer Tools, which is a Firebug-type of application. This will make our lives, as web-developers, much easier. We can temporarily edit the CSS and HTML on the fly and view the changes immediately. It brought tears to my eyes when I stumbled upon this (Not really, but I was happy). The best part about all of this is combining the Developer Tools with the Document Modes. As you can imagine, this could save you a lot of time while trying to fix IE6 or IE7 HTML and/or CSS problems. I tested this out recently and it worked really well. Among other things, you can:

Disable scripts, CSS, etc
Colour picker
Ruler
View link paths, DOM page source, DOM element source
View multiple image properties, such as image height/width, file size, etc
Cache options
Resize browser (The options don't seem to work for this)
Validate HTML, CSS, feed and links

Again, there are things I have left out. These are merely the options that left an impression on me.

Any problems?

I have encountered two little problems:

The 'resize browser' options don't seem to work
The ruler is completely invisible on a white background since it is white itself
And the Developer Tools were only loading the IE9 Platform Preview's default page's information instead of the page I was currently on. This has only happened once and I have used this multiple times.
It took me a few minutes to get used to it - I guess that's normal though

Conclusion

IE9 Platform Preview's Developer Tools speeds up the process of solving some of IE's CSS problems. It's not perfect yet, but it's a start.

Create a Speech-Bubble Tooltip using CSS3 and jQuery

Thu, 29 Apr 2010 00:00:00 GMT

There are a couple of ways to create tooltips, but I decided that I wanted to try and create a very lightweight and good looking tooltip without using any images.

Alright, time to get started.

The HTML

This tooltip is going to work on any <a /> link that has a class of "sbtooltip" and contains a title attribute. <a class="sbtooltip" href="#" title="CSS3 and jQuery">Speech-Bubble Tooltip</a> This is a tooltip and should be very easy to implement, so very little HTML is needed for this to take effect.

The CSS

Before we get into the real CSS, the border property should be explained.

As you can see, you can form a triangle using borders. You can also create one of any size as long as you manipulate the border widths – Like we will be doing in the CSS for this tutorial. This is how the Speech-bubble's pointer will be created.

a.sbtooltip:hover {
    position: relative; /* Allows the tooltip to be absolutely positioned */
    z-index: 100;
}

/* Speech Bubble */
a.sbtooltip:before {
    background: rgb(224, 168, 38); /* For browsers that don't support gradients */
    background: -moz-linear-gradient(/* Firefox gradient */ 90deg, rgb(207, 141, 0) 44%, rgb(224, 168, 38) 72%);
    background: -webkit-gradient(
        /* Webkit gradient */ linear,
        left bottom,
        left top,
        color-stop(0.44, rgb(207, 141, 0)),
        color-stop(0.72, rgb(224, 168, 38))
    );
    color: #fff;
    content: attr(
        data-sbtooltip
    ); /* This takes the content of the attribute named "data-sbtooltip" and displays it within this element – We will use jQuery to take care of this to make sure that the document is still valid xHTML*/
    display: none; /* Hidden until hovered upon */

    /* Font, padding, top and right must change depending on the font size you are using on your web page */
    font: 12px sans-serif;
    padding: 5px 10px;
    position: absolute;
    top: 33px;
    right: 0;
    border-radius: 8px;
    box-shadow: 0 0 4px #999;
}

/* Triangle */
a.sbtooltip:after {
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent rgb(224, 168, 38) transparent;
    /* Forces this pseudo-element to appear on hover */
    content: "";
    display: none;
    /* Width and height could  be left out, but I prefer a less 'pointy' triangle */
    height: 2px;
    width: 2px;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Display on hover */
a.sbtooltip:hover:after,
a.sbtooltip:hover:before {
    /* The Speech-bubble tooltip and pointer will appear on hover */
    display: block;
}

Create a file called sbtooltip.css and type/paste the CSS into that file.

There you have it! If you add an attribute of "sbtooltip", containing a value, to an anchor link with a class of "sbtooltip" you will have a functional Speech-Bubble Tooltip!

A major problem with the 'sbtooltip' attribute is that the xHTML will not validate

Preferably, we would have the CSS 'content' property do the following: content: attr(title)

The only problem with this is the browser's native tooltip will appear over OUR tooltip. The whole reason we are creating a tooltip is to replace that one.

We are faced with a dilemma

Have the browser's native tooltip appear over the one we have just made, or have xHTML validation errors.

In order to correct this, we will need the help of the web developer's best friend. Javascript!

The jQuery javascript

I think it's going to be easiest to create a function to do our bidding. This will allow us the freedom to apply it to any element very easily so if you decide you want to change the class "sbtooltip" to something else within the CSS, it will be very easy to target a different element with the jQuery. Also, it will give you some insight into how to go about creating a function (If you don't already know).

// Function name
$.fn.sbTooltip = function() {
    // For each instance of this element
    return this.each(function() {
        // Add the new attribute with title's current value and then remove the title attribute
        $(this)
            .attr({ "data-sbtooltip": $(this).attr("title") })
            .removeAttr("title");
    });
};

This solves both of our problems. The document validates with xHTML strict.

Create a file called jquery.sbtooltip.js and type/paste the function into that file. The function does nothing by itself; we will have to call the 'sbTooltip' function to an element, like this:

$(document).ready(function() {
    $("element").sbTooltip();
});

The CSS we have created only works on <a /> elements with a class of sbtooltip, so that is what we will be targeting.

Implementation

Before we go any further; if you have gotten to this point, and tried viewing this in Internet Explorer, you might have seen that it doesn't work properly and the native tooltip isn't showing up. To solve this problem we will have to use browser specific code to target everything that isn't Internet Explorer. I have saved the CSS as sbtooltip.css and the javascript as 'jquery.sbtooltip.js' like I suggested earlier. Place the following code within your <head> tag:

<!—jQuery loaded remotely -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/sbtooltip.css" media="screen" />
<script type="text/javascript" src="js/jquery.sbtooltip.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("a.sbtooltip").sbTooltip();
    });
</script>
<!--<![endif]-->

This code will load in every browser besides IE. You could view this tooltip as 'progressive enhancement' since IE users will still have their browser's native tooltip and they won't even know they are missing out on anything.

Extra information

The Speech-bubble's pointer looks good in Firefox and Chrome, decent in Safari, however it looks a bit jagged in Opera. An alternative to using the border could be to use an image or no speech-bubble pointer at all.
If you're <a /> hover state includes the property text-decoration: underline, the text within the tooltip will be underlined too - in Webkit browsers (Chrome and Safari). I hope you've learned something worthwhile during this tutorial.

How to create a simple jQuery plugin

Fri, 23 Apr 2010 00:00:00 GMT

I avoided learning how to create a jQuery plugin for quite a while because I thought it would be too difficult and/or too complicated to learn since I'm not a 'hardcore' programmer. Contrary to what I thought, it is actually pretty easy to create a plugin as long as you know the jQuery basics.

jQuery plugins are great because they allow you to quickly implement something relatively complicated with, normally, a single line of jQuery. They also normally allow you to change a few options very easily. Have you ever needed a plugin to do something (that it should be able to do easily) but it wasn't able to? I've had this a few times and it would be quite convenient to edit the plugin to my liking, which is possible once you know what is actually going on.

Let's get started.

The basics

This is what the basic structure of a plugin looks like.

// Place the plugin within an anonymous function to avoid outside problems
(function($) {
    // Attatch the new method
    $.fn.extend({
        // Plugin Name
        pluginName: function(options) {
            return this.each(function() {
                // Here is where you insert your normal code
            });
        },
    });
})(jQuery);

redBorder jQuery plugin

The plugin I'm going to create is a plugin that creates a red border around the elements the user selects.

(function($) {
    $.fn.extend({
        redBorder: function() {
            return this.each(function() {
                $(this).css("border", options.border);
            });
        },
    });
})(jQuery);

There we go, the plugin is done! As you can see, all that has changed is:

pluginName has been replaced with redBorder
jQuery(this).css("border", "3px solid red"); has been inserted

Create a .js file and paste/start writing your plugin within that file. After you have done that, create a link to that file within your HTML document. Now, all you have to do is load jQuery, load the redborder.js plugin and call the redBorder function to selected elements.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("p").redBorder();
    });
</script>

The output would look something like this:

Adding options

(function($) {
    jQuery.fn.extend({
        // Options is added within the brackets after function
        // This informs the plugin that options will be used
        redBorder: function(options) {
            // Defaults options are set
            var defaults = {
                border: "3px solid red",
            };
            var options = $.extend(defaults, options);
            return this.each(function() {
                jQuery(this).css("border", options.border);
            });
        },
    });
})(jQuery);

Now you can edit the border options, as long as it adheres to the 'border' properties syntax within the CSS.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.redborder.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("p").redBorder({ border: "3px dotted green" });
    });
</script>

The output of this would look something like this:

There you have it. A very simple jQuery border plugin with basic options. Click here to learn to create more advanced jQuery plugin options.

CSS shorthand properties

Mon, 19 Apr 2010 00:00:00 GMT

CSS shorthand properties make your CSS file look cleaner, easier to edit, easier to type and it reduces the total file size.

The above image "CSS Shorthand - Saving you money every day" is a play on "saving you time - saving you money" cliché, however, it does save you time, so it is essentially making you money. This article is aimed at beginners who aren't familiar with CSS shorthand.

What is shorthand?

CSS shorthand is a way of getting the job done while using less CSS properties.

The 5 CSS Shorthand properties I use in every single project I work on are:

background
border
font
list-style
margin
outline
padding

Above is a list of all the shorthand properties, however I have crossed out the ones I don't use often. I would say that margin and padding are probably the ones I use the most, which is probably because almost every element uses both of them. My second most used would be background, then border and finally font.

One important thing to remember about CSS shorthand is that the order is very important. If you mix up the order then it probably won't affect the element the way you want it to.

Margin and Padding

Margin and padding are the most simple and also written in exactly the same way.

.example {
    margin-top: 10px;
    margin-right: 9px;
    margin-bottom: 8px;
    margin-left: 7px;

    padding-top: 10px;
    padding-right: 9px;
    padding-bottom: 8px;
    padding-left: 7px;
}

Shorthand

.example {
    margin: 10px 9px 8px 7px;
    padding: 10px 9px 8px 7px;
}

It's actually very easy to remember - top, right, bottom, left. It goes in a clockwise direction. So try and remember 12 o'clock - 3 o'clock - 6 o'clock - 9 o'clock and you are set for margin and padding. Other examples:

.example {
    /* 10px top and bottom and 5px left and right */
    margin: 10px 5px;

    /* 10px top and 0 right, 0 bottom and 0 left */
    padding: 10px 0 0 0;
}

Background

This is my favourite shorthand property. rgba and multiple background options have been added in CSS3.

.example {
    background-color: red;
    background-image: url(../images/example.jpg);
    background-repeat: repeat-x;
    background-position: right bottom;
    background-attachment: scroll;
}

Background shorthand

.example {
    background: red url(../images/example.jpg) repeat-x right bottom scroll;
}

Border

.example {
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

Border shorthand

.example {
    border: 2px solid black;
}

Font

This is probably the most difficult CSS shorthand property to remember. I don't have a clever way of remembering this one, I've drilled it into my brain by using it many times.

.example {
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 35px;
    line-height: 10px;
    font-family: Arial, Helvetica, sans-serif;
}

Font shorthand

.example {
    font: italic small-caps bold 35px/10px Arial, Helvetica, sans-serif;
}

Outline

Outline is to border as margin is to padding.

.example {
    outline-width: 2px;
    outline-style: solid;
    outline-color: black;
}

Outline shorthand

.example {
    outline: 2px solid black;
}

List Style

In this example, the square will only be used if the example.gif is not loaded which, I think, is good practice.

.example {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: url(../images/example.gif);
}

List Style shorthand

.example {
    list-style: square outside url(../images/example.gif);
}

And that's it folks! All 7 of the CSS shorthand properties wrapped up into a one little article. If you have any questions, feel free to ask me.

How to create a Fading Border gallery with Opacity Focus

Thu, 15 Apr 2010 00:00:00 GMT

Recently, someone asked me how they would go about creating a "fading border". I can't recall ever seeing one, so I decided to create this tutorial.

What exactly is a 'fading border with opacity focus'? At first I created a really long-winded version. The jQuery javascript was about equally as long as this version, but the CSS was about 10 times larger and I managed to halve the amount of markup. The one thing this version has lost, however, is the box-shadow on hover (Which I think looked great). The fading border without a box-shadow seemed bland, which is why I've added the opacity focus. In this tutorial you will learn how to create an awesome 'fading border' and stylish opacity focus with minimal HTML, ridiculously little CSS and easy to understand jQuery javascript. Alright, let's get started.

The Markup/HTML

<ul>
    <li>
        <a href="images/bird.jpg" title="Parakeet"><img src="images/thumb-bird.jpg" alt=""/></a>
    </li>
    <li>
        <a href="images/halloween.jpg" title="Halloween"><img src="images/thumb-halloween.jpg" alt=""/></a>
    </li>
    <li>
        <a href="images/sushi.jpg" title="Sushi"><img src="images/thumb-sushi.jpg" alt=""/></a>
    </li>
    <li>
        <a href="images/mountain.jpg" title="Mountain"><img src="images/thumb-mountain.jpg" alt=""/></a>
    </li>
</ul>

As you can see, this is very standard and simple markup. What we have here is an Unordered List containing thumbnail images that link to another, larger, image. I've added the title attribute because I will be using Fancybox to manage the image anchor links and Fancybox makes use of the this "title" attribute. You should be adding 'title' attributes for SEO purposes anyway. Fancybox is not needed for the fading border or opacity focus to work.

The CSS

As I said before, this contains so little CSS that I find it quite amusing. Especially since it previously contained 2 lines for every image I used and an extra 4 or so lines.

body {
    background: #79694c;
}
li {
    float: left;
}
a img {
    background: #79694c;
    padding: 5px;
    margin: 0 40px 0 0;
}

When you are too close to something you are working on, it is difficult to step back and look at what you are actually doing. I did this and I am amazed. I think I will write an article based on exactly this subject at a later date.

The float property is included to force the <li>s into a horizontal line and the margin-right of 40px is used to separate the <li>s, therefore separating the images. As you can see, the image doesn't actually have a 'border'. The padding around the image gives it the the illusion that it has a border. Also the padding is the same colour as the background. This is done because we want to give the impression that these images do not contain a border. This way, when we fade to another colour, it looks like the border is fading in and out of existence. A border of the same colour is needed, otherwise a 'jump' will occur when you hover over it due to a border being added and taken away. This jump is a big indication of a poor web developer.

The jQuery

This part of the tutorial is by far the most complicated (relative to the HTML and CSS). The first thing we need to do is include jQuery, obviously. Once that has been accomplished, a plugin named jQuery Color needs to be linked to in the header. This little plugin makes it very easy to fade background and border colours into one another. And now for the fading border and opacity focus jQuery javascript code:

$(document).ready(function() {
    //Fading Border
    $("ul img").hover(
        function() {
            $(this)
                .stop()
                .animate({ backgroundColor: "#40331b" }, 400);
        },
        function() {
            $(this)
                .stop()
                .animate({ backgroundColor: "#79694C" }, 400);
        }
    );

    //Opacity Focus
    $("ul li").hover(
        function() {
            $(this)
                .siblings()
                .stop()
                .fadeTo(400, 0.4);
        },
        function() {
            $(this)
                .siblings()
                .stop()
                .fadeTo(400, 1);
        }
    );
});

Let's start with the Fading Border, since it comes first in the jQuery. What it's saying is: Once you hover over ul img, animate the background colour to a dark brown; And once you mouse-off, animate the background to a lighter brown (The same colour we we're using before).

The Opacity Focus is slightly different. What this is saying is: Once you hover over the ul li (List items), select the siblings (All of the other List Items) and fade them to an opacity level of 0.4 at a speed of 400 milliseconds; And once you mouse-off, fade the <li>'s back to an opacity of 1 (100% visible). The .stop() functions are used in order to stop the animation once you mouse on/mouse off. If you didn't have this and you quickly dragged your mouse over all of the images and stopped, the animations would play over and over until it had completed the amount of times you mouse on / mouse off-ed.

The useful thing about this Fading Border with Opacity Focus is that the images can be any size and this will work just fine. I created every thumbnail equal in size because I think it looks a whole lot neater.

IE opacity with CSS

Mon, 12 Apr 2010 00:00:00 GMT

Achieving Internet Explorer (IE) opacity is a bit of an annoyance, no matter how you would like to achieve it. The most common way of doing this is to set a .png file as the background of an HTML element. Unfortunately IE 6 doesn't support .png files without adding javascript to the page to enable .png opacity. It is beneficial to avoid using these files because it unnecessarily adds to the HTML requests.

Work around

There is a fairly simple work-around to this problem. Other browsers (Chrome, Firefox, Opera, Safari) support the rgba CSS3 property, which makes backgrounds with alpha transparency ridiculously easy to implement. There is a similar IE opacity CSS property which has been around since IE 5.5. Unfortunately this solution looks absolutely horrible, and it doesn't pass CSS validation. Validation can still be achieved if this property is added to a [if lte IE 8] stylesheet. I've written an article about browser detection and why you should use [if lte IE 8] instead of [if IE].

The IE opacity / alpha transparency CSS properties look like this:

#example {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#7F516764,endColorStr=#7F516764);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F516764,endColorstr=#7F516764)";
    zoom: 1;
}

As you can see, the filter and the -ms-filter properties are almost identical. IE 8 decided to start using the vendor prefix (Like the other versions should have done from the beginning). The startColorStr and the endColorStr contain the same values in this example because we do not want a gradient. A gradient could be achieved with these IE CSS properties as easily as a normal colour could be implemented. The first two characters are the alpha transparency hex values, and the last 6 are the colour's hex value. It is a bit of an annoying process to calculate the alpha transparency hex value, but here is how it is done.

How would I achieve `background: rgba(0, 0, 0, 0.5)` in IE?

Here is a quick tutorial on what you would do if you wanted a black background with a 50% alpha transparency value. First multiply 255 by that 0.5 So 255 * 0.5 = 127.5 Round that up or down. I rounded it off to 127. Now go to a website that converts decimal to hexadecimal. (It should be 7f if you used 127) The value you would use for the startColorStr and the endColorStr would be #7f000000.

#example {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#7f000000,endColorStr=#7f000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
    zoom: 1;
}

This doesn't look or feel very semantic, but hey, it gets the IE opacity job done and the browser isn't very semantic anyway. Luckily we won't have to deal with any of these IE opacity annoyances in IE 9 since it is going to support CSS3.

Browser detection

Thu, 08 Apr 2010 00:00:00 GMT

Browser detection is evil, but sometimes a necessary evil. In a perfect world, we would create a webpage that looks the same in every browser without browser detection or any other troubles; This is exactly what web standards aims to achieve. Unfortunately IE 6, 7 and 8 doesn't adhere to the standards like they should. This forces us to use browser specific stylesheets.

What's wrong with browser detection?

An example of an immediate problem would be: websites that contain an IE specific stylesheet (I have a few of these out there). IE 9 is going to be released next year and it seems like it is going to be a good browser. Once people start using it, webpages that contain IE specific stylesheets will force IE 9 to adopt the stylesheet too, which will probably throw elements around. An important fix for this would be to change "if IE" statements, to "if less than or equal to IE 8"

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

to:

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

Fortunately it is relatively simple to correct that problem, however it is creating unnecessary work for everyone. Also, there are (I have no idea how many) 1000's of cases where people have used "greater than" browser detection, such as [if gt IE 6] (If Greater Than IE 6). This will cause lots of problems in the future.

IE doesn't release updates as much as other browsers do. Imagine adding Opera only code (css or javascript) to your webpage, only to have to deal with ANOTHER fix very soon afterwards because Opera has updated their browser.

But it's not working in every browser

If something isn't working cross browser, there are a few steps I take to make sure it's not my fault. (Computers only do what we tell them to do)

Step 1 - Validate your xHTML. Download this Webdeveloper firefox plugin, it gives you lots of options including local validation. Incorrect HTML markup is a big cause of cross browser problems. As soon as you are having a problem, check this immediately.

Step 2 - Validate your CSS (CSS3 doesn't validate at the moment, but validate to make sure you haven't made a spelling mistake or omitted something)

Step 3 - Look at what you are trying to do and think about whether it is the most efficient way of doing it. I have had a problem with a navigation menu in firefox 3.5. It worked in every other browser so I thought about browser detection for a moment, but I decided against it. I ended up recreating the navigation menu bar in a more simple manner which fixed the problem (I still don't know what the actual problem was). Always keep your HTML markup as simple as possible.

Can't avoid it?

Obviously there are times where browser detection is the way. I created a yoyo using CSS3 and jQuery in my previous article. In the demo I detected for Safari and added an extra line of text with the following jQuery code:

if ($.browser.safari) {
    $("#content p").append(" And see what happens when you hover over the link on the yoyo.");
}

I did this because webkit based browsers (Safari and Chrome) use certain CSS properties that don't work on other browsers yet. Even though I said 'if the browser is safari', it still works on Chrome as well. This wasn't a problem for me in this specific example, but it's an example of how browser detection can be faulty and why it should be avoided.

Detect for different versions of IE

Target IE 8 and lower (The only time you should target every IE version, or use gt or gte is if you are sure you want to affect future versions with the code)

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

Target everything except IE (I have never used this)

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Target IE 6 only

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-6.css" />
<![endif]-->

You can target any version of IE by adjusting the number after "IE ". 'lte' is an abbreviation for 'Less Than and Equal to'. You can also use 'lt' which means 'Less Than'.

Detect for Opera using jQuery

Use the following jQuery code to add a class of "opera" to your body.

$(document).ready(function() {
    if ($.browser.opera) {
        $("body").addClass("opera");
    }
});

You can target Opera only by adding "opera.body" to the beginning of your CSS selectors. For example:

#header {
    width: 960px;
    height: 350px;
}
body.opera #header {
    border: 3px solid red;
}

In Opera, the #header element will have a width of 960px, a height of 350px and a border of 3px solid red. Other browsers will not have a red 3px border.

Conclusion

It is fairly easy to avoid browser problems (Outside of IE) if you want to. Browser detection is evil and should be avoided at all costs, otherwise it will probably come back to haunt you.

Create a Yoyo with jQuery and CSS3

Tue, 06 Apr 2010 00:00:00 GMT

Haven't you ever just wanted a yoyo on your webpage? A beautiful, animated, spinning yoyo that slides down like a real yoyo would? I know I have never even thought of it and I probably would never have the need for it either, however it is very useful to learn (If you don't already know) how one would go about creating a yoyo so you could use the techniques for other things. View the demo in Safari/Chrome and take full advantage of the CSS3.

Where to start?

The first thing we need to do is create the images. So open up your vector drawing software (Or Photoshop, I prefer vector programs when I need to draw things) and draw a hand that is holding a yoyo. I used a photo and traced the hand. I inserted the 'yoyo' afterwards. The completed image is broken down into multiple images in order to give the viewer the impression that there is some form of depth to it and the jQuery along with the CSS3 will animate it later. In my example the yoyo goes between layer 1 and layer 2 of the hand. Once that is completed, save the different layers as separate images. These are the images I came up with:

The HTML

There is very little HTML markup, so it is pretty easy to understand. Each <div> tag is going to contain a separate background-image and eventually the divs will be absolutely positioned. This means we will need to include a container that will ultimately be relatively positioned. We are also going to include a string <div> (I've never seen a functional yoyo without a string before).

<div id="container">
    <div id="hand-back"></div>
    <div id="hand-front"></div>
    <div id="string"></div>
    <div id="yoyo"><a href="#">{CSS: +; }</a></div>
</div>

The CSS

#container {
    height: 550px;
    width: 331px;
    position: relative;
}
#hand-front {
    background: url(../images/hand-front.png) no-repeat left top;
    height: 169px;
    width: 331px;
    position: absolute;
    left: 0;
    top: 20px;
    z-index: 400;
}
#hand-back {
    background: url(../images/hand-back.png) no-repeat left top;
    height: 99px;
    width: 190px;
    position: absolute;
    left: 128px;
    top: 43px;
    z-index: 100;
}
#string {
    background: #79694c;
    border: 1px solid #3b2f1d;
    height: 20px;
    width: 2px
     position: absolute;
    top: 47px;
    left: 243px;
    z-index: 200;
}
#yoyo {
    background: url(../images/yoyo.png) no-repeat center center;
    height: 150px;
    width: 150px;
    position: absolute;
    left: 169px;
    top: 47px;
    z-index: 300;
}
#yoyo a {
    color: white;
    display: block;
    font-size: 20px;
    font-weight: bold;
    line-height: 150px;
    margin-left: 27px;
}
#yoyo a:hover {
    text-decoration: none;
    text-shadow: 0 0 15px #000;
}
.rotate {
    -webkit-animation-duration:1.1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-name: yoyo;
    -webkit-animation-timing-function:linear;
}
@-webkit-keyframes yoyo {
    from {-webkit-transform:scale(1) rotate(0deg);}
    to {-webkit-transform:scale(1) rotate(360deg);}
}

Most of this CSS is just giving the background, height, position, width and z-index to the corresponding ID which creates our desired image out of the multiple images we have and the '#yoyo a' is just styling and positioning the {CSS: +; } link. The interesting part is the .rotate class. This is the awesome CSS3 that is causing the yoyo to spin in Webkit based browsers (Chrome and Safari). Unfortunately there is no pure CSS way to get an object to spin like this in other browsers.

The jQuery

I've used the jQuery easing plugin to give the yoyo a more visually appealing animation effect.

$(document).ready(function() {
    $("#container").hover(
        function() {
            $("#yoyo").addClass("rotate");
            $("#string")
                .stop()
                .animate({ height: "400px" }, { duration: 1000, easing: "easeOutBack" });
            $("#yoyo")
                .stop()
                .animate({ top: "400px" }, { duration: 1000, easing: "easeOutBack" });
        },
        function() {
            $("#yoyo").removeClass("rotate");
            $("#string")
                .stop()
                .animate({ height: "20px" }, { duration: 600, easing: "easeInOutExpo" });
            $("#yoyo")
                .stop()
                .animate({ top: "47px" }, { duration: 600, easing: "easeInOutExpo" });
        }
    );

    $("#yoyo a").hover(function() {
        $("#yoyo").toggleClass("rotate");
    });
});

Explanation based on line numbers

1: When the DOM is ready
3: When you hover on the #container
4: Add the class of .rotate to #yoyo
5: Animate the current height to 400px within the duration of 1000 milliseconds (1 second) and use easing easeOutBack
6: Animate the current top property to 400px within the duration of 1000 milliseconds and use easing easeOutBack
7: When the object is not being hovered
8: Remove the class of .rotate from #yoyo
9: Animate the current height property to 20px within the duration of 1000 milliseconds and use easing easeInOutExpo
10: Animate the current top property to 47px within the duration of 1000 milliseconds and use easing easeInOutExpo
13: When you hover over #yoyo a
14: Toggle the class .rotate

There we go. A digital yoyo!

How to create a simple horizontal navigation menu from scratch

Mon, 29 Mar 2010 00:00:00 GMT

I have already done the Fading Navigation Menu tutorial, however it is a bit advanced for a beginner. This simple navigation menu tutorial will help you create a very basic horizontal navigation menu using semantic HTML and minimal CSS. You will need to know basic CSS properties and how CSS selectors work to understand the tutorial.

Let's get started.

Step 1 - The HTML

<ul>
    <li>Blog</li>
    <li>Contact</li>
    <li>Freebies</li>
    <li>Tutorials</li>
</ul>

If the above HTML code is all you have on your page, then it should look like this: The next thing to do is to add the <a> links, which will link to the specified pages.

<ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Freebies</a></li>
    <li><a href="#">Tutorials</a></li>
</ul>

Your page should now look like this: That is all the HTML we are going to need. What we have is an Unordered List <ul> which contains List Items <li>, which contains an Anchor link <a>. Our menu needs no more HTML-markup.

Step 2 - The CSS

The first thing we want to do is:

Add a margin and padding reset, always use some kind of CSS reset.
Move the Unordered List away from the edge with a margin - with 'margin: 20px 10px'
Force the List Items to be horizontal - with 'float: left'
Get rid of those pesky black dots - with 'list-style-type: none'

So let's add this to the CSS. (95% of the time I organise my properties in alphabetical order)

* {
    margin: 0;
    padding: 0;
}
ul {
    margin: 20px 10px;
}
ul li {
    float: left;
    list-style-type: none;
}

Next, what we want to achieve is:

Get rid of the underline - with 'text-decoration: none'
Add some padding to give the buttons volume - with 'padding: 10px 20px'
Add a background colour - with 'background: #004b98'
Add a font colour - with 'color: white'
Change the display to 'block' so that the entire <a> is clickable, not just the text (It seems like this only needed for IE6 and IE7)- with 'display: block'
Change the type of font used - with 'font-family: Arial, Helvetica, sans-serif'
Add a hover state

* {
    margin: 0;
    padding: 0;
}
ul {
    margin: 20px 10px;
}
ul li {
    float: left;
    list-style-type: none;
}
ul li a {
    background: #004b98;
    color: white;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
    text-decoration: none;
}
ul li a:hover {
    background: #0069d4;
}

And there you have your own very simple horizontal navigation menu.

Save time – Use a template

Mon, 29 Mar 2010 00:00:00 GMT

I like doing things in an organised fashion, and I'm sure most of you do to. I write my CSS, HTML and jQuery in a certain way which I don't change, unless I decide I've found a more efficient way of doing it. For example, I include the CSS reset in every single thing I work on and I would feel as if something was missing if I didn't, however I have no problem editing the reset if I think it would be more efficient.

I used to follow the following procedure to set up a the basics for creating a website:

Create the HTML file
Create the folders for the "js", "css" and "images" folder.
Copy a reset.css and create a blank style.css
Get the latest jQuery from another project or from jquery.com
Get the jQuery plugins I'm going to be using and edit them accordingly (Such as changing the file path of the images in the CSS)
Link to the external files in the HTML file
Make sure they are linking through properly and make sure the jQuery plugins are working correctly

As you can see, this becomes quite a problem if you have to do this fairly often. What I have done to solve this problem (And I'm sure most people do something like this) is create a website template that contains everything I need. Everything is set up:

The HTML is ready
The CSS is linked and functional
The jQuery and it's plugins are linked and functional

And that is all you need. It saves me loads of time.

My default-template

I have the following linked to my default template:

A link to my favicon.ico
jQuery
- Fancybox
- PNG Fix - Included with IE6 specific HTML code. It's not necessary to load it for every browser.
Default stylesheet - With a reset attached
IE6 only stylesheet
IE only stylesheet

I include these .css and .js files because I use them so often. I use the jQuery PNG fix often because people still want support for IE6 on their web page. Including it inside the IE6 conditional statement forces it to load in IE6 alone, which is perfect. I use Fancybox because it is so awesome, easy to implement and 99% of the time clients love it.

I recommend creating one of these if you haven't already, and to make it easier, I have included my default-template as a download. Modify it to suit your needs and you will end up saving a lot of time.

6 steps to take if your jQuery is not working

Thu, 25 Mar 2010 00:00:00 GMT

1. The file is not there or does not exist

People tend to become upset and/or frustrated (Including me) when something simple doesn't work, such as jQuery not working. Before you do anything, navigate to your jQuery file and check that it is exactly where it should be.

Also make sure that you have the correct html file open - I have actually tried to load files using the incorrect html, so the path would have been correct if I had the correct html file open. Don't ever be too proud to check the absolute basics.

2. Incorrect File Path

This is a common problem and it is the first thing I check when I'm having a javascript problem (I actually do step 1 and 2 with my style.css as well). After checking that the file path is correct, I double check by viewing the page source using Firefox, I then click on the .js link. If it opens up the jQuery file (Double check it is opening the correct file) then the destination is correct. If it does not, or it opens a page-not-found, then I know I have a problem with my file path.

3. Script load order

Help! *jQuery not working, however it is loading perfectly!!!

Make sure that it is the first script loaded on your page. This is very easy to overlook. The problem exists because browsers understand javascript and not stand alone jQuery snippets. jQuery turns our code into normal javascript code, so that the browsers can interpret what we are saying. Javascript libraries are shortcuts. If you were to load a library plugin (extra script file) before the library itself has been loaded, the plugin would be seen as bunch of mumbo-jumbo by the browser. This snippet of code means absolute nothing before the library has been loaded.

4. Plugin not working

Plugins malfunction sometimes, for whatever reason; And people sometimes tend to think that jQuery is not working, which isn't always the case. When it gets this far I think to myself, "Lets get out the big guns". Note: Step 1 and 2 can also be applied to CSS problems. Even though I have tried step 1, step 2 and step 3, I do ANOTHER test to make 100% sure that it is loading properly. 99.999% of the time this is the final test. Firstly, I make sure there are absolutely NO plugins, other libraries or anything javascript related on my page, except for the jQuery library and a little script I write beneath it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("div").css("border", "3px solid red");
    });
</script>

This adds a 3px red border to every single div on the page.

If this works, which it really should, the library is loading correctly. You then know that there is something wrong with the plugin(s) and that it is time for more troubleshooting. If you have more than one plugin, try switching the plugin order (This has worked for me on a few occasions), if it is still unsuccessful then remove each plugin and test until something works. Once you find the problem plugin, download it's latest available version and see if it works.

If the 3px red border does not show up, then it's time to jump to the next step.

5. Javascript library issues

Do not use multiple javascript libraries simultaneously! There are a few reasons to avoid this even besides the conflicts that could occur. More .js libraries means more html requests and more things to load. It doesn't matter what .js library you use, use which ever you prefer more but stick with it throughout your project. There are thousands of jQuery plugins, I would say that 99% of the time there is no need for multiple libraries anyway.

6. Javascript disabled/not supported by browser

Make sure you are using a modern browser, and not IE 5.5 or something old and outdated. It is possible to turn off the javascript support within a browser, and I have had this problem before (I actually turned off javascript support and forgot to turn it back on). jQuery not working by this point? Try viewing the page with a different modern browser and see if there is any difference or make sure that javascript is enabled within the browser. This is a last resort.

Tips

Don't load two different javascript library versions, only one is ever needed.
I have started loading jquery through Google at all times:

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

The only downside to doing this that I can think of is if you are working offline (Obviously it won't load) or if Google goes down for whatever reason.

Step 1, 2 and 3 can be applied to CSS files too. The Step 3 load order could refer to the IE specific stylesheets loading before the main one.
jQuery not working? Then follow the 6 steps again :)
Feel free to comment and ask for help if any is needed.

IE6 Height Problem

Mon, 22 Mar 2010 00:00:00 GMT

As we all know too well, IE6 has many issues, one of which is the IE6 height problem. The outdated browser reads the CSS differently to the modern browsers, and it places emphasis on things that aren't too important. Use IE6 to view the demo IE6 sees the font-size of a div as more important than the actual height of the div. This obviously causes many problems for people since we all learn that if you set the height property of an element in the CSS, it should change accordingly. If it does not, then you have obviously overlooked something. Also, just a side note, IE6 doesn't support min-height and max-height.

The HTML

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

The CSS

.box1 {
    background: blue;
    height: 3px;
    width: 150px;
}
.box2 {
    background: black;
    height: 3px;
    width: 150px;
    font-size: 0;
}
.box3 {
    background: white;
    height: 3px;
    width: 150px;
    overflow: hidden;
}

IE6 Height Solution

If you looked at the demo using IE6, you will see that the height of box1 is about 18px and the other boxes are both 3px high (Like they should be). Box 1: The classic IE6 height problem. It is meant to be 3 pixels high, but it is defaulting to the font-size assigned to the box. Box 2: Since the minimum height is the font-size, why not give the box a font-size of 0? This will force IE6 to look at the height we assign instead of the font-size as a minimum height. Box 3: We have set the height to 3px, so anything over that is an overflow. If we set the overflow to hidden, it hides the excess of the div. We have to force ie6 to behave like a modern browser. Fortunately it is generally relatively simple.

IE6 Hover Fix

Mon, 22 Mar 2010 00:00:00 GMT

The :hover pseudo-class is a very important CSS function. It can be used to highlight text, table-cells, divs, images and much more. Without it websites would be very bland and boring. Unfortunately, there is an IE6 hover problem which greatly affects how we can use the :hover pseudo class.

All modern browsers support the hover pseudo-class properly and it functions properly on any html element, however in IE6 it can only be applied to <a> links that contain the href attribute. This problem forces us to either change what we were thinking of doing, or find another way to complete it. Luckily we can fix this terrible IE6 hover problem using the almighty jQuery. All we need to do is add a simple jQuery function that adds a class to our target element on hover and removes it when we mouse off.

The jQuery

$(document).ready(function(){
    //Highlight the box
    $(".box").hover(function() ;{
        $(this).toggleClass("active");
    });
});

What we are saying is

When the DOM is ready
And you hover over .box
Toggle the class named .active
So when the document has loaded, and you hover over .box, it then adds the class of .active to the list of classes it already has (if any at all). This is a very straight forward, helpful and easy to understand bit of jQuery that completely eliminates the IE6 hover issues. We would have to give the .active class CSS properties, otherwise our jQuery is adding a class that won't affect the element due to lack of CSS properties.

The CSS

.box {
    background: black;
    height: 200px;
    width: 200px;
}
.active {
    background: white;
}

There we go. If you have to implement this code, it would work exactly like the IE6 hover pseudo class should work and how all modern browsers already work. I think this is a very simple, effective and elegant way of dealing with the IE6 hover problem. If you are new to jQuery, then this is probably a good place to start learning it since it is very easy to understand what's going on.

Keep in mind You could run into some CSS specificity conflicts. This occurs if an element has two or more CSS rules of equal specificity value that point towards it. Such as:

<div class="content">
    <div class="example problem"></div>
</div>

.example {
    background: green;
    height: 500px;
    width: 300px;
}
.problem {
    background: black;
    height: 600px;
    width: 700px;
}

The class that is further in the CSS document will get the priority, so the .problem class would override the .example class. But you could easily fix it by raising the specificity value of the class you would like to dominate, for example:

.content .example {
    background: green;
    height: 500px;
    width: 300px;
}
.problem {
    background: black;
    height: 600px;
    width: 700px;
}

In this scenario the box would take the properties of the class .example over the .problem properties.

SlideToggle()

Tue, 16 Mar 2010 00:00:00 GMT

The slideToggle() effect and the toggleClass() attribute are very useful jQuery tools. I will show you how to quickly implement this into your website and perhaps give you ideas on how you can add this to your already existing websites.

Step 1 - What am I planning on doing?

What I want to do is add a slideToggle() effect to the {CSS: +; DEMOPAGE; } logo and another seperate slideToggle() effect to the CSS-text image behind it.

Step 2 - The HTML

<div id="page-wrap">
    <!--used to center everything-->
    <div id="header">
        <a href="http://css-plus.com" id="home-link">CSS Plus</a
        ><!-- {CSS: +; } logo -->
    </div>
    <div id="content">
        <div class="button-wrap">
            <!-- used to align the buttons nicely -->
            <a class="toggle-logo" href="#">Toggle logo</a
            ><!-- button 1 -->
            <a class="toggle-header" href="#">Toggle header</a
            ><!-- button 2 -->
        </div>
    </div>
</div>

Step 3 - The CSS

/* reset margin and padding */
* {
    margin: 0;
    padding: 0;
}
body {
    background: #79694c url(../../images/bg.jpg) repeat-x left top;
    font-family: sans-serif;
    overflow-y: scroll;
}
.page-wrap {
    margin: 0 auto;
    position: relative;
    min-width: 991px;
    max-width: 1024px;
}
/*
        Basic Elements
    */
.header {
    background: url(../../images/css-bg.gif) no-repeat 50px top;
    height: 127px;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    top: 39px;
} /* add css-text image and set header position */
.home-link {
    background: url(../../images/logo.gif) no-repeat left 5px;
    display: block;
    height: 127px;
    width: 878px;
    text-indent: -9999px;
} /* add logo */
.content {
    width: 960px;
    position: absolute;
    top: 224px;
}
/*
        slideToggle() demo
    */
.content .button-wrap {
    margin: 10px 0 0 0;
    width: 960px;
}
/* add button styling */
.content .button-wrap a {
    background: #006ec1;
    border: 1px solid #034e86;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}
.content .button-wrap a.toggle-header {
    float: right;
}
.content .button-wrap a.toggle-logo {
    float: left;
}
/* add active state styling*/
.content .button-wrap a.active {
    background: #8f0000;
    border: 1px solid #450000;
}
/* this will be explained later on */
.content .button-wrap .hidden {
    display: none;
}

The CSS is pretty straightforward.

Step 4 - The jQuery

$(document).ready(function() {
    $(".content .button-wrap a.toggle-logo").click(function() {
        // When you click on a.toggle-logo
        $(".header a.home-link").slideToggle("slow"); // Toggle the "slow" slide effect on the logo
        $(this).toggleClass("active"); // Toggle the active button state
        return false; // Prevents browser from jumping to link anchor
    });

    $(".content .button-wrap a.toggle-header").click(function() {
        // When you click on a.toggle-header
        $(".header").slideToggle("slow"); // Toggle the "slow" slide effect on .header
        $(this).toggleClass("active"); // Toggle the active button state
        return false; // Prevents browser from jumping to link anchor
    });
});

With just 8 short lines of jQuery code we have two interactive buttons.

A problem you say?

I was playing around with the buttons; Turning one off and then the other one on, etc. and I found that if I clicked the "Toggle logo", then "Toggle header", then "Toggle logo" again, the logo would still be "off", which is what we want. However, if we clicked on "Toggle header", "Toggle logo" then "Toggle header" again, the logo was still there but the button was on active state (red). To fix this I added 1 more line to the jQuery, this is also where I make use of "hidden" class I declared in the CSS.

$(".content .button-wrap a.toggle-logo").toggleClass("hidden");

What that line of jQuery does is: whenever you click on the "Toggle header" button, it toggles the "hidden" class on the "Toggle logo" button. That way it prevents the little problem we have by hiding the one button when the other one is clicked. So the final jQuery code looks like this:

$(document).ready(function() {
    $(".content .button-wrap a.toggle-logo").click(function() {
        $(".header a.home-link").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });

    $(".content .button-wrap a.toggle-header").click(function() {
        $(".header").slideToggle("slow");
        $(this).toggleClass("active");
        // Toggles the "hidden" class on a.toggle-logo
        $(".content .button-wrap a.toggle-logo").toggleClass("hidden");
        return false;
    });
});

Fading Navigation Menu

Mon, 15 Mar 2010 00:00:00 GMT

For my first tutorial, I have decided on building a simple, yet awesome navigation menu using CSS sprites. After we are done with this I will add a bit of jquery code to give it a visually appealing fade effect. I have included the Photoshop .psd file I created in the download under the images folder to make it easier for you to create your own Fading Navigation Menu.

What is a sprite?

In case you aren't sure, a CSS sprite is a large image, made up of all the smaller images you wish to use on your webpage. The benefits of using CSS sprites include:

Page load speed
- Reduces HTTP requests
- Each image file contains extra unnecessary information. Using one image saves on file size.
Save on editing time
- If I'm working on a navigation menu and I need to edit the hover states in photoshop, all I do is edit one of the layer styles and paste it over the rest of the button hover states, save and all is done. Doing this takes a matter of seconds.
Easier to organize
- The more files there are, the greater the margin for confusion and error is. Also, I don't enjoy a messy work environment.

Step 1 - The HTML

Alright, let's get started. First thing we need to do is create the html.

<ul class="nav">
    <li class="home"><a href="#">Blog</a></li>
    <li class="about"><a href="#">About</a></li>
    <li class="contact"><a href="#">Contact</a></li>
    <li class="freebies"><a href="#">Freebies</a></li>
</ul>

It is a very simple unordered list and I have given each of the list items class names so that we can target them individually. The sprite we are going to be using is this one that I created: I usually create a red grid around the items to make it easier to determine where the one 'image' begins and the other one ends. We give the CSS the x and y co-ordinates of our sprite, this is how it knows which area to look at. Since each list item has a different class, we can target each of them and give them different sprite background-positions.

Step 2 - The CSS

I always import a css reset. I use a modified version of Eric Mayer's CSS reset which include with these downloads.

.nav li,
.nav a {
    background: url(../images/nav-sprite.png) no-repeat left top;
    height: 67px;
    width: 192px;
} /* We give the <li> and <a> the sprite as the background and set the button dimensions */
.nav li {
    float: left;
    border: 1px solid #243e3b;
    border-left: none;
}
.nav li.home {
    border-left: 1px solid #243e3b;
}
.nav a {
    display: block;
    text-indent: -9999px;
}

.nav li.home a {
    background-position: -1px -1px;
} /* Here we set the background/sprite position */
.nav li.about a {
    background-position: -194px -1px;
}
.nav li.contact a {
    background-position: -387px -1px;
}
.nav li.freebies a {
    background-position: -580px -1px;
}

.nav li.home a:hover {
    background-position: -1px -69px;
} /* And now the hover background-position position */
.nav li.about a:hover {
    background-position: -194px -69px;
}
.nav li.contact a:hover {
    background-position: -387px -69px;
}
.nav li.freebies a:hover {
    background-position: -580px -69px;
}

That's it! We have a working CSS sprite navigation menu. Demo CSS version / Download CSS version

Step 3 - The jQuery

Before we do anything more, remember to always include the jQuery library when using any jQuery plugins or code. We have to slightly modify the CSS before we can make us of the cool fade effect. First we have to decide how we will go about creating the effect. I think the most efficient way would be to give the <li> item the default background state and the <a> link the hover state with an opacity of 0. When we hover it will fade to an opacity of 1, and when we mouse off it will fade back to 0, giving the fade effect. We slightly modify the CSS selectors to look like this:

.nav li,
.nav a {
    background: url(../images/nav-sprite.png) no-repeat left top;
    height: 67px;
    width: 192px;
}
.nav li {
    float: left;
    border: 1px solid #243e3b;
    border-left: none;
}
.nav a {
    display: block;
    text-indent: -9999px;
}

.nav li.home {
    background-position: -1px -1px;
    border-left: 1px solid #243e3b;
}
.nav li.about {
    background-position: -194px -1px;
}
.nav li.contact {
    background-position: -387px -1px;
}
.nav li.freebies {
    background-position: -580px -1px;
}

.nav li.home a {
    background-position: -1px -69px;
}
.nav li.about a {
    background-position: -194px -69px;
}
.nav li.contact a {
    background-position: -387px -69px;
}
.nav li.freebies a {
    background-position: -580px -69px;
}

$(document).ready(function() {
    //Set the anchor link opacity to 0 and begin hover function
    $(".nav a")
        .css({ opacity: 0 })
        .hover(
            function() {
                //Fade to an opacity of 1 at a speed of 200ms
                $(this)
                    .stop()
                    .animate({ opacity: 1 }, 200);
                //On mouse-off
            },
            function() {
                //Fade to an opacity of 0 at a speed of 100ms
                $(this)
                    .stop()
                    .animate({ opacity: 0 }, 100);
            }
        );
});

stop() is necessary so that the animations don't queue up if you mouse-on and off repeatedly very quickly. And we are done in 3 easy steps. Pretty simple right?

CSS Plus Launched

Wed, 10 Mar 2010 00:00:00 GMT

Hi everyone. This is my first article on css-plus.com. I am going to be fine tuning a few things before I start on the awesome tutorials, articles and freebies. I'm pretty excited to get things going.

Come back and check on the progress!

CSS-Plus RSS Feed

Understanding The UTF-8 Encoding Algorithm in Rust

What is UTF-8?

UTF-8 Encoding Algorithm

Simple Character

Complex character

Bonus section

More about bytes and chars

UTF-8 Encoding Ranges

Conclusion

Using agenix on a non-NixOS Linux Home Manager Nix Flake

What is agenix?

Steps

Debugging

Conclusion

Develop on a case sensitive file-system

Symbolic link concept

Understanding Case Sensitivity

The Advantages of Case Sensitivity for Developers

Setting Up a Case-Sensitive File System and moving across your work

Setting Up a Case-Sensitive File System on macOS

Setting Up a Case-Sensitive File System on Linux

Moving your work across to the partition

Conclusion

My Journey to the Perfect Text-Editor - Part 2

Atom (2014 - 2015)

Pros

Cons

Conclusion

VSCode (2015 - 2021)

My issues with Microsoft at the time

Initial thoughts after use

Conclusion

Vim (2021 - 2022)

Not a final conclusion, since I hadn't swapped to Vim

What was stopping me from switching to Vim as my primary editor

Switching to Vim full-time

Conclusion

Neovim (2022 - Now)

Vim9Script

Conclusion

Honorable mentions

Emacs

IntelliJ IDEA

Vi-Mode plugins in text-editors?

Comments I had received on the original article

Conclusion

Permissions issue with Intellij-Idea on Linux

Problem

Solution

How to merge two MySQL WordPress databases

Problems were faced

Bash script

How to install Sass and Compass

Installing

Install on Windows

Install on OS X/Linux

But... I don't like the terminal/command prompt

Create your own jQuery Image Slider

The HTML

The CSS

The jQuery/Javascript

Summary of javascript/jQuery methods used:

$(".gallery__item").each()

totalWidth = totalWidth + $(this).outerWidth(true);

function toGalleryItem($targetItem) {

if ($targetItem.length) {

addClass and removeClass

$(".gallery").animate()

inline-block: The complete story

inline-block is your missing friend

inline-block vertically center (IBVC) hack

Problems

vertical-align property

Space characters

IE7 hand-holding

Alternative methods

Centering navigation items

Article block listings

More navigation

`$(".gallery__item").each()`

`totalWidth = totalWidth + $(this).outerWidth(true);`

`function toGalleryItem($targetItem) {`

`if ($targetItem.length) {`

`addClass` and `removeClass`

`$(".gallery").animate()`

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

What is `border-image`?

`border-image-source`

`border-image-slice`

`border-image-width` & `border-image-outset`

`border-image-width`

`border-image-outset`

`border-image-repeat`