Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

In the first article in this series, I took a look at how to create a grid container and the various properties applied to the parent element that make up your grid. Once you have a grid, you have a set of grid lines. In this article, you will learn how to place items against those lines by adding properties to the direct children of the grid container.

Learn how to bring animation to your web projects https://cssanimation.rocks

• Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.

The inputmode attribute that helps browsers on devices with on-screen keyboards decide which keyboard to display (e.g. telephone, numeric, email, search) has been around for long, but it wasn’t until a few months ago that Safari for iOS and Chrome for Android adopted it. Time to get familiar with the concept. Christian Oliff’s article “Everything You Wanted To Know About inputmode” is a great primer to dive deeper into the attribute and how to make use of it. (cm)

The answer is physics. Specifically Newtonian physics, the branch of science dedicated to apples falling from trees onto scientists, also referred to as classical mechanics.

Buttons normally have those traits in common: font style, font size, font color, button color, button size, borders, rounded corners, drop shadow or glow effects, hover state and animations.

If we try to change too many of these traits, the buttons might feel too foreign to the general design of the project, and in this case the user will just click the most distinct one, and we’re basically back to just one CTA button.

Many people exclusively use keyboards to navigate, and rely on the focus state to know where they are on the page.

There's a huge variety of reasons why someone might use a keyboard over a mouse, and for many, using the mouse as a fallback just isn't an option.

Since the declaration is not context sensitive, any correct application of the margin is a matter of luck. If the paragraph is proceeded by another element, the effect is desirable. But a :last-child paragraph produces a redundant margin. Inside a padded parent element, this redundant margin combines with the parent’s padding to produce double the intended space. This is just one problem this approach produces.

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

An Exhaustive List of all the Elements you need to have/test Before Launching your Website To Production.

On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Items will be (unbeknownst to the user) rendered from top to bottom and someone parsing the grid from left to right will read the boxes in a somewhat arbitrary order, for example 1, 3, 6, 2, 4, 7, 8, 5, and so on so forth.

Create animation magic using keyframes, animation properties like timing, delay, play state, animation-count, iteration count, direction, fill mode and will-change.

As a designer, I love coming across fun animations when visiting a site, and I have definitely been seeing more and more of them lately. Animations take illustrations and icons to the next level, making a site that much more engaging. While they are obviously attractive to look at, they also serve a functional purpose, captivating visitors and encouraging them to interact with the content.

A curated collection of dark UI to inspire you in your product design process.
Even more examples of dark UI could be found on our amazing visual search.

Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects:

Scale the hovered item
Fade out the siblings