Topics Search


Home » CSS (1797)

Remove Unnecessary CSS With PurifyCSS and Grunt

Remove Unnecessary CSS With PurifyCSS and Grunt Icon
PurifyCSS is a JavaScript tool which parses your markup files (HTML, PHP, or even JavaScript) then cross-references them with whatever CSS you’re using. Any selectors in your CSS which aren’t being used will be removed, leaving you with only the styles that you actually need.

CSS Selectors Explained By Going Car Shopping

CSS Selectors Explained By Going Car Shopping Icon
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.

Responsive Images in CSS

Responsive Images in CSS Icon
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.

What is the difference between CSS variables and preprocessor variables?

What is the difference between CSS variables and preprocessor variables? Icon
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.

The Power of the rgba() Color Function

The Power of the rgba() Color Function Icon
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.

How to Mastering Z-index

How to Mastering Z-index Icon
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.

The Z-index CSS Property

The Z-index CSS Property Icon
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

Using Y-Axis Transforms and Matrices

Using Y-Axis Transforms and Matrices Icon
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.

The rotateY CSS Transform

The rotateY CSS Transform Icon
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...

Difference between Translate & Position Relative

Difference between Translate & Position Relative Icon
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.

The translateX CSS Property

The translateX CSS Property Icon
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.

How and Why You Should Inline Your Critical CSS

How and Why You Should Inline Your Critical CSS Icon
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:

Using Widows and Line Breaks

Using Widows and Line Breaks Icon
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.

How to Vertically Center Text and Icons

How to Vertically Center Text and Icons Icon
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.

How to Use CSS Shapes in Your Web Design

How to Use CSS Shapes in Your Web Design Icon
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.

Understanding the CSS Grid Auto-Placement Algorithm

Understanding the CSS Grid Auto-Placement Algorithm Icon
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.

What are Widows and Orphans

What are Widows and Orphans Icon
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.

How to set Vertical-Alignment

How to set Vertical-Alignment Icon
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.

Unicode Range and @font-face

Unicode Range and @font-face Icon
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:

Create a Statistics UI Panel

Create a Statistics UI Panel Icon
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.
Home » CSS (1797)