Topics Search


Home » CSS (1797)

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.

Using OpenType for Text

Using OpenType for Text Icon
This family of properties adds all sorts of typographic goodness to your text and, as long as you have access to fonts that offer these features, they really give the reading experience a boost for your users. Let’s start with where you might find these fancy fonts.

Text and Typography

Text and Typography Icon
Text is everywhere. Without it, the web wouldn’t be such a useful place. There are many different CSS properties for styling text and in this video, we’ll cover most of them in some way shape or form. There’s quite a few, so we best get started! As there are so many things to cover, this episode will demonstrate some of them, but in part just act as an overview of the tools in the box.

The CSS @supports Rule

The CSS @supports Rule Icon
Feature detection is often done in JavaScript with tools like Modernizr but in some browsers, we can now detect capabilities from CSS. The @supports rule allows us to conditionally apply styles for features that are or are not supported. In this episode we’ll learn all about Browser support for various CSS features How the @supports at-rule works and how to provide alternative styles for unsupported features

Benefits of rem and em Values

Benefits of rem and em Values Icon
let’s look at a couple of quick tips for using the rem unit of measurement. But first, let’s look at another type of relative unit: the em. When working on a responsive project it’s more flexible to use relative units like em for sizing text and spacing in and around elements rather than pixels. This is because this unit is relative to the font size of its parent element, allowing an element’s size, spacing and text content to grow proportionally as the font-size of parent elements change.

Solving Common CSS Problems

Solving Common CSS Problems Icon
There is literally nothing else to say on the topic of CSS quotes, nor is there any other selector, property or value that starts with Q. So, in this week’s tips, I answer some common questions I get from my students, AtoZ supporters and fellow professionals.

The Required Pseudo Class

The Required Pseudo Class Icon
:required is a state based pseudo class that can be useful when styling forms. Combined with :valid and :invalid we can have a lot of control over providing visual feedback to users without having to write lots of JavaScript. In this episode we’ll learn:

Solving Problems With CSS Grid and Flexbox: The Card UI

Solving Problems With CSS Grid and Flexbox: The Card UI Icon
The “card” pattern has seen great success in recent times, but the way we build them is still limited because of the CSS available to us. Until now, that is. By combining CSS Grid and Flexbox, we can make cards which align neatly, behave responsively, and which adapt to the content within them. Let’s see how!

How to Display Text on Image With CSS3 mix-blend-mode

How to Display Text on Image With CSS3 mix-blend-mode Icon
Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it’s still an experimental feature without sufficient browser support. The CSS alternative to show an image background behind a text is using the mix-blend-mode property.

Placeholder Text

Placeholder Text Icon
Pseudo elements :before and :after are great for building complex design features without cluttering the markup with non-semantic elements. Other pseudo elements like :first-line and :first-letter give us access to styling parts of elements that aren’t found marked up in the HTML document.

CSS Pseudo Elements

CSS Pseudo Elements Icon
Pseudo elements are elements on the page that aren’t found in the HTML code. They can be manipulated with any CSS that would be applied to any other element. Two special pseudo elements – :before and :after can be used to generate content on the page from CSS and have many potential use cases.

How to Create CSS-only Sticky Footer

How to Create CSS-only Sticky Footer Icon
Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages. The script does the job of tracking how far up or down scrolling takes a page, and triggers an action when a threshold height is reached.

How to Use the nth-Child CSS Selector

How to Use the nth-Child CSS Selector Icon
We have many powerful CSS selectors available for finding elements on the page and applying styling to them. The nth-child pseudo selector is probably the most powerful due to the flexibility of its (an+b) expression for finding patterns of elements. In this quick tip, we’ll look at when you can use nth-child and when you should use a standard class.

Styling Underlines on the Web

Styling Underlines on the Web Icon
Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. There are a bunch of different ways to style underlines. So what are all the different ways we can underline text on the web?

Lots of ways to add an ID to the `body` element

Lots of ways to add an ID to the `body` element Icon
Over the time I have been doing WordPress web design, there are occasions when I have needed to add an ID or class to the <body> tag. For example: This often happens when integrating a 3rd party into WordPress that creates its own pages that WordPress doesn't recognize. Or I need more nuanced classes for the site design I'm creating. To change the look of these pages in a way that the styles are scoped just to that page, we need a way to target just that page or category of pages.
Home » CSS (1797)