Codebook

In website design the knowledge about technologies behind the scene plays a big part and we always learn and try to incorporate the latest techniques in our design process.

Codebook is our collection of various practical code samples we have learned and enjoyed applying to our own projects and other web related work.

Background image moving horizontally as scrolling down

Make a background image move horizontally as you scroll down with simple jQuery. Parallax effects are a brilliant trick to use when you want to show off a beautiful image. It's visually more engaging by giving the web page a depth. However, the parallax effects are...

read more

Create Rotating 3D Letter W with CSS only

CSS 3d property is a great way to create simple rotating objects. You might have come across a CSS cube. If you have not, here is a comprehensive article by David Walsh. After seeing the CSS cube, I wanted to apply the same technique to the letter 'W', so it can be...

read more

Turning Div Elements into Numbers

Easy way to turn a series of div elements into a sequence of numbers with a simple CSS rule. Ever wondered how to have numbers instead of dots for your slider navigation option? Sliders are usually the first thing you see on most websites. I have used number of...

read more

Slide-in Page Layout with CSS Animation

Slide-in text information panel when 'more-info' button clicked. This is a modern layout example suitable for a page with lots of text information. Too much text on a page can be a bit daunting to look at sometimes. Personally I prefer web pages with less text. To...

read more

Header Image Parallax Scrolling Effect with CSS

I am going to create a parallax scrolling effect using CSS background-image position. When we create a parallax image banner with CSS we usually use 'background-attachment: fixed;' style. I like the fixed image effect but the fixed image is not as effective as the...

read more

Search Icon CSS Animation

Let's have a look at how to add an animation effect to a search icon using CSS transition. It's essential to have icons designed in a same style when you build a website. Consistency is the key for a good design, and icons are not an exception. So we will make a...

read more

Burger Menu Icon Animation

I am going to show you how to add a simple animation effect to the burger menu icon. The burger menu icon has become so popular as more people browse the internet on their mobile devices. There are so many variations of animating the burger menu icon. I am going to...

read more