Topics Search

CSS

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

CSS Pseudo-classes: Styling Form Fields Based on Their Input

CSS Pseudo-classes: Styling Form Fields Based on Their Input Icon
Let’s take a look at some pseudo-classes that are specific to form fields and form field input. These pseudo-classes can be used to style fields based on the validity of user input, whether the field is required or currently enabled. All of the pseudo-classes that follow are specific to forms. As a result, there’s less of a need to limit the scope with a selector. Using :enabled won’t introduce side effects for span elements.
 
Advertisement:
 

Bringing Websites to Life with CSS Animations

Bringing Websites to Life with CSS Animations Icon
Animation is fast becoming an essential design tool that’s increasingly used to help our users understand and interact with our work. Recent years have seen great improvements in browser and mobile support for animations. In fact, all modern desktop browsers come with built-in support for CSS animations. Together with other great tools that CSS provides, there’s never been a better time to add movement to our designs. But why is animation so important? And how can you start using it today?
 

CSS Pseudo-classes: :not() and :target

CSS Pseudo-classes: :not() and :target Icon
In this section, we’ll cover some esoteric and lesser-known pseudo-classes with a focus on what is available in browsers: child-indexed and typed child-indexed pseudo-classes, and input pseudo-classes. Child-indexed and typed child-indexed pseudo-classes let us select elements by their position in the document subtree. Input pseudo-classes target form fields based on their input values and states.
 

How calc() Works

How calc() Works Icon
The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width be the result of the addition of two or more numeric values.
 

Building a Morphing Hamburger Menu

Building a Morphing Hamburger Menu Icon
In this tutorial I'll explain the entire process of how to do it with CSS only, without using a single line of JavaScript. So, we will be seeing some CSS (and SCSS) tricks that will allow us to achieve an animation almost as smooth as the animated gif.
 

Pure CSS Content Filter

Pure CSS Content Filter Icon
By using CSS’ :target pseudo-selector, we can work out what a user has clicked on, and by using the adjacent sibling selector, we can use that user’s action to style subsequent parts of the DOM.
 

Continue Normalising Your CSS

Continue Normalising Your CSS Icon
When we talk about making websites look the same in every browser, we’re usually discussing the fact that it’s okay for round corners to be absent in browsers that don’t support border-radius, or that we can live with subtle layout shifts from one browser to another, or that we can progressively enhance visual features where possible. This is something I agree with wholeheartedly.
 

CSS Shorthand Syntax Considered an Anti-Pattern

CSS Shorthand Syntax Considered an Anti-Pattern Icon
There’s a very small but surprisingly significant (and even more surprisingly frequent) issue I spot a lot in other peoples’ code, either when working directly with it, refactoring it, or auditing it: the use of shorthand syntax in CSS. Typically we would view shorthand syntax as a benefit: fewer keystrokes, fewer lines of code, less data over the wire. Sounds great! However, it comes with a rather troublesome side effect: it often unsets other properties that we never intended to modify.
 

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

A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid Icon
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. Here, I am going to show you how this algorithm works. This way, the next time an element ends up in an unexpected location, you are not left scratching your head wondering what just happened.
 

Using last-child and last-of-type

Using last-child and last-of-type Icon
“Last” CSS pseudo-selectors are another useful way of detaching presentation from markup: rather than littering our HTML with classes to try to define what happens to the last instance of elements inside them, which would force us to move and reapply those classes when the content changes, we use a selector that will only ever be applied to the last element without changing our markup at all.
 

Align SVG Icons to Text and Say Goodbye to Font Icons

Align SVG Icons to Text and Say Goodbye to Font Icons Icon
The push for SVG icons over font icons has caught serious momentum in the web community. With an SVG icon system you can better meet accessibility standards, render higher quality visuals, and add/remove/modify icons in the library with ease. At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.
 

CSS Selectors: Specificity

CSS Selectors: Specificity Icon
These A, B, and C values are then combined to form a final specificity value. An ID selector such as #foo has a specificity of 1,0,0. Attribute selectors, such as [type=email] and class selectors such as .chart have a specificity of 0,1,0. Adding a pseudo-class such as :first-child (for example, .chart:first-child) gives us a specificity of 0,2,0. But using a simple type or element selector such as h1 or p only gives us a specificity of 0,0,1.
 

Using last-child and last-of-type

Using last-child and last-of-type Icon
“Last” CSS pseudo-selectors are another useful way of detaching presentation from markup: rather than littering our HTML with classes to try to define what happens to the last instance of elements inside them, which would force us to move and reapply those classes when the content changes, we use a selector that will only ever be applied to the last element without changing our markup at all.
 

Animate to Different End States Using One Set of CSS Keyframes

Animate to Different End States Using One Set of CSS Keyframes Icon
I have recently live coded a pure CSS random rainbow particle explosion. There's a source in the middle of the screen, and rainbow particles shoot out with different speeds at different moments and then fade out. It might seem like the kind of thing that requires a lot of work and code, but it's something I did quite quickly and with only 30 lines of SCSS.
 

CSS Examples of Two Ways to Position a Button at the Top Right of a Table

CSS Examples of Two Ways to Position a Button at the Top Right of a Table Icon
A cool effect you can do with CSS/HTML is to position a button (or any element really) at the top right hand side of a table. For example you could use this to refresh the contents of the table when the button is clicked. It’s intuitive to the user and is a subtle way to add functionality that is only apparent when it is needed.
 

Attribute Selectors

Attribute Selectors Icon
Some of the attribute selectors we’ll cover here are old hat. Both the hyphenated attribute value selector and the space-separated attribute value selector were defined in CSS2. Selectors Level 3, on the other hand, adds a few powerful selectors that let us match partial attribute values. We’ll focus on the new and lesser-known attribute selectors in this section. Let’s take a look.
 

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.
 

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