Topics Search

CSS

Home » CSS (1797)
  • Page 1 of 90
  • »
 

How to Create a CSS Ribbon

How to Create a CSS Ribbon Icon
We talk about CSS ribbons in web design when a strip of box (called ribbon) wraps another box. It’s a fairly used design technique to decorate text, especially headings. On W3C‘s website you can check out how properly used CSS ribbons can help structure content in a subtle way.
 
Advertisement:
 

Loops in CSS Preprocessors

Loops in CSS Preprocessors Icon
Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code.
 

CSS Inheritance, The Cascade And Global Scope

CSS Inheritance, The Cascade And Global Scope Icon
I’m going to revisit inheritance, the cascade and scope here with respect to modular interface design. I aim to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.
 

Swapping State with CSS Keyframes

Swapping State with CSS Keyframes Icon
Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop. No tweening between the state, just a straight swap. I was wondering how to go about this other day, and Sarah Drasner showed me that you can use reallllllly short distances between keyframes to move from one state to another.
 

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.
Home » CSS (1797)
  • Page 1 of 90
  • »