Tag: Flexbox

A Comprehensive Guide to Flexbox Ordering & Reordering

The flexbox layout module allows us to lay out flex items in any order and direction. Flexbox ordering is, in fact, easier than ordering with floats or CSS grid, even if you might not think so at first. As flexbox is a one-dimensional layout model, as opposed to CSS grid which is two-dimensional, you only have… Continue reading A Comprehensive Guide to Flexbox Ordering & Reordering

A Comprehensive Guide to Flexbox Alignment

Alignment is probably the most confusing aspect of flexbox. The flexbox layout module has a handful of alignment properties that behave differently under different circumstances, and when using them you might not necessarily understand what is happening or why. However, if you know what to pay attention to, alignment is less complicated than it first… Continue reading A Comprehensive Guide to Flexbox Alignment

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following: The effect is built up gradually and works on all the up-to-date browsers like Chrome, Safari, Firefox and Opera. Older browsers simply get some yellow squares. Step 1: The HTML and… Continue reading Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

Flexbox Align: When to Use Auto Margins Instead of Flexbox Center

Flexbox alignment properties are superb and they solve lots of layout problems, especially where the common “vertical and horizontal center” layout is needed. However, there are times when aligning with auto margins is safer and more flexible. This tutorial will show you when! Get Started with Flexbox If you’re just stepping into the world of… Continue reading Flexbox Align: When to Use Auto Margins Instead of Flexbox Center

How to Use Figma’s New Auto Layout Features

In this video I’ll show you how Figma’s new and improved Auto Layout features make designing responsive components and layouts easier than ever! Figma’s original Auto Layout features were introduced in December 2019–and now, almost a year later, Auto Layout has been completely reimagined, rebuilt and is (in my opinion) much better. Watch the Video… Continue reading How to Use Figma’s New Auto Layout Features

10 CSS3 Properties you Need to be Familiar With

We’ve already covered the thirty CSS selectors that we should all memorize; but what about the new CSS3 properties? Though most of them still require a vendor-specific prefix, you can still use them in your projects today. In fact, it’s encouraged! Web Development The 30 CSS Selectors You Must Memorize Jeffrey Way At the conclusion of… Continue reading 10 CSS3 Properties you Need to be Familiar With

How to Build an Accordion Component With the CSS Checkbox Hack

What You’ll Be Creating In this short tutorial, we’ll learn how to build a CSS-only flexible accordion component by taking advantage of the “CSS checkbox hack technique”. Most importantly, our component will be fully responsive and its layout will switch between horizontal and vertical depending on the viewport size.  Along the way, we’ll discuss how… Continue reading How to Build an Accordion Component With the CSS Checkbox Hack

New Course: Figma to HTML

What You’ll Be Creating If you haven’t yet got to grips with the Figma interface design application, now’s your chance. In our new course, Figma to HTML: Code Up a Single-Page Design, you’ll master Figma by going through the process of converting a Figma website design to HTML.   What You’ll Learn In this course, Kezz… Continue reading New Course: Figma to HTML

Which Should You Use and When?

Flexbox and CSS Grid are two CSS layout modules that have become mainstream in recent years. Both allow us to create complex layouts that were previously only possible by applying CSS hacks and/or JavaScript. Flexbox and CSS Grid share multiple similarities and many layouts can be solved with both. When to use which is another… Continue reading Which Should You Use and When?

Ideas for block reveal effects with 3D Transforms

Latest experiment by Codrops consists of a small set of block reveal effects uncovering content of any kind in a schematic box look. On the demo page you can also find nice ready-made examples for revealing menus, modals, forms, etc. This approach takes advantages of scrollMonitor (a simple API to monitor elements as you scroll) and Flexbox and 3D Transforms, so… Continue reading Ideas for block reveal effects with 3D Transforms

How to Build a News Website Layout with Flexbox

What You’ll Be Creating It’s not necessary to understand every aspect of Flexbox before you can jump in and get started. In this tutorial, we’re going to introduce a few features of Flexbox whilst designing a “news layout” like the one you can find on The Guardian. The reason we’re using Flexbox is that it… Continue reading How to Build a News Website Layout with Flexbox

What’s new for designers, February 2016

In this month’s edition of what’s new for designers and developers, we’ve included frameworks, code resources, UX and UI design tools, JavaScript resources, design and dev tools, apps, stock photo sources, and much more. And as always, we’ve also included some awesome new free fonts! Almost everything on the list this month is free, with… Continue reading What’s new for designers, February 2016

Weekly News iDevie (week 5)

This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week. You can sign-up to our awesome weekly newsletter for some more amazing design articles, resources and freebies. New Resources & Tools voxel.css – A new, lightweight 3D CSS voxel library. Performance Budget… Continue reading Weekly News iDevie (week 5)

14 Best Resources For Learning CSS3

Are you looking for some detailed and useful CSS3 tutorials and techniques that you use to create better results? If your answer is yes then you are at right place. In this compilation, we are presenting top 14 useful and detailed CSS3 tutorials and techniques for you. All these tutorials and techniques are designed by… Continue reading 14 Best Resources For Learning CSS3

The Recently Released Webdev Resources You Would Need

Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. Bliss is just a collection of helpers and light syntactic sugar over Vanilla JS. It does not account for browser bugs or lack of support of certain APIs, although it only uses features that are both supported across most… Continue reading The Recently Released Webdev Resources You Would Need