Tech Industry News

Wordpress

Need help with your website?

I’m Owen, a web developer and WordPress designer. I absolutely love building websites and helping people grow their businesses. Whether you just need a landing page or a custom tailored eCommerce solution, I’m here to design for you.

Are you ready to make your project a reality?

 

Get In Touch

Coloring Your Images With Duotone Filters

by | May 26, 2021 | Wordpress | 0 comments

Created by Alex Lende

Beginning with WordPress 5.8, you can colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images to integrate well with your themes.

Filters? Like on Instagram?

Duotone doesn’t work in quite the same way as Instagram filters. Whereas Instagram filters do color adjustments (color levels/curves and sometimes a vignette for the photo editors among us), the new duotone filters entirely replace the colors of your images.

Photo by Charles Pragnell.

You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights.

For example, a grayscale filter can be created by selecting black and white as shadow/highlight colors, and a sepia filter by choosing brown and tan.

Analogous colors can add a subtle effect and work well for cover backgrounds where the overlaid text still needs to stand out.

Much more vibrant and interesting effects can be made with complementary colors.

How Do I Add Duotone Filter?

The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. From the block toolbar, use the filter button and choose a preset:

You can also choose colors from your theme’s palette, or a custom color of your choice.

In addition to the image block, duotone can be applied to both images and video in the cover block.

Duotone

Will This Overwrite Images in My Media Library?

Images and videos in your media library will remain unchanged. The duotone effect works using SVG filters and the CSS filter property, so the image or video is never modified in your library. On the one hand, this means that you can apply a filter to an image that you link to that doesn’t exist in your media library. On the other hand, this means that the filter won’t show up in RSS feeds or places that use the image URL directly.

Can I Add Duotone Colors to Blocks or Themes That I Develop?

The API for adding duotone colors to blocks is experimental in Gutenberg v10.6. Still, the documentation for using it in your own blocks can be found and will be updated under Supports Color in the Block Editor Handbook. Themes can add duotone presets with theme.json. More information can be found under Global Settings & Styles Presets in the Block Editor Handbook.

Try it Out Now Using the Gutenberg plugin

The duotone feature was released in version 10.6 of the Gutenberg plugin, so you can try it out now prior to the WordPress 5.8 release in July.

Thanks to @joen and @mkaz for assistance writing and reviewing this post.

Read More

NASA and Tide team up to do laundry in space – CNET

If we want clean undies on the moon and Mars, we're going to have to figure out how to wash our clothes in space. Read More

WordPress 5.8 Beta 3

WordPress 5.8 Beta 3 is now available for testing! This software is still in development, so it is not recommended to run this version on a production site. Consider setting up a test site to play with it. You can test the WordPress 5.8 Beta 3 in three ways:...

Microsoft joins Apple in $2 trillion market cap club – CNET

Demand for Microsoft's products has soared since the pandemic forced many people to stay home. Read More

Philips recalls sleep apnea machines, ventilators – CNET

The company cites risks associated with the foam in some devices. Read More

Good news! Manual Porsche 911 GT3s can be sold in California after all – Roadshow

Porsche worked with California regulators to allow the manual GT3 to be sold in the Golden State. Read More

Overwatch cross-play goes live today – CNET

Team up with friends regardless of what console they're on. Read More

Fast and Furious 9 review: The Godfather II of cartoon car crash movies – CNET

Vin Diesel faces John Cena in a ludicrous action extravaganza tailor-made for driving you back into theaters. Read More

Tech Giants, Fearful of Proposals to Curb Them, Blitz Washington With Lobbying

Executives, lobbyists, and more than a dozen groups paid by Big Tech have tried to head off bipartisan support for six bills meant to undo the dominance of Amazon, Apple, Facebook and Google.Read More

Venus might be more active than we thought, scientists say – CNET

The jury is still out on tiny aliens floating above our neighboring planet, but the planet itself might be a little jittery. Read More

Surface temperatures in Siberia heat up to a mind-boggling 118 degrees – CNET

Temperature-tracking satellites are monitoring sweltering heat above the Arctic Circle. Read More
%d bloggers like this: