If you have ever seen a car dealership, then you can understand CSS selectors. When you step onto the lot of a car dealership, you’re instantly surrounded by different cars, colors, and years. And of course there’s that aggressive salesperson. But let’s leave them out this simulation.
The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for <img> and the <picture> element. But how do the capabilities that these things provide map to CSS? CSS generally wasn't really involved in the responsive images journey of the last few years.
Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.
One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.
Predictably, the final tip in this CSS series is all about z-index. If you want to control the stacking order of elements, you can do so with z-index. But z-index will only take affect if the element also has a position value of absolute, relative or fixed. Placing elements precisely with position is great for building up complex layouts or interesting UI patterns but it’s common to want to control stacking order without moving the element from its original place on the page.
Some interface designs may call for elements to be layered or stacked on top of each other. There are many ways that elements will naturally stack on top of each other. But we can control this stacking order using a combination of the position and z-index properties. In this final episode of AtoZ CSS season one we’ll learn about: The default stacking order of the document What a stacking context is and how they interact with each other How z-index controls layer order within stacking contexts
We can perform all sorts of interesting transformations on elements along various different axis. In this tip, we’ll provide a rundown of all the common options and then look at a lesser known value of transform which allows us to set multiple transform values via the matrix() value.
In this episode we’ll be digging deeper into transforms and manipulating elements in 3D. In this episode we’ll learn all about: 3D space in CSS How to rotate elements around their vertical and horizontal axis And how perspective works...
In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on the differences between translate and position.
In this episode we’ll learn all about: The CSS transform property, Moving elements with translate and translateX, The performance benefits of using translate over other methods... The transform property allows elements to be moved from their natural position in the document whilst maintaining that original space – a bit like the result of moving elements with position:relative.
The critical CSS in your project is the CSS that’s used to style the above-the-fold content of your website. Above-the-fold content is what users see on your website first, which can include navigation and other elements. So it’s very important to properly style and render this part of the website as quickly as possible. Modern web development practices often recommend that you inline your critical CSS. It would be placed into your web page like so:
A widow is a term used to describe a lone word at the end of a paragraph or headline. These lone words occur when the last word in a line of text wraps on to a new line due to a lack of available width. It’s more visually pleasing to have at least two words on a line and these widows are often seen as undesirable. An agency that I used to work at was so pedantic about them that I’ve become slightly OCD about ensuring they are nowhere to be seen – not so much in paragraphs of text but certainly in headings as far as possible. Here are some tips for removing widows and working with line breaks.
In the original screencast video for the vertical-align property, we looked at a couple of methods for centering elements vertically. In this article we’ll outline three different methods for vertical centering – something that always used to be quite tricky but is now a breeze to accomplish.
The layout principles–columns and rows, angles and lines–that we use to build websites today are largely influenced by their print heritage. And although grid implementation on the web is getting better and more polished, web layout in general is still awkward compared to print media, especially when it comes to content flow. Magazines and newspapers have always enjoyed elegant ways for arranging content layout, such as wrapping text around, or inside, non-rectangular shapes.
In one of our earlier introduction tutorials to CSS Grid we looked at fluid columns and better gutters. We learned that it isn’t necessary to specify exactly where we want to position our grid items; if we declare our grid’s properties, Grid will slot our items in according to its auto-placement algorithm. In this tutorial we’ll take a look at how that algorithm goes about its work and how we can influence it.
More and more these days, CSS is being used to control the styling of things other than websites. One type of media that CSS can apply styling to is paged media – things like digital magazines and ebooks or a website in the form of a print stylesheet. There are some properties that only apply to this media type. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks.
Vertical centering is a firm favorite of designers – for both print and digital media. But aligning things vertically with CSS is not the easiest thing to do. This issue is made worse in a world of multiple devices and responsive design as we need our elements to be flexible in height – which can make calculating their vertical center quick tricky.
In the previous episode we looked at all sorts of properties for styling text. In modern browsers, and in IE back to version 4, we can add custom fonts to enhance the design of our websites. We can leverage various features of these custom fonts to help boost performance and improve our typography overall. In this episode we’ll learn:
In this tutorial, we are going to create a Statistics Panel using HTML and CSS3. We’re going to use Google Fonts for this tutorial, specifically “Roboto.” First, let’s create our HTML structure. We need a wrapper or a container, we’ll name it “stats-panel.” We’ll have a header, with a title and calendar views.