Topics Search


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

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.

The CSS Opacity Property

The CSS Opacity Property Icon
The opacity property specifies how opaque an element is. It takes a value ranging from 0 to 1 where 0 is completely transparent and 1 is completely opaque. In this practical episode, we’ll look at how the opacity property works, including some of it’s downsides – and then create a CSS only fading slideshow using opacity...

How to Add Hand Drawn Vector Arrows to Your Website

How to Add Hand Drawn Vector Arrows to Your Website Icon
This tutorial will show you how to add our recently released free hand drawn vector arrows to an existing website. This is a great technique for drawing the attention of your visitors to a specific element on your page, such as a call to action button or a special offer etc.

Backdrop Filters

Backdrop Filters Icon
In this tutorial we will look into an emerging CSS toy going by the name of Backdrop Filter. The backdrop-filter proposal is heavily influenced by the Apple design language, particularly that frosty-transparent-blurry-background seen in their most recent iOS and macOS interfaces. You’ll have noticed it in the Dock, the Contextual Menu, and the Notification centre.

Creating Responsive Design with Media Queries

Creating Responsive Design with Media Queries Icon
I would venture a guess that the vast majority of web designers and developers are familiar with the concept of responsive design these days. If not, check out the Media Queries screencast. Since responsive design is so popular, it’s a good place to pick up a couple of tips for improving the way we develop websites and apps for multiple devices. Here are a couple of CSS tips to help you out.

Nth-child and nth-of-type

Nth-child and nth-of-type Icon
:nth-child is a pseudo class used to select elements by a numeric expression. The syntax is quite different to most other aspects of CSS and can be a bit tricky to get your head around, to begin with. In this episode we’ll look at: the various ways of using :nth-child, the slightly more flexible :nth-of-type selector and their counterparts selectors :nth-last-child and :nth-last-of-type.

Media Queries

Media Queries Icon
The @media rule allows conditional styling of elements. The conditions can be based on the type of media or known characteristics of the device being used. Combining media queries with fluid layout and flexible images, allows us to implement responsive web design. In this episode we’ll look at how @media queries can be used to change the styling of websites based on querying information about the device and two approaches for tackling page layout in responsive design.

Setting the Line-Height

Setting the Line-Height 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, in this article I’ve added a new quick tip/lesson about the line-height property for you.

The CSS Line-Height Property

The CSS Line-Height Property Icon
The CSS line-height property acts in a similar way to leading in print design. It allows us to control the spacing between lines in paragraphs, headings and other text elements. line-height can also be used as a base to create consistent vertical rhythm and spacing throughout an entire project.

CSS Grid Layout: Going Responsive

CSS Grid Layout: Going Responsive Icon
Throughout this series we’ve become familiar with Grid syntax, learned about some efficient ways of laying out elements on a page, and said goodbye to some old habits. In this tutorial we’re going to apply all of that to some practical responsive web design.

Introduction to CSS Animations

Introduction to CSS Animations Icon
When creating animations on the web, you can't really go far without running into CSS animations. What CSS animations do is pretty simple. They allow you to animate CSS properties by having you specify what your CSS properties will do at various points in time. These "points in time" have a very specific name. They are known as keyframes.

Detecting Retina Displays and Other High-DPI Screens

Detecting Retina Displays and Other High-DPI Screens Icon
It used to be that detecting screen resolution was enough to ensure people saw your content properly. You had big screens. You had small screens. The amount of pixels these devices had directly correlated with the screen size. As displays started to get more pixels crammed into ever smaller regions, just knowing the resolution was no longer enough. It became important to know about the pixel density - commonly referred to as dots per inch or DPI.
Home » CSS (1797)
  • Page 1 of 90
  • »