CSS Pixel Art Explained

Pixelated eyeball drawn in pure CSS

There are endless ways to create pixel art including the use of image editors like Photoshop, and it’s also possible in CSS! In this post, I will show you how to create CSS pixel art. Some notable examples include these Super Mario Bros. sprites by Una Kravets and this animated bat by Tim Guo.

We’ll use a grid to assist in locating spaces for pixels and placing them. Then, we’ll draw something as easy as a short line just to understand how it works. Then as a more complete yet simple example for this post, I’ll break down some code for a small eyeball I created above.

Read more…

Posted in: CSS


Twitter Character Limit in Vanilla JavaScript

If you are on Twitter, then you are familiar with the 140-character limit for Tweets. The Twitter character limit is based on the SMS support of 160 characters except that 20 characters are reserved for the sender’s name. Many websites use very similar functions on forms to restrain the size of data being sent to a server or database, and they use them for both text fields or textareas.

In this post, we’ll create a character limit script that’ll work very much like Twitter’s. It’ll fire when you press down on a key and also change the counter text color red when the user is about to reach the limit by a certain number of characters.

Read more…

Posted in: JavaScript


iOS Keyboard Recreated in HTML, CSS, and jQuery

Over a long period of time, Apple has gradually changed the appearance of the iOS keyboard. It has evolved from using gradients and engraved key labels to a much flatter look while the layouts have been basically the same.

iOS keyboard evolution

In this post, I will show you how to create working replica of the latest iOS keyboard for fun in HTML, CSS, and jQuery. It is the one on the iPhone and iPod Touch. You won’t see special buttons like the language (globe) button because the typing functionality and the main keyboard layouts will be the focus.

Read more…

Posted in: CSS, HTML, JavaScript