Articles > CSS


How to Create a Responsive Image Gallery with Flexbox

Flexbox is a CSS layout module that makes the creation of fully flexible user interfaces possible. It offers an easy-to-use alternative to floats and a couple of jQuery plugins such as image gallery libraries as well. Flexbox is an ideal choice for several typical CSS tasks and fits especially well with one-dimensional layouts. In this article, we will look into how to use flexbox to create a responsive image gallery that looks well at every viewport size. 1. Create the HTML ... First, let's create the...

10 Best Sass Mixins for Web Developers

Currently, Sass is the most popular CSS preprocessor among web developers. It allows you to introduce programmatic logic to your CSS code and make use of advanced features such as variables, mixins, functions, inheritance, nesting, and others. Mixins are probably the most popular feature of Sass, as they let you create groups of CSS declarations that you can easily reuse whenever you need. With mixins, you can save a lot of time, avoid repetitions, and make your code more readable. In this article,...

How to Create a CSS Grid Step-by-Step

The CSS Grid Layout Module has quickly got traction among front-end developers. It's a new web standard that allows us to create two-dimensional layouts with pure CSS. Imagine a grid system similar to Bootstrap or Foundation, that makes it possible to lay out web pages without using additional libraries or external grid systems. With the CSS Grid, we can lay out elements on the page along two axes—horizontally and vertically. In this article, we'll look into how to create a CSS Grid step-by-step....

6 JS Effects That Can Be Achieved With Pure CSS

Look, people keep using JavaScript when they just don’t need to. Some might argue that it’s okay for JS to be a requirement for any given website nowadays, but does it really have to be? If your site has little-to-no app features, do you really have to use JavaScript for all of your fancy schmancy effects? Not always, no. There are already hundreds of examples of pure CSS implementations of common JavaScript effects. Chain some of them together, and you can get some pretty advanced animations and other...

6 Ways to Organize Your CSS

So you’re getting started with CSS, and you’re having a little trouble keeping it organized. Well, CSS has an inherent organization method that is right in the name: The Cascade. Whatever you write first will impact everything that comes after it; and it can all be overridden where needed. That, of course, is predicated on the idea that you’re building a small, static HTML site in 1998-to-early-2000s. Those were the days. Get off my lawn. Don’t get me wrong. The Cascade is as important as ever,...

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