Perhaps that’s because the styling options used to be limited. Link color and underlining were the primary options. Hover and focus states seemed to be where most of the creativity occurred. Other enhancements tended to require add-ons like JavaScript.

CSS has changed the game in recent years. Several properties are available to customize the look of hyperlinks. They also provide a higher level of control regarding details like spacing and sizing.

It’s a whole new world of possibilities. Let’s check out some CSS properties that help make hyperlinks more attractive.

A Default Link

We’ll start with a default link configuration. A link color and CSS states were added – but that’s it. It will serve as a baseline as we explore the CSS properties below.

See the Pen Link Styling:Plain by Eric Karkovack

text-decoration-color

It used to be that a link’s underline had to be the same color as its text. The text-decoration-color property allows us to choose a separate hue. It also works with overlines, strikethroughs, and anything else set by the text-decoration property.

We’ve added a brown underline to compliment our green link text.

See the Pen Link Styling:text-decoration-color by Eric Karkovack

text-decoration-skip-ink

This niche property determines how the link’s text decoration interacts with glyphs. The default setting is auto, where the browser interrupts underlines and overlines so they don’t touch a glyph. You’ll notice this with lowercase letters that go below the baseline.

Setting the property to none means the underline or overline draws a straight line – regardless of where glyphs are located.

See the Pen Link Styling:text-decoration-skip-link by Eric Karkovack

text-decoration-thickness

The thickness of a link’s underline typically follows what’s defined in the font-weight property. That is, bold text will result in a thicker underline. This property lets us set a consistent value for every link in the cascade.

See the Pen Link Styling:text-decoration-thickness by Eric Karkovack

text-decoration-style

Text decorations don’t have to be a straight line. This property lets you change the style to dashed, dotted, double, or wavy lines.

See the Pen Link Styling:text-decoration-style by Eric Karkovack

text-underline-offset

Here’s a way to specify how closely (or not) an underline is to the text above. Adding a few pixels of space between them can improve legibility.

Note that this property doesn’t impact instances of the HTML underline tag (<u>). It only affects instances where the text-decoration property is set.

See the Pen Link Styling:text-underline-offset by Eric Karkovack

text-underline-position

Another niche property, text-underline-position specifies the position of the underline relative to its text. Setting it to under is ideal for mathematical and scientific formulas. It makes subscript characters easy to read – even when underlined.

See the Pen Link Styling:text-underline-under by Eric Karkovack

Going Further with Link Styles

Hyperlinks don’t have to be bland. There are now plenty of ways to make them as much a part of your brand as other design elements.

The properties above are all worth considering when styling links. They’re relatively simple to implement and can make links more attractive and accessible. Best of all, they’re native CSS and won’t impact page load performance.

You can also use them beyond default styles. Style them for various states, such as changing the link’s underline color during a hover event. In addition, there’s an opportunity to add animation and transitions to create all sorts of fun micro-interactions.

Just beware – it’s possible to take things a little too far. Always keep best practices in mind to enhance the user experience. Anything that makes links harder to read or use isn’t worth doing.

It’s time to get creative! Experiment with these CSS properties and see how you can bring a little life to your links.

The post CSS Properties to Make Hyperlinks More Attractive appeared first on Speckyboy Design Magazine.

We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content Property

The CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated Sequences

Animation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive Elements

CSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for Granted

We’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS Responsibly

Because CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.

The post The CSS Practices That Can Hurt Accessibility appeared first on Speckyboy Design Magazine.

Yet there are times when a specific part of a design doesn’t quite fit the mold. It may be a one-off design feature that is utilized on a single page or area of a site. For example, home pages often include elements that don’t carry over to secondary pages. Individual blog posts might also require a certain formatting of their own.

The trouble is that the HTML markup may be same throughout the website. Think of a WordPress theme that has the same structure for every page. How can you target only specific instances of an element?

This is where the CSS :not pseudo-class comes in handy. It allows you to target elements that do not match a list of provided selectors. The result is more fine-grain control over those niche design features.

Let’s take a look at a few scenarios that demonstrate the power of :not.

Full-Width Content on the Home Page

In our first example, let’s consider a home page that is going to use full-width content. Perhaps it has a lot of content and a wide layout would take advantage of large screens. However, that’s the only place we want to add this style for now.

We’ll also assume that we’re adding a CSS class of .home somewhere on the page, while secondary pages get their own class of .secondary-page.

The goal is to adjust the width of the #content element only for pages that don’t include the .home class.

This allows us to implement full-width content on the home page, while keeping it at 66% wide everywhere else. So, even if a page has a class other than .secondary-content, that rule still holds true.

Here’s how it looks in practice:

See the Pen CSS :not – Full-width content for a home page by Eric Karkovack (@karks88)
on CodePen.

Remove Text Decoration on Hyperlinks Outside the Content Area

Underlining hyperlinks is helpful for accessibility. However, there may be places within a website where you don’t necessarily want this visual enhancement. Navigation bars and even footers might eschew underlined links altogether.

In this scenario, we’ll underline links – but only within the #content element. Every other area of our fictional page will forego them.

To accomplish this, we’ll look for child elements of the .container element, which wraps around the entirety of the page. Links that are not within the #content element will have a style of text-decoration: none;.

See the Pen
CSS :not – Underline links within #content by Eric Karkovack

Change a Text Heading Style When Inside of a Multi-Column Layout

Typography styles are often adjusted for different types of page layouts. You might want to use different font sizes and margins, for example, within a multi-column layout as opposed to a single-column page.

Large text headings could be especially overwhelming when used in smaller spaces. With this example, we’ll adjust <h2> elements to better fit in these situations.

Specifically, the CSS we’ve written assumes that any <h2> elements that aren’t within in a container using the .single_column class should be made smaller. In addition, we’ve changed the color and a few other properties.

See the Pen CSS :not – Different heading styles for multi-column layouts by Eric Karkovack

:not a Bad Way to Control Your CSS

Part of the beauty of CSS is in its flexibility. There are often a number of ways to accomplish a given goal. This allows web designers to work more efficiently than ever.

The :not pseudo-class is yet another helpful tool. You may have looked at the scenarios above and thought of other techniques for doing the very same thing. And there are indeed times when you might want to take a different approach.

But in many cases, :not can increase efficiency. It saves us from individually targeting multiple selectors that require similar styling. And, as previously mentioned, it’s great for those one-off design elements that we want to stand out. Browser support is also very strong.

It should be noted that :not does have some limitations. Also, it requires a bit of background on how the CSS cascade works. Therefore, writing an effective piece of code can take a few tries.

Still, it’s worth learning. Once you get the syntax down, you might be surprised at how truly useful this functionality is.

The post How to Target Design Elements with the CSS :not Pseudo-Class appeared first on Speckyboy Design Magazine.

For beginners, tutorials are a great way to learn how to use Figma effectively. These tutorials offer step-by-step visual instructions that are easy to follow, enabling you to quickly learn new skills and improve your techniques.

Our round-up includes the best Figma tutorials available online. These tutorials cover everything from UI basics to more advanced techniques, and they will help you master Figma in no time. By following these tutorials, you’ll learn how to navigate the interface, create and edit designs, and make the most of Figma’s features.

We have also published a collection of free Figma UI templates.

Figma Tutorials For Beginners

To get started, let’s explore some winning resources for beginners. If you’re totally new to Figma, these handy tutorial guides will help you get up and running fast.

What is Figma?

Are you just curious about Figma and what it can do? Those questions and many more are answered in this brief, bite-sized tutorial video for 2023.

Learn Figma In Under 10 Minutes

Ready to get started with Figma? This quick intro video is a great way to get going. It covers the basics in less than ten minutes!

Design a Website from Start to Finish with Figma

Do you want to build an entire website in Figma but need help figuring out where to start? This video is here to help, showing you how to build an entire website from scratch using Figma.

Introduction to Figma

Prefer written tutorials over videos? Try this one, with handy step-by-step guides to help you find your way around Figma and its basic features.

A Complete Figma Tutorial for Beginners

This complete guide is another resource for Figma newbies. It assists you with getting up and running, building unique content with Figma quickly.

A Beginners Tutorial to Figma

Many of us learn best by doing. This complete video guide showcases and explains the essentials of Figma.

How to Use Figma for Your Next Project

Last but not least, start your Figma journey with this introductory tutorial. A sample design is used for a real-world example. You can follow along and learn how to start making edits of your own.

Figma Web Design Tutorials

Now, let’s dive into the details. You’ll learn how to start using Figma to design amazing websites of your own in no time. Read on!

How to Use Figma for Website Design

Figma is crafted for robust website designs. Learn how to use Figma to construct sleek, readable layouts in just a few clicks.

Advanced Features in Figma Explained

Building a workflow in Figma is a key part of success. This video guide shows off several productivity tools that will help you work smarter and create designs faster.

Variants in Figma Tutorial

Variants in Figma help you make alternate versions of a single object. This video shows you how to use them and offers ideas for how to leverage their power effectively.

Figma Auto Layout Tutorials

In this set of tutorials, you will learn how to use Auto Layout in Figma. With it, you can make dynamic designs that adapt to different screen sizes and layouts.

Auto Layout & Components in Figma

You’ll learn how to use two of Figma’s essential features here. They are auto layout and components, both of which are covered here in detail. You’ll watch the features at work and learn to troubleshoot common issues.

Getting Started with Auto Layout in Figma

Auto Layout in Figma is a newer feature for building advanced designs. It can seem daunting, but this tutorial simplifies things. It’s detailed without becoming overly lengthy.

Learn Auto Layout in Figma

Another option is this written Auto Layout article. It stands out for its detailed descriptions of Auto Layout features and how they work. Use it to boost your understanding of Figma’s creative options.

Figma Auto-Layout with Responsive Components Tutorial

Combine the power of Auto Layout and components using the skills you’ll learn in this tutorial. They help you maintain a steady design aesthetic across projects, even while working faster.

Figma Prototype & Button Tutorials

Prototypes in Figma let you create interactive mockups of designs. Buttons are one of the critical parts of creating interactive prototypes. Here, you’ll learn to use both.

Working with Figma Button Components

Components are user interface elements in Figma. Learn how to build and work with them in this task-based tutorial article.

The Correct Way to Prototype in Figma

Prototyping helps you see how users will experience your finished product. It ensures your content works flawlessly and stays current. To do it right, turn to this tutorial guide for Figma.

Create & Test a Prototype in Figma

Robust and detailed, this tutorial shows you how to create a prototype in Figma. You’ll learn how to connect key parts of your design, and then share it with others.

How to Create a Button With a Hover Functionality in Figma

In this guide, you’ll learn how to create a button in Figma. This is an incredibly common use case, and here, it’s simplified so that you can get to work quickly.

Three Tips for Building Complex Prototypes in Figma

Here, you’ll learn three tips for complex Figma prototypes. They will help you dial in the specifics you need to put your work to the test.

Other Figma Tips & Tricks

To close out our tutorial roundup, we’ve compiled even more helpful resources. These written guides and videos help you make the most of Figma by unlocking its most powerful features.

10 Figma Hacks for Boosting Your Productivity

Users of every skill level can always enjoy learning new skills. Here, ten Figma tips and tricks are featured to help you do your very best work. It’s a fast read that may save you hours of work.

15 Tips to Design Faster in Figma

Expert Figma users know tips and tricks that save time. Here, 15 of these are compiled into one fun video. It’s essential viewing if you want to master Figma.

How to Export Figma to HTML

Exporting HTML is easy in Figma – and you don’t have to learn to code! Learn exactly how in this written tutorial. Prefer a video? You’ll find a link here too.

Advanced Figma Tips & Tricks

Advanced Figma features help you focus on details and fine-tune designs. Here, you’ll learn how to scrub fields, save image styles, add properties, and so much more.

How to Build a Design System in Figma

You don’t have to construct design systems from scratch. Figma supports work just like this, and the fundamentals are mapped out in this tutorial guide.

What is FigJam?

FigJam is a whiteboard built by Figma that works online. It’s an effective tool for design and collaboration. Learn the basics and get to work with FigJam after learning about the features in this tutorial.

The post 25 Fantastic Tutorials For Learning UI Design in Figma appeared first on Speckyboy Design Magazine.

From blurring to color adjustments and adding shadows, they can enhance the look and feel of your photos and web elements, making them more engaging.

This article is a curated collection of CSS filter resources, including CSS filter libraries, JavaScript plugins, web-based apps, and tutorials.

You might also like these toolboxes: CSS Flexbox, CSS Animation, Styleguide Tools, or Tools for Formatting CSS.

CSS Filter Libraries

Collections of pre-designed libraries and classes that you can use to apply various CSS filter effects to photos or any web element.

CSS Filter JavaScript Plugins

These plugins will extend CSS filter capabilities, allowing for more dynamic and interactive effects through JavaScript integration.

CSS Image Filter Web-Based Apps

Web-based tools and applications where you can experiment with filter effects and generate CSS code in real-time.

CSS Filter Tutorials & Guides

Educational resources, guides, and how-to articles focused on teaching you how to create and implement CSS filter effects manually.

• CSS filter on MDN
  Detailed documentation on CSS filter usage and properties.
• Filters on web.dev
  Tutorials and best practices for using CSS filters effectively in web projects.
• Filters & Blend Modes for Beginners
  Beginner-friendly lessons on creating ‘magic’ with CSS filters and blend modes.
• How To Add Filter Effects to Images
  A tutorial from W3Schools for learning how to apply basic CSS image effects.
• Complete Guide to Using CSS Filters with SVGs
  Explore the integration of CSS filters with SVGs for advanced web design techniques.

The Simplest CSS Filter Tutorial

With just a few lines of HTML and CSS, you can quickly create a dynamic effect that changes a photo to black and white when you hover over it. This simple technique can add an engaging element to your web projects.

First, we need to set up the HTML structure. This will include just a basic container for our image. Replace your-image-url.jpg with the path to your image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Simplest CSS Filter Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="image-container">
    <img src="your-image-url.jpg" alt="Example Image">
</div>
</body>
</html>

Next, the CSS to style the image and apply the grayscale() filter on hover. Create a style.css file and add the following CSS code:

.image-container img {
    width: 100%;
    transition: filter 0.5s ease;
}

.image-container img:hover {
    filter: grayscale(100%);
}

The CSS does two things:

1. It ensures that the image fits within the container by setting its width to 100%.
2. It adds a transition effect so that the change to grayscale happens smoothly over 0.5 seconds when the mouse hovers over the image.

List of all the CSS Filters

CSS filters offer a range of effects, from color adjustments to blurring and shading. Here's a closer look at each filter:

• blur(): Adds a blur effect, simulating a lens out of focus. The intensity is adjustable in pixels.
• brightness(): Makes an image brighter or darker. Values over 100% increase brightness, while below 100% decrease it.
• contrast(): Enhances or reduces the difference between the darkest and lightest tones in an image.
• drop-shadow(): Applies a shadow behind an element, customizable in color, size, and direction.
• grayscale(): Converts an image to shades of gray, with 100% being completely gray.
• hue-rotate(): Rotates the hue of an image around the color wheel, measured in degrees.
• invert(): Inverts the colors of an image. 100% inversion swaps all colors for their opposites.
• opacity(): Adjusts the transparency of an element, with 0% being fully transparent.
• saturate(): Controls the intensity of colors, with values over 100% enhancing saturation.
• sepia(): Applies a sepia tone, making the image look like an old photograph.

The post CSS Filter Toolbox – Libraries, Web-Based Apps & Tutorials appeared first on Speckyboy Design Magazine.

If you’re looking to learn more about what CSS Grid is and what it does, you’ve come to the right place. We’ll provide a rundown of what you need to know, along with some helpful resources to get you started.

First Thing’s First

One thing we need to note is that, as of this writing, CSS Grid is still a work in progress according to the W3C. That means that the final version of this specification hasn’t been fully released just yet. Overall, browser support is a bit spotty. But that will certainly change as the final spec rolls out.

That being said, it’s never a bad idea to get ahead of the curve when it comes to learning new techniques. Just keep in mind that some things may change between now and the official release. With that fair warning out of the way, let’s dig in and learn more about this important development in web design.

Layout in 2-D

CSS Grid is a system that allows for building 2-D grid layouts. While the term “2-D” doesn’t sound so groundbreaking, it absolutely is in this particular case. You see, CSS Grid will allow you to manage layout according to both columns and rows.

Flexbox, by comparison, is really just meant for columns (1-D, if you will). Using CSS Grid, designers will be able to achieve layouts that were downright difficult before. In fact, some of these things were on our wish lists since the days of table-based layouts.

With tables, it was easy enough to have a column take up multiple rows using the rowspan attribute. CSS didn’t really have a direct equivalent. That led to using multiple nested containers, floats, clearfixes, etc., to achieve the desired effect. This is exactly what CSS Grid aims to fix.

The good thing is that if you are at all familiar with Flexbox, then you’ll be off to a great start with CSS Grid. With both Flexbox and CSS Grid, things are set up via a parent container and subsequent items (children). And, like Flexbox, content order can be set via CSS. This is particularly nice when adjusting the content for mobile devices. What shows up first on a desktop grid may be pushed down lower in the display order on smaller screens.

A Simple CSS Grid Example

Let’s look at a very basic CSS Grid layout. There are three columns and two rows. The third column is unique in that it spans both rows and will display on the right side of the layout.

It actually takes very little code to make this happen. Take a look:

The CSS:

.container {
display: grid;
grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
grid-gap: 10px;
grid-template-rows: [row1] 47% [row2] 47%;
text-align: center;
color: #FFF;
}

.grid-cell-1 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-2 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-3 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-4 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-5 {
background-color: #898989;
grid-column: 3 ;
grid-row: 1 / 3;
padding: 25px;
border-radius: 6px;
}

A few notes on the CSS:

• In .container, notice that we have the ability to define the width of columns and height of rows. We can also individually name columns and rows with the use of brackets: [name]
• .grid-cell-5 has a couple of interesting attributes. grid-column: 3; tells the browser to start this item as the third column. Meanwhile, grid-row: 1/3; says that the cell will span from the first row until the start of the (non-existent) third row.

The HTML:

Doing this type of layout without CSS Grid would be significantly more challenging. There are, of course, several more complicated layouts that can be achieved. But hopefully, this will illustrate the ease with which something basic can be set up.

The Demo:

See the Pen Simple CSS Grid by Eric Karkovack

CSS Grid Resources

There are a number of outstanding guides and tutorials out there to help you make the most out of CSS Grid. Here are just a few to get you started:

• 10 Creative Examples of CSS Grid in Action
• A Complete Guide to Grid By Chris House
• CSS Grid Layout By Mozilla Developer Network
• Grid by Example By Rachel Andrew
• A Complete Guide to CSS Grid By Codrops CSS Reference
• An Introduction to the CSS Grid Layout Module By Ahmad Ajmi

The post An Introduction to CSS Grid appeared first on Speckyboy Design Magazine.

Text-based hyperlinks are a great example. Virtually every website used the same default shade of blue. It was possible to change the link color. But most sites tended to stick with blue.

Yes, it was boring on the surface. But it was also a great way to help users quickly spot links. Designers couldn’t implement fancy styles. And so, the first generation of web users learned to look for blue, underlined text.

Then CSS came along and completely changed what was possible. Hyperlinks could be any color of the rainbow. They could also sport backgrounds, animations, and custom typography.

Plus, we could change link styles based on context. That made it possible to have differently styled links in your header and content areas, for example. It’s great to have options. But there are also some drawbacks.

Sometimes we take custom link styling too far. We trade simplicity for complexity. That can make it harder for users to discern. It impacts both usability and accessibility.

So, what should we keep in mind when styling hyperlinks? Here are some tips for making them beautiful and keeping them usable.

Make Hyperlinks Easy To Recognize

Users are more web-savvy than they were a few decades ago. Web designers recognize this. But it sometimes leads them to give users a bit too much credit.

We see examples in links that are barely perceptible. Perhaps the link color is nearly identical to the rest of the text. Or the underline blends into the page background.

Subtlety has its place in design. But that doesn’t apply to hyperlinks. They need to stand out – regardless of how you style them.

The link’s color should contrast with other text. And it needs to pass accessibility guidelines as well.

Links should also include one or more design features. That could be an underline or a change in font weight. This helps colorblind individuals discern a link from plain text.

Another accessibility note: always use the outline property on the link :focus state. Users navigating via the keyboard can more easily identify your links. We’ve used it within all snippets here.

See the Pen Styling Hyperlinks:Make Them Recognizable by Eric Karkovack

Underlines Should Be the First Choice

CSS opened the floodgates in terms of how we style hyperlinks. And many designers used it to remove underlines.

Jettisoning underlines may result in a “clean” look. However, it also makes links harder to recognize. It’s particularly troublesome in body text.

Long passages of text can frustrate users. It becomes hard to maintain focus. But things get worse when they can’t spot any links within.

That’s why underlining links should be your first choice. It’s a simple feature that makes skimming content easier.

The unfortunate thing is that client preferences can get in the way. Some associate underlines with old school web design.

This is a great time to educate them. Explain how underlines help users get where they need to go. The
added convenience could result in more conversions. Hopefully, that will convince them to put users first.

Besides, we can use CSS to make underlines more attractive. The text-decoration-color and text-decoration-style properties add plenty of styling options. Underlines may be old-school, but they don’t have to be boring.

See the Pen Styling Hyperlinks:Use Underlines by Eric Karkovack

Ensure That Styling Is Consistent

Link styling should also be consistent. Navigating a website will become more predictable. Users won’t have to think twice about how to get around.

Every link doesn’t have to look the same, however. Context also plays a role here. For example, you may use different styles in your site’s header and footer. And content within a sidebar could look different than the body text.

These different styles should be implemented within reason, though. The look should fit a defined pattern.

Using radically different typography, for instance, may throw users off. As with other design elements, there should be a rhyme and reason in how links look and work.

See the Pen Styling Hyperlinks:Stay Consistent by Eric Karkovack

Links Can Be Beautiful and Functional

Styling hyperlinks runs the gamut. Some web designers completely ignore them. Others add a kitchen sink worth of custom CSS.

When it comes to usability, the former is probably the safer path. Users will be able to spot links in the middle of your content.

Still, it’s possible to achieve a balance. You can create custom styles to dress up links to match your brand. And you can do so in a way that keeps users in mind.

Therefore, don’t be afraid to experiment with link styles. Just keep your site’s goals along with best practices in mind.

The post The Dos & Don’ts for Styling Hyperlinks appeared first on Speckyboy Design Magazine.

We often use established design patterns. Navigation is placed at the top or along the side of a page. Headings and white space create content separation. You get the idea.

This process works well. But CSS allows us to go the extra mile for users. We can now cater to their preferences as well.

By detecting a user’s system preferences, we can serve styles to match. It’s all possible through CSS media features.

Here’s a look at the various user preferences we can detect. We’ll also explore how they can help us improve usability and accessibility.

What’s Being Detected? Where Does It Come From?

The term “user preference” can have multiple meanings. In web design, it has traditionally referred to saving preferences locally. A user selects from various options on your website. From there, preferences are stored and retrieved via a cookie.

But CSS enables a different approach. A media query can detect user preferences at the device level. That allows us to retrieve a user’s configuration. We can then adjust the website’s styles accordingly.

This isn’t a way to spy on users. The data doesn’t look at personally identifiable information. The user isn’t required to have an account on your website. And the data won’t allow you to track someone.

Users can set preferences in their browser or operating system. Color schemes (dark or light), color contrast, and reduced motion are primary examples. It’s up to individual websites to detect and/or respect those settings.

This method increases privacy and efficiency. Users don’t have to divulge personal information. And web designers won’t have to build custom settings.

Examples of Detecting User Preferences with CSS

Now it’s time to explore a few examples. We’ll use three media features included with CSS.

Color Scheme

The prefers-color-scheme media feature detects a user’s device color setting. The choices are “light” or “dark” modes. Both mobile and desktop operating systems offer this feature.

If a user prefers a dark color scheme, you can use CSS to implement relevant styles. Below is an example of prefers-color-scheme in action.

See the Pen Using CSS prefers-color-scheme by Eric Karkovack

So, what if a user doesn’t want a dark website? You can use a toggle to let them switch between modes. Providing this flexibility makes your website even more user-friendly.

Color Contrast

A high-contrasting color scheme is easier to read. Operating systems tend to include the option in their accessibility settings.

It’s possible to detect this preference via CSS prefers-contrast. This setting allows for a bit more ambiguity than prefers-color-scheme. Options for “more” and “less” are the most common.

However, the “custom” option requires a specific set of colors. In that case, we can use forced-colors to adapt the page.

The following example uses a gray background by default. If the prefers-contrast preference is set to “more,” we’ll change it to white.

See the Pen Using CSS prefers-contrast by Eric Karkovack

Reduced Motion

Web animation can be a great thing. It adds interactivity and context to an element. But certain types of animation can be harmful.

Users with vestibular motion disorders can become ill – or worse. That’s why it’s best to avoid intense flashing animations.

Some devices have a setting that requests that websites use minimal motion. The prefers-reduced-motion media feature will detect the setting.

The following example includes a rotating square. Note that we’ve been careful to use a slower form of movement. But if the prefers-reduced-motion setting is “reduce,” we’ll stop the animation.

See the Pen Using CSS prefers-reduced-motion by Eric Karkovack

Want to try the setting? MDN has a handy guide for locating it on your device.

Instantly Improve the User Experience

CSS provides some great ways to detect user preferences. They’re easy to use. And they take the guesswork out of building clean, accessible UIs.

Granted, we don’t have to follow a user’s device preferences. And our clients may be wary of different color schemes.

But even slight tweaks to reduce motion and increase contrast are helpful. They amount to little things we can do to improve the user experience (UX). That will benefit everyone.

The post How to Detect User Preferences with CSS appeared first on Speckyboy Design Magazine.

The result is an inconsistent design. Things like colors, animation speed, and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.

CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!

Set a Value Once, Use It All Over

Those familiar with programming languages such as PHP and JavaScript may recognize the term “variable.” A variable sets a value (static or dynamic) that can be retrieved later in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.

Similarly, CSS variables are there to repeat a value throughout a stylesheet. At the bare minimum, this saves us from typing in a font family or hex color code multiple times.

You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.

CSS variables are a native solution. They’ll save you from having to use a preprocessor unless you really want to. Now, any stylesheet can take advantage of this handy feature.

And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.

A Basic Example of a CSS Variable

Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons, and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.

Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:

:root {
--speckyboy-blue: #4F78A4;
}

The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for every instance where we want to use this pretty shade of blue.

If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:

color: var(--speckyboy-blue);

The following example shows how the variable can be used in multiple places. We also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design for good measure.

See the Pen Basic CSS Variable by Eric Karkovack.

Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.

CSS Variable Resources

Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:

• A Practical Guide to CSS Variables (Custom Properties) by SitePoint
• Everything you need to know about CSS Variables by freeCodeCamp
• Global and Component Style Settings with CSS Variables by Sara Soueidan
• It’s Time To Start Using CSS Custom Properties by Smashing Magazine
• Logical Operations with CSS Variables by CSS-Tricks
• MDN: Using CSS custom properties (variables) by MDN
• What is the difference between CSS variables and preprocessor variables? by CSS-Tricks

The post How CSS Variables Can Improve Efficiency & Consistency appeared first on Speckyboy Design Magazine.

CSS media queries have long been the go-to tool. But it’s getting more difficult to account for evolving screen resolutions. If a device fails to match the viewport range you’ve set, the results can be less than ideal.

That’s where CSS clamp() can make a positive impact. It doesn’t rely on predefined viewport sizes. Instead, it provides a range of values and allows the web browser to scale an element as needed.

clamp() doesn’t necessarily replace the need for media queries. But it may well reduce the number of styles we place within them.

The following are basic examples of how clamp() can be used to produce better responsive designs. Let’s get started!

What Is CSS clamp()?

The concept of clamp() can be a bit confusing. But stripped down to the basics, it provides a way to combine the min() and max() functions into a singular line.

So, before we go any further, it’s important to note that clamp() is a means of setting a minimum and maximum value for an element. That could be text, the sizing of a container, or just about anything else that needs to be responsive.

A typical line could look something like this: font-size: clamp(1.125rem, 2vw, 1.5rem);

Note the first and last values. In this case, 1.125rem is the minimum value, while 1.5rem serves as the maximum.

Still with us? Great! Now, about that rascal in the middle…

The middle number above (2vw) is our preferred value. MDN defines it as: “The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.”

As such, we can think of it as the border between two countries. Move to the left, and you’re in Portugal, where the minimum value applies. Go to the right, and you’re in Spain, where the maximum will be used.

The preferred value can be a constant number or a mathematical expression. This allows for fine-grain control over how it’s calculated.

But back to our example. Taking a cue from MDN’s documentation, our font size will initially be set at 1.125rem.

However, once our preferred value of 2vw is greater than 1.125rem, our text will scale up to the maximum of 1.5rem.

In practice, small screens will see the minimum value, while big screens get the maximum. The preferred value merely sets the threshold.

A Few Basic Examples of clamp()

Now that we know a bit more about what clamp() does, let’s take a look at it in action. The following are examples that demonstrate the function’s basic capabilities.

Fluid Typography That Adjusts to Screen Size

Creating responsive styles for text can get complicated. Staying with the desktop sizing may look overwhelming on mobile. But applying new sizing for each CSS media query means more maintenance. And getting the scaling just right can be a pain.

Thankfully, fluid typography is an area where CSS clamp() excels. The function allows text to scale based on the parameters you’ve set. Best of all, a single line of code replaces what used to require multiple instances.

Here, we’ve set our body and h2 text to scale based on the viewport. Large viewports will see bigger fonts. Meanwhile, the text shrinks accordingly on smaller screens.

Our body text will display between the defined minimum and maximum sizes (1.125rem – 1.5rem, or 18px – 24px). The h2 text has a min/max of 2rem – 2.75rem (32px – 44px).

See the Pen CSS clamp() Demo – Heading & Body Text by Eric Karkovack

A Container That Adjusts for Large Viewports

When dealing with responsive containers, we can’t forget about large screens. 1080p (1920×1080) is now serving as something of a minimum resolution for desktop and laptop devices. Thus, it’s important to consider how layouts impact these users.

A container that stretches the full width of the viewport can be cumbersome – particularly if it includes text. Having too many characters per line makes the text harder to read on large screens. Whereas this configuration is more desirable on mobile.

This example uses clamp() to improve the user experience across viewports. Small screens, where our maximum value of 90vw is greater than our 1100px preferred value, will receive a wide container.

On large screens, the container will display at its preferred value. This should make for easier reading.

Also of note is our minimum value of 40vw. It only comes into play on exceptionally large viewports. The value could be increased if you want to see it triggered sooner.

See the Pen CSS clamp() Demo – Container Width by Eric Karkovack

clamp() Down on Your Responsive Styles

As CSS evolves, it provides us with more advanced tools. They often increase efficiency and push more of the “dirty work” to browsers. clamp() certainly fits this mold.

In this case, it means having less code to maintain. By reducing the number of styles we place into media queries, clamp() makes our job easier. In addition, it keeps our designs looking good across devices – even those with unique viewports.

Best of all, it’s supported in all modern browsers. Therefore, it’s something you can immediately add to your workflow.

To learn more, please check out the resources below!

Further CSS clamp() Resources

• clamp() by MDN
• min(), max(), and clamp() CSS Functions by Ahmad Shadeed
• min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets
• Intrinsic design, theming, and rethinking how to design with WordPress by Justin Tadlock
• Modern Fluid Typography Using CSS Clamp by Adrian Bece

The post Better Responsive Design With CSS clamp() appeared first on Speckyboy Design Magazine.