background preloader

CSS

Facebook Twitter

Blend Modes

Font Awesome. Magic of CSS — Adam Schwartz. Grids. What You May Not Know About the Z-Index Property. The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works.

What You May Not Know About the Z-Index Property

In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples. CSS provides three different positioning schemes for the layout of boxes: normal document flowfloatsabsolute positioning The last completely removes an element from the normal flow and relies on the developer to tell the element where to display. You give it top, left, bottom, and right values to position the element in two-dimensional space, but CSS also allows you to place it in the third dimension using the z-index property.

On the surface, z-index seems like an easy property to use. How to Make Magic, Animated Tooltips With CSS. Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking a button, or maybe an Easter Egg caption to go along with an image.

How to Make Magic, Animated Tooltips With CSS

Let’s make some animated tooltips, right now, with nothing but HTML and CSS. Here’s what we’re working towards: Before we get immersed in the cauldron, let’s take a peek at what we’re actually brewing. The main goal is to have a simple way to add a tooltip, so we’ll do that by adding a custom tooltip attribute: If you are looking for 508-compliant tooltips, or need smarter tooltips with container collision detection and/or support for HTML content vs. plain text, there are plenty of solutions that use third-party scripts to solve those needs for you. “JavaScript is imperative to make fully-accessible interactive components.” – Sara Soueidan, Building a fully-accessible help tooltip...is harder than I thought This tutorial doesn’t specifically address accessibility needs.

Introducing CSS Scroll Snap Points. By Sarah Drasner On Before this new CSS I'm about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript.

Introducing CSS Scroll Snap Points

As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior. The new CSS Scroll Snap Points spec promises to help, allowing for this kind of behavior using very few lines of CSS. As happens with very new web tech, this spec has changed over time. There is "old" and "new" properties and values. Polyfilled Demo The demo below has horizontal scrolling. It uses a polyfill, but in order to use it (and support is still low enough that I suggest you do), you have to support the "old" values, which is why I'll cover them, too.

Animations

Shadows. Inner Shadows in CSS: Images, Text and Beyond. Color Hex Color Codes. A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid. In this tutorial, I’ll be going over all the steps the auto-placement algorithm of the CSS Grid Layout module follows when positioning elements.

A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid

These steps are controlled by the grid-auto-flow property. In Introducing the CSS Grid Layout and Seven Ways You Can Place Elements Using CSS Grid Layout, I gave an overview of the CSS Grid spec and explained all the different ways Grid lets you arrange elements on the web. However, in my previous articles I explicitly specified the position of just one element in the grid. As for the rest of the items, they got placed properly based on an algorithm. Here, I am going to show you how this algorithm works. Basic Concepts for a Better Grasp of the Auto-placement Algorithm Let’s go over some fundamental concepts before diving into the workings of the algorithm. Anonymous grid items – If you place some text directly inside a grid container without wrapping it in any tag, it will form its own anonymous grid item. Position any background image with offsets in all corners.

You can read and watch previous episodes here!

Position any background image with offsets in all corners

What’s the problem? It’ll be an easy task if I told you to position a background image, 0.4em from the left border & 1em from the top border. Right ? The word “OR NAH.” is a background image. but, what about 1em from the bottom border and 0.2em from the right border ? Of course, you’ll have an answer, I did too. I used to calculate the width and the height of the box, then I use subtraction. That’s totally okay, but in responsive design this solution is useless. My next solution was to insert this background image as an actual <img />, so I could play with the layout. Often times, the design is much complex than our example and because of that, I always end up with a very mangled and ugly HTML code. In CSS3, we’re able to solve this problem so easily. 1. flexible background positioning To control the position of any background image, we use the property background-position.

A Beginner’s Guide to Pure CSS Images – dailycssimages – Medium. Update (1/6/17) We have since released our 50-day email challenge called Daily CSS Images which challenges you to create a pure CSS image every weekday.

A Beginner’s Guide to Pure CSS Images – dailycssimages – Medium

Hopefully, it is a great way to continue practicing. You can sign up here.

Flexbox

Clippy — CSS clip-path maker. Clip Path Generator - CSS Plant. Clip Path Generator - CSS Plant.