Author: Ahmad Shaded by SitePoint

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

In the course of a project, you might encounter a component that has text above the image. In some cases, depending on the image used, the text is difficult to read, such as the text is white and the background is light.

There are a few different solutions to this situation, such as adding gradient overlay or shading to the background image, text shadows, etc.

Introduction to the

Every solution should solve a problem. Let’s explore the question of the case. When designing components with text at the top of the image, we need to take care that the text must be easy to read.

Note above that the version without gradient overlay is almost unreadable, to the user’s detriment. To solve this problem, we need to add a layer below the text to make it easier to read. There are also caveats to adding layers. Accessibility is not considered in many solutions.

Multiple solutions

There are several solutions to make text easier to read. Let’s look at each of them.

As the figure above shows, there are different solutions to this problem. Note the gradual solution. Why is that? Because this scheme tends to make the text less accessible.

The solution

The Gradient Overlay

In general, gradient overlay is the most common solution for making text on an image sharper, so let’s focus on that.

There are two ways to implement gradient overlay:

  1. Use a separate element for the gradient (pseudo-element or empty)<div>)
  2. Apply the gradient as the background image.

Each of these approaches has its advantages and disadvantages. Let’s take a look.

.card__content {
  position: absolute;
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to top, rgba(0.0.0.0.85), transparent);
}
Copy the code

At first glance, you might think that the gradient works well, but this is not comprehensive enough. If we tested the same gradient with a wider variety of images, the results would look like this:

The contrast between white text and images is not always sharp. This is fine for some people, but using this gradient is a huge mistake because the text is not accessible.

The reason is that the gradient should cover more space in the vertical direction, so it needs to be bigger. Gradients equal to the size of the content cannot be used in all cases. To solve this problem, we can use min-height, as shown below:

  • .card__content element min-height.

  • Flexbox pushes the content to the bottom.

.card__content { position: absolute; /* other styles (left, top, right, and padding) */ display: flex; flex-direction: column; justify-content: flex-end; Background: Linear-gradient (to Top, RGBA (0, 0, 0, 0.85), transparent); }Copy the code

Another solution is to use just padding-top instead of min-height and flexbox.

.card__content { position: absolute; padding-top: 60px; Background: Linear-gradient (to Top, RGBA (0, 0, 0, 0.85), transparent); }Copy the code

Notice the difference between the left card and the right card, the gradient height is larger.

That looks good. Can we do better? Is, of course!

Slow gradient

If we look closely, we can see that the gradient ends abruptly, which is known as the hard edge phenomenon.

To make it even better, we can apply the concept of easing to gradients. This way, the gradient will look more natural and you won’t notice the hard edge at the end of the gradient.

In CSS, we need to have multiple gradient stop points to ease, because at the time of writing there was no native way to do this. The good news is that the CSS working group is discussing the possibility of implementing easing in CSS tweening, but it is not clear when.

Thankfully, Mr. Andreas Larsen created a handy PostCSS and Sketch plugin to convert normal gradients into simplified gradients.

Here is the CSS gradient from the above example:

.card__content { background-image: Linear-gradient (0DEG, HSLA (0, 0%, 35.29%, 0) 0%, HSLA (0, 0%, 34.53%, 0.034375) 16.36%, HSLA (0, 0%, 32.42%, 0.125) 33.34%, hsla (0.253125) 0, 0%, 29.18%, 50.1%, hsla (0.4) 0, 0%, 24.96%, 65.75%, hsla (0, 0%, 19.85%, 0.546875) 79.43%, hsla (0.675) 0, 0%, 13.95%, 90.28%, hsla (0.765625) 0, 0%, 7.32%, 97.43%, hsla (0.8) 0, 0%, 0%, 100%); }Copy the code

The level of the gradient

Not only can the text on the image be vertical, we can also use them as horizontal gradients. In cases like the one below, it requires a horizontal gradient.

This is the CSS gradient above, and I used the tools mentioned earlier to generate the softened gradient.

background: Linear gradient (to the right, an HSL (0, 0%, 0%) 0%, hsla (0.964) 0, 0%, 0%, 7.4%, hsla (0.918) 0, 0%, 0%, 15.3%, hsla (0, 0%, 0%, 0.862 23.4%), hsla (0.799) 0, 0%, 0%, 31.6%, hsla (0.73) 0, 0%, 0%, 39.9%, hsla (0.655) 0, 0%, 0%, 48.2%, hsla (0, 0%, 0%, 0.577 56.2%), hsla (0.497) 0, 0%, 0%, 64%, hsla (0.417) 0, 0%, 0%, 71.3%, hsla (0.337) 0, 0%, 0%, 78.1%, hsla (0, 0%, 0%, 0.259 84.2%), hsla (0.186) 0, 0%, 0%, 89.6%, hsla (0.117) 0, 0%, 0%, 94.1%, hsla (0.054) 0, 0%, 0%, 97.6%, hsla (0, 0%, 0%, 100% 0));Copy the code

Blend solid colors and gradients

Here’s a look at the model from Netflix. On the home page of the unlogged user, there is a title with a large background image.

I like it, but it hides a lot of graphic detail. Be sure to use this feature only if the image is decorative.

<div class="hero"> <img src="cover.jpg" alt="" /> <div class="hero__content"> <h2>Unlimited movies, TV shows, and more.</h2> <p>Watch anywhere. Cancel anytime.</p> </div> </div>``` <div class="hero"> <img src="cover.jpg" alt="" />  <div class="hero__content"> <h2>Unlimited movies, TV shows, and more.</h2> <p>Watch anywhere. Cancel anytime.</p> </div> </div>Copy the code
.hero:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; Background: rgba(0, 0, 0, 0.4); Background-image: Linear gradient(to Top, Rgba (0, 0, 0, 0.8), Rgba (0, 0, 0, 0) 60%, Rgba (0, 0, 0, 0.8) 100%); }Copy the code

Here is the disassembly process.

Gradient overlay and text shadow

There is a useful trick for making text better than graphics. It’s the use of text-shadow, which may not be easy to notice, but can be very useful in cases where the image won’t load.

Look at the following example:

. Whatever -text {text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }Copy the code

Gradient overlay, text shadows and opacity

This is a pattern noticed in Facebook’s video player. They use a variety of techniques to make text (and other UI elements) clearly visible. When working with a video player, it’s important to make sure the elements above it stand out.

.player__icon {
  opacity: 0.9;
}

.player__time {
  color: #fff;
  text-shadow: 0 0 5px #fff;
}
Copy the code

The playback icon is opacity: 0.9. This helps to blend them into the background below. There is a sense that controls are mixed together.

In addition, using white text shadows in white text is an effective way to make the text clearer. Do you want to prove that the above method works even if the background is a completely white image? Give it to you.

YouTube does something similar with their videos.

Radial gradient

One interesting solution I learned from Netflix is to use radial gradient. Here’s how it works:

1. Set the background color.

  1. Place the image at 75% width in the upper right corner.

  2. The overlay is equal to the size and position of the image.

.hero {
  background-color: #000;
  min-height: 300px;
}

.hero__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  object-fit: cover;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  height: 100%;
  background: radial-gradient(
    ellipse 100% 100% at right center,
    transparent 80%,
    #000
  );
}
Copy the code

However, the Netflix team used an image as an overlay. It’s not clear why, it could be a cross-browser issue or something else.

Select an accessible overlay color

This is a great tool to help us choose the right overlay opacity based on the image.

In general, if you make sure that the gradient overlay fills the text correctly and has a good color contrast, that’s fine.

test

The solution has to be tested before it can be considered good, right? One way I test the gradient overlay is by adding a white background underneath it. If the text is readable, the gradient will apply to any image we use. If not, adjustments and enhancements are needed.

In the example above, I chose a solid color under the heading with a contrast of 4.74, which is better.

~ finish, I am brush bowl wisdom, we see you next time!

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: ishadeed.com/article/han…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.