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.
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
Turning CSS grid into clickable tabs with simple jQuery Clickable Tabs are a great way to display information. It's interactive and more engaging. I would like to create clickable tabs using CSS grid with simple jQuery in this post. In this example, we will have a...read more
CSS grid responsive layouts from stacked blocks to 3 columns I would like to set up a simple CSS grid rule that is responsive to the screen sizes. This can be easily achieved by using CSS @media Rule and CSS grid. In this example, the CSS grid will have one column for...read more
CSS grid can make webpage layouts so simple. The simplest CSS modular can be achieved easily using CSS grid, with its flexibility and possibilities. When I design web pages, I always try to find the simplest CSS modular as webpages should be light and shouldn't take...read more
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
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 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
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
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
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