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. 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. Note I'm using Autoprefixer in the Pen to automatically give me all the necessary vendor prefixed properties. Here's the code used to make the magic: Pretty slim! Current CSS Scroll Snap Properties scroll-snap-type scroll-snap-type: none | mandatory | proximity; scroll-snap-align
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. 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. 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. Oh, wait. Wait. position: relative, orposition: absolute, orposition: fixed Let’s jump in and see what’s up.
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. 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. Let's start with the basics to make sure we're all on the same page and then we'll talk about stacking to understand more of what's going on with z-index behind the scenes. I'm sure you're familiar with three-dimensional coordinate space.
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. 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. 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. Finally, I’d like to make the following preliminary point. Step #1: Generation of Anonymous Grid Items The markup below generates an anonymous grid item from the inter-element text: Here’s the relevant markup: Conclusion
Position any background image with offsets in all corners You can read and watch previous episodes here! 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. The first value is for the x-axis and the second is for the y-axis. 2. 3.
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. Hopefully, it is a great way to continue practicing. You can sign up here. Update (1/3/17): If you prefer listening, here’s a video that you can follow along to: What you’re getting into: 17 min read. What I assume you know: My teaching method is to not assume you know basic principles. If you’re not a beginner: I will be repeating basic principles often. There often seems to be a line drawn between a vector artist and a front-end developer. There is definitely much prudence to this, however, I think that a front-end developer would benefit greatly from working on illustration even if not their main focus. I think this is the case because both skills are essentially putting together different components to create a final product. The Components of a Pure CSS Image Shape Composition The HTML CSS Styling Head Copy
CSS Shapes, clipping and masking – and how to use them The release of Firefox 54 is just around the corner and it will introduce new features into an already cool CSS property: clip-path. clip-path is a property that allows us to clip (i.e., cut away) parts of an element. Up until now, in Firefox you could only use an SVG to clip an element: But with Firefox 54, you will be able to use CSS shapes as well: insets, circles, ellipses and polygons! Note: this post contains many demos, which require support for clip-path and mask. To be able to see and interact with every demo in this post, you will need Firefox 54 or higher. Basic usage It’s important to take into account that clip-path does not accept “images” as input, but as <clipPath> elements: See the Pen clip-path (static SVG mask) by ladybenko (@ladybenko) on CodePen. A cool thing is that these <clipPath> elements can contain SVG animations: See the Pen clip-path (animated SVG) by ladybenko (@ladybenko) on CodePen. See the Pen oWJBwW by ladybenko (@ladybenko) on CodePen. clip-path or mask?
Breakdown of a calc() for a square grid by Lasse Diercks on CodePen Hey there! Today, I created this pen: It's one HTML element that turns every child into a square. In this post, I'd like to cover the calculation of the rows. --row-size: calc( ( var(--content-width) - (var(--gutter) * (var(--columns) - 1)) ) / var(--columns) );` To understand why it's constructed like this we first need to take a look at all the pieces. #the tools --row-size is the variable that's later on used in grid-auto-rows: .. calc() is used to perform calculating in css I'd recommend to check it out if you haven't seen it before --content-width is a variable that is used to limit the total width of the container. --gutter is the size between the tiles --column is the amount of columns #columns The repeat() syntax works like this: repeat(AMOUNT OF TIMES, SIZE) fr stands for fraction Let's assume our --columns variable has the value 3. grid-template-columns: repeat(var(--columns), 1fr); resolves in 3 columns with the size of 1 fraction of the container #gutter The variable --gutter is used here.
How To - Aspect Ratio / Height Equal to Width