Video source missing

Who Needs Photoshop When You Have CSS Grid and Filters?

In by Pausha Foley

One of the great advancements in web design is the advent of modern tools, like our very own Pro, that allow you to quite literally build in the browser. This significantly improves efficiency, allowing you to bypass one whole step in the process (bye bye Photoshop). Now you can iterate on the design right in the very tool you are building your website, and that is powerful! Pro is uniquely special in this regard, and in many ways is the future of WordPress themes. And we know…that’s a bold statement…so let us prove it to you! In today’s video, we continue our exploration of a few classic pieces of cover art design from the Blue Note Records archives talking specifically about John Coltrane’s 1958 release, “Blue Train.” We’ll recreate this completely in Pro and cover detailed use of the Background Size and Background Position properties, as well as using Mix Blend Mode to “filter” our image just like you might in Photoshop…but without the Photoshop, directly in the browser. Additionally, we’ll discuss the use of CSS filters to further explore adding contrast and brightness to our images. Finally, we’ll dig into using the CSS Grid layout system to block out our album design, and use CSS transforms to creatively manipulate text…and break a few rules along the way.