daisyUI – Level up your layouts with this set of components for Tailwind CSS.
Create Figma Plugin – Want to create your own Figma plugins? This comprehensive toolkit will get you off to a fast start.
Learn CSS – Brush up on the fundamentals of CSS with this evergreen course and reference.
Signflow Free WordPress Theme – A free startup & technology WordPress theme that could be used for building startup web sites, web services, businesses, internet services, and so much more.
Unveiling Material You – This update to Material Design will transform both Android and Google.
Elder.js, the new kid on the block – Take a look at this new JavaScript framework with a focus on performance.
Dark Patterns Tip Line – Fight back against companies using manipulative dark patterns by reporting them to this service.
Why You Should Include Your Personal Passions in Your Design Work – Having interesting side projects in your portfolio can help you make the leap from forgettable, all-purpose designer to industry superstar.
Frustrating Design Patterns: Mega-Dropdown Hover Menus – A look at best practices for and alternatives to mega menus.
Sublime Text 4 – Take a look at the first stable release of Sublime Text 4. There are plenty of new features to explore.
Advanced CSS Animation Using cubic-bezier() – Learn how to create advanced animation timing functions with this tutorial.
Euismod – Get a grasp of CSS Grid with this simple online course.
Sena – Free MultiPurpose WordPress Theme – An easy to use versatile and free multi-purpose WordPress that will help you create beautiful multipurpose business websites.
10 Free Lower Thirds Templates for Adobe After Effects – A collection of free templates to spice up your video productions.
JSON in CSS – An interesting look at how to place JSON within CSS, then pluck values via JavaScript.
Waterfaller – Get your Core Web Vitals up to speed with the actionable information provided by this tool.
5 Ways You Can Contribute to the Web Design Community – Ideas for paying it forward to benefit your fellow designers.
lightGallery – A lightweight, modular, JavaScript image and video lightbox gallery plugin that is available for React, Vue and more.
Polishapp – This tool designed for UX writers lets you edit text on any webpage.
An Easy Way to Edit Block Visibility in the WordPress Gutenberg Editor – Learn to take control of your blocks with the help of a free plugin.
The post Weekly News for Designers № 594 appeared first on Speckyboy Design Magazine.
Today marks the 18th anniversary of WordPress’ launch, a day that I fondly refer to as WordPress’ birthday, which means WordPress is 6,575 days old. To celebrate another turn around the sun, the community has had parties, we have shared data, and we have told our story.
Since our last birthday we developed our 40th release and now also support over 40% of the web. So it seems fitting that this year’s celebration should be a list of 40 milestones that have helped us get there.
Grab a slice of cake or festive beverage and give it a scroll!
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.
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.
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.
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
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.
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.
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.
