Blog of Soh Tanaka

Simple Tabs w/ CSS & jQuery

I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I'm not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a ...

Accordion & Toggle Elements - Icon Placement

A couple of weeks ago, a co-worker and I had a nice little debate about whether the "+" / " -" for an accordion/toggle element should be left aligned or right aligned. Following my instinct, I felt it was appropriate that it should be left aligned since ...

CSS Beginners Do’s and Dont’s Part 2

This is the second part to my previous article "CSS Beginners Do’s and Dont’s Part 1", if you haven't checked it out yet now is a good time. In part one, I went over general tips and reminders, in this article I would like to go over more of the ...

Guest Post - Sexy Drop Down Menu

I recently wrote a tutorial on creating a jQuery driven drop down menu on www.Noupe.com. Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically ...

Smart Columns w/ CSS & jQuery

As I observe other liquid based websites, I see two commonly used techniques on displaying columns, the fixed columns and the liquid columns. There are drawbacks to both that I would like to point out, and later would like to pitch my solution. Fixed Columns The great thing about having fixed columns ...

Always Backup Your Files and Database!

I just want to do a recap of what happened about a week ago. I had been sharing a dedicated machine with my partner for a few months, until one Friday morning, the site just never came up. I had assumed it had something to do with exceeding bandwidth and ...

Simple Page Peel Effect with jQuery & CSS

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery. View Demo 1. HTML - Page Peel Wireframe The "pageflip" div will ...

Guest Post - Creating an Image Rotator

This is my second article over at designm.ag. An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your ...

Quick Interview with Yours Truly

A couple of weeks ago, Chris Coyier from www.CSS-Tricks.com had emailed me asking to do a quick interview. I was very honored that he had considered me for an interview since I am a big fan and long time reader of CSS Tricks. I must say that I have learned ...

CSS Beginners Do’s and Dont’s Part 1

As I mentor some friends who's learning CSS, I tend to repeat myself when asked for some advice. Here are 5 things that I would recommend to better yourself as a designer and developer. 1. DO Crossbrowser Check Often (Very Often!) There have been many incidents where someone asks for ...