In a website or application, arrows can determine how you navigate them by performing specific actions like “go to next page”, indicating to scroll “top or bottom, left or right” and many other. With the help of CSS pseudo-elements and borders, it’s easy to create different arrow styles that will look great on both mobile and desktop. So if you’re currently using arrow images in your projects you can easily replace them with CSS arrows. Doing so, will reduce the number of requests when loading a website or web app.

Grid layouts are fundamental to the design of websites, and the CSS Grid module is the most powerful and easiest tool for creating it.

The module has also gotten native support by the major browsers (Safari, Chrome, Firefox) this year, so I believe that all front-end developer will have to learn this technology in the not too distant future.

sunset water forest sand snow art flowers fire black and white

By Val Head

I hope you enjoy the book! All the example files can be found in the live example codepen collection. (Bookmark that so you can reference them as you read.)

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.

Animating elements in your mobile applications is easy.

Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people who don’t really understand the real reasons why those practices exist and are so vigorously endorsed.

The Basics of Node-KSS

To achieve our goals of a platform agnostic, low-friction style guide, we landed on kss-node, which is itself a Node.js implementation of Knyle Style Sheets (KSS), a Ruby library that:

... provides a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format.

The basic principle is that your style guide is generated via comments you create in your CSS, SCSS, Sass, LESS, etc.

People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:

My favorite CSS “trick” would have to be these 3 lines of CSS:

• { background-color: rgba(0,255,0,0.1); }

I’ve been using this snippet for years! It makes debugging layouts a breeze and is quite insightful when dealing with the box model.

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.