Web designers may use a number of techniques, approaches and philosophies while creating compelling and engaging digital interfaces. Each designer has their own preferences – some prefer to work from the top down, beginning with the most basic elements and building their product down to the last detail. This approach is the most common and often yields a well-thought out, quality product.
If you are looking for in-depth articles on the inner workings of flexbox, or a comprehensive explanation for using CSS regions, then this is definitely not the post for you. Instead, we have squarely put our focus on those CSS tutorials that not only make the smaller details of the web visually appealing, but are also really useful. You know what we mean… fantastic text effects, innovative button styles, space-saving navigation systems, subtly animated form elements… that kind of thing.
Flexible boxes or flexbox, is the latest method for controlling layouts in CSS. Using grids that are ‘flexible’ is so easy to predict how each element behaves on different screen sizes. Its greatest feature is its ability to manipulate an item’s width/height to occupy all the space within its container (also known as a “flex container”) – otherwise, it shrinks to prevent overflow.
The past few years have seen a wide variety of methods for creating web page layouts. CSS Grid is one of the newest and probably the most game-changing layout technique at our disposal. If you haven’t begun tinkering with it yet, now’s the time. It is a wildly different way of thinking about positioning content, and it currently has nearly full support across all popular web browsers.
This is part 1 of a series of tutorials about practical use cases of CSS transitions, transforms, and animations. In this tutorial, we’ll look at a “flipping card” scenario, and implementation variations.
Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller screens.
In this tutorial, we take a look at a beautiful parallax scrolling effect in the simplest of ways, with stationary backgrounds and scrolling content.
Do you ever feel weird when everyone around you is doing something you would ordinarily think is wrong [or not quite ideal at the very least], but somehow no one seems to want to say anything for one reason or another? It’s a very strange feeling to see everyone doing their best impression of a hapless observer. It kind of reminds of me of that old fable, “The Emperor’s New Clothes.”
With CSS3, we can manage media queries, utilize better background images and even handle animations that can be loaded faster on your website – depending on the host you use. These features have made the life of every web designer and developer easier.
The dialog window is one of the most commonly used elements in a website’s user interface design. It is used for multiple purposes, including displaying notifications, carrying a subscription form, alerting of errors/warnings, and drawing a visitor’s attention to vital pieces of information. When dialog windows are designed effectively and used right, they can ease the user’s task.
I’m always trying to learn new things. However, I also try to learn ways to improve the way I already do things. Both at my full-time gig and for client side-projects, the thing I’ve always wanted to improve on was my CSS. I’ve always felt I’m pretty good when it comes to CSS, but I’ve always found it messy to read, and often hard to maintain.
A few months ago, we at Tailor Brands decided to make a concerted effort to improve the consistency of our site. Our codebase had grown to over 50 files and littered among them were bunches of font sizes, dozens of different colors, and a mess of other inconsistencies. The inconsistencies meant that our design and tech teams had to spend extra time figuring out sizes and colors and so on.