WebMadeWell always try to incorporate the latest web technologies in our design process to create a better web user experience. Codebook is a collection of web design code samples and techniques we have learned and applied to our website projects.

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...

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...

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...

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...

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