Be ye forewarned, this website is currently under construction.

Chris Drinkut

Hi. I'm Chris Drinkut

I’m a big picture guy with digital marketing and web development know-how.

Drop me a line ( 🐦 ) sometime, and be well. You crazy diamond.

Code

Notes

Drinkutisms

test image

Light Image Opacity on Hover: CSS Transitions

Occasionally, you want to create an image effect where the default state of an image is a little darker. Then, when a larger-screen user hovers over the image, it brightens to encourage interaction. With this snippet and codepen setup, you can achieve that type of effect.

See the Pen hover setup – do it // TMT by Chris Drinkut (@ChrisDrinkut) on CodePen.

test image

Line Animation: CSS Animations

I’ve written a simple, but fun animation that creates a Knight-Rider ‘esk left-to-right continuous CSS animation. The keyframes rule is required for animations of this type (different from CSS transitions). Once you name an animation, you can create it and place it. Even give it stage or percentage-based changes, using a 0 to 100% scale.

See the Pen Animated Line by Chris Drinkut (@ChrisDrinkut) on CodePen.

test image

Pulsating Animation with Pseudo Classes: CSS Animations FTW

Here are a couple CSS animations working together and with pseudo selectors too, for a combined effect. It’s worth noting that CSS animations have pulse as a potential key-value pairing. Additionally, here, the use of pseudo class selectors has enabled us to create a singular element that has, essentially, three different animations. These are set up on delays as as to allow for each animation to have it’s own time to shine. 😉

See the Pen Pulsing loader animation by Chris Drinkut (@ChrisDrinkut) on CodePen.


Get Posts by Category Name: WordPress Query Tags

Let’s say you’re building WordPress website, aaaand you want to have a few blog posts from a particular category display on the page. Now, let’s say you don’t already know how to set the page template … Read on

Single Post Title: WordPress Template Tags

The single post title or single_post_title(); template tag allows one to call specifically for the title of the page’s first and foremost content. It is meant most typically for the single.php page template as a part … Read on

If (is_home() & is_front_page()) Conditional Tags

WordPress is a php-driven CMS that has a world of support and tons of flexibility and features to tap into. Occasionally, a developer may want to define what is shown as a WordPress site’s homepage … Read on