Articles > CSS


3 Reasons Why You Shouldn’t Rely on CSS Variables

During the recent years, CSS variables have sparked a lot of debate. On one hand, there are those who have been asking for them to be included and finding various workarounds to add a more programmatic approach to CSS. On the other side of the coin are those who argue that CSS variables have no place in a language that is supposed to handle the presentation of elements. However, with the release of Chrome 49 and Firefox 43, it’s clear that CSS variables are now available in the form of custom properties and...

Using PostCSS with Images

PostCSS is a CSS post-processor engine that uses JavaScript plugins to enable the transformation of regular CSS. These plugins are very useful in PostCSS and allow one to use them in different and exciting tasks such as working with images, adding variables, nesting, conditionals and transpiling and prefixing CSS to work in older browsers. One of the most important things that comes with PostCSS is that it offers developers a modular approach, meaning that they can install only the plugins that they...

10 Pure CSS Modal Window Snippets

Modal windows were always the realm of JavaScript and there are plenty of scripts to try. But with CSS3 it’s even easier to create a modal in pure CSS. The effects are somewhat limited but you can still make an excellent experience without relying on scripting. Most of these CSS examples are scattered to various corners of the web so I’ve curated some of the best ones here. These vary from simple code snippets to more thorough libraries but they’re all open source and reusable. 1. CSS Modal...

Transitions in Space

A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs Animations ... Transitions are a great way to smooth the changes from one state to another, and back again, in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t...

The Important Things About !important

CSS rules were made to be broken, or at least that’s the idea behind !important. !important is a CSS rule that makes it possible to override other previous styles spread across multiple style sheets. !important essentially defines something as important (imagine that!), ignoring subsequent/conflicting rules. It makes the CSS style with the !important designation the one that counts most, nullifying any others. Essentially, it gives a CSS value more weight than it otherwise would normally...

Will CSS Houdini revolutionize web development?

Browser development has often seemed like an endless cycle of disappointment for wed developers. A new standard is recommended, and maybe one browser implements it as a feature. It looks cool. But we can’t allow ourselves to get excited... not yet. That way lies pain, sadness, and five years to a decade of waiting for the feature to become viable. Remember how long it took us just to get working transparent .PNGs in every browser? Yeah. That took a while. Well, that could all be changed in a big way, sort...

Underappreciated frameworks part 2: spaceBase

This is a part of series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. In the first article in this series, I ranted about the wonders of Titon Toolkit. I loved it because it was made to be customized, to be abused, and built upon. Well, I’ll try not to rant about that sort of thing too much, because it’s a feature common to a few of the frameworks that I’ve selected for this series, including today’s. It’s called spaceBase, and...

Avalanche CSS grid system debuts

Colour Garden, the brainchild of front-end web developer Tom Hare, from Cambridge, England, has released Avalanche, a CSS grid system that’s responsive, SASS-based, extremely clean and powerful. Sounds too good to be true? We look at it in more depth. For a grid system to be well-received, it must have many benefits, and Avalanche promises plenty. They include: A flexible naming convention ... Your width class names now come with three naming conventions: fraction (1/4), percentage (25) and...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress