CSS

Editor’s Draft, 11 June 2018

A lightbox made out of pure css using the :target method....

Media Queries Level 5 is a future specification for CSS media queries that intends to build upon the existing media queries spec that many…

ALA’s Zeldman bemoans our industry’s fetish for the needlessly complicated over the straightforward.

Some of the world's greatest print design was made on known canvases, with known content using known color options. On the web, we have more flexible tools. Media queries, flexible units, Grid Layout and Flexbox let us do great graphic design. With flexibility.

Web layout has always been a hack — compounded by responsive design, web application needs, and the desire for consistency. Join the creator of Susy (a meta grid-system) for a review of layout and grid techniques — when to use them, what to consider, and how to roll your own layouts with minimum code. We'll look at everything from floats to CSS Grid, flexbox, and even custom properties — and how to start using the new toys right away, with only a few lines of code.

The CSS Box Alignment module specifies CSS features that relate to the alignment of boxes in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. The module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.

A quick walkthrough of how to use CSS Grid with standard CSS and SASS.

CSS Grid is here, people are starting to use it, and it's even referenced by our industry's latest official buzzword. I could go on about how it's the future of web design and layout. I could wax lyrical about how anyone not using Grid will be left behind when the Rapture happens, and everybody on Wikipedia's list of Internet pioneers will come back to take us to the great LAN party in the sky. Comcast (yes, all of them) won't be invited. My point is that if you've been paying attention — if you're reading this, you probably do — then you know that stuff already. But let's just say that you...

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements

Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today.

April 3rd, 2018

Here’s an idea! Let’s make an an HTML play inside the shape of some letters. Like "Knockout Text" except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this responsively. The idea is to

The CSS :before and :after properties are what also known as pseudo elements. They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them. The Syntax If

CSS selectors have an inherent level of specificity which is a measurement of how distinctly we are defining the intended element(s) that we are trying to style.

With CSS Grid we can design web design inspired by magazines and other editorial design works. We made a practical example on how to pass a design from a magazine to the web.

Visual interface builder for CSS Grid that allows you to easily create and export your custom layouts (with legacy grid support).

I'm always amazed at the things you can make with CSS3. One of CSS3's killer feature was adding the ability to create gradients in a simple way.

Collection of hand-picked only CSS background patterns. Demo and code.

PATTERNS !

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.

How to successfully animate the height of an element using CSS transitions.

CSS Grid changes the way flexibility works on the web. When there is more or less space available, Grid allows us to precisely design how content moves. Usin...

Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that's there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired

In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. Rachel Andrew ran a survey and shares the results as well as her thoughts in this article.

A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. Have fun! Negative values lower than -1 may be used for

Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once