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!
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.
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.
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.
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 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?
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 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...
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.
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.
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 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.
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.
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 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.
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.
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.
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.