Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that. But, what if you don’t want a perfectly vertical gradient? Like you want just the top left corner… continue reading

CSS & JS Table Examples From CodePen

<Table> has always been a difficult HTML element to style across multiple browsers. But with CSS and JS you can easily achieve that and can create impressive table designs that fit your project. Here’s a list of some of the best CSS and JS tables I found on CodePen. Accordion CSS Table Mobile friendly accordion… continue reading

Styling elements based on sibling count

The original idea belongs to André Luís, but I think it could be improved to be much less verbose. André’s solution is like this: /* one item */ li:nth-child(1):nth-last-child(1) { width: 100%; } /* two items */ li:nth-child(1):nth-last-child(2), li:nth-child(2):nth-last-child(1) { width: 50%; } /* three items */ li:nth-child(1):nth-last-child(3), li:nth-child(2):nth-last-child(2), li:nth-child(3):nth-last-child(1) { width: 33.3333%; } /*… continue reading

CSS Timeline Examples From CodePen

With the emergence of social media, timelines have started to become popular and be used in other type of websites, such as blogs, portfolios, news portals, weather apps and many more. With the help of CSS & JS you can create stunning timelines that can be used in your current and future projects. That’s why… continue reading

CSS Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. Source: Animating Border | CSS-Tricks

CSS Media Queries for iPads & iPhones

Many times I’ve had to design responsive websites targeting specific devices with CSS media queries, and not just base the break points from the site’s content. Because of this, I’ve ended up with a somewhat large list of CSS media queries for typical devices over the past year or two. I’ve posted these media queries… continue reading

Front End Job Interview Q&A Collection: CSS

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. While there are some existing resources to help front end developers in preparing for interviews, they aren’t as abundant as… continue reading

The invisible parts of CSS

If you use CSS in your daily work, your primary goal is probably focused around making things ‘look right’. How this is achieved is often far less important than the end result. This means we care less about how CSS works than the correct syntax and visual results. You may not have realised it, but… continue reading