Change Color of SVG on Hover – Website Design Article

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different. Let’s look at the ways. Inline SVG Inline SVG is my favorite way to use SVG anyway, in part because of how easy it is to access and style the SVG. See the Pen bJXNyy by Chris Coyier (@chriscoyier)on CodePen. If you’re used to…

Read More

functions – Adding extra SVGs to TwentyNineteen child theme using class TwentyNineteen_SVG_Icons – WordPress Website Design Article

I’m trying to change the svg of the ellipses for the mobile menu. It’s called in this file: template-functions.php so I did a hook on my child theme functions.php to replace it, like so: function replace_ellipses() { if ( function_exists(‘twentynineteen_add_ellipses_to_nav’) ) { remove_filter( ‘wp_nav_menu’, ‘twentynineteen_add_ellipses_to_nav’, 10, 2 ); } function twentynineteen_add_new_ellipses_to_nav( $nav_menu, $args ) { if ( ‘menu-1’ === $args->theme_location ) : $nav_menu .= ‘<div class=”main-menu-more”>’; $nav_menu .= ‘<ul class=”main-menu”>’; $nav_menu .= ‘<li class=”menu-item menu-item-has-children”>’; … This is only a…

Read More

Mask Compositing: The Crash Course – Website Design Article

At the start of 2018, as I was starting to go a bit deeper into CSS gradient masking in order to create interesting visuals one would think are impossible otherwise with just a single element and a tiny bit of CSS, I learned about a property that had previously been completely unknown to me: mask-composite. As this is not a widely used property, I couldn’t find any comprehensive resources on this topic. So, as I began to use it more…

Read More