Posts by:
PeHaa

Embedded CodePens and React – what may happen and how to fix it
We’re currently working on moving pepsized.com to JAMstack. This website has run and still does as a “classic” WordPress. We may still change our minds about the technology, but right now we are considering a static website generated by GatsbyJS with WordPress as a headless CMS. There are a few challenges, in particular, our demos […]


Discover Gutenberg and play with Custom CSS in this video course
It’s been a while since I started giving regular WordPress classes and workshops. Recently, I was approached by the Skillshare platform who encouraged me to build an online course around WordPress. Saying yes was definitely not an easy decision, but I finally decided to give it a try. Build and Customize a Modern WordPress Front […]

Beer Slider Responsive & Accessible Before-After Slider
Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be […]

Simple Solution for Page Notifications
In this article, we’d like to share with you a small JavaScript library that we developed for one of the projects that we’ve been working on recently. In our latest project we needed a simple and lightweight solution for the page notifications. Within the project we have notifications of several types – success or error […]

Customize your Google Map Markers
In his previous post JoeVains shared with you a pack of location icons. This post is for those who do not have much experience with customizing Google maps with Google Maps Javascript API.
I’ll show you how to generate a map and add markers using our location icons (you can also use your own if you wish). We’ll discuss improving user experience and browsers inconsistencies. Enjoy!

One More Fancy Hover Effect
Let’s celebrate the summer time! In this css tutorial we discuss one more fancy hover effect. We use :after pseudo-elements with custom data-attributes and css transitions. At the same time we feature the beautiful Summer Icon Pack by vector4free. Enjoy!

Css-only Alternative to the Select Element
In this tutorial, I will present you my alternative solution to the select form tag. It’s css-only and it looks really nice. We will use a list of radio elements, styled as a drop-down list, that will look and behave similarly to the select element.

Icon Fonts in Use with a Fancy Hover Effect
In this tutorial we will play a bit with icon fonts.
Besides other advantages, this technique provides an easy way to have your icons look crisp on retina displays. We’ll use a custom set of social icons generated with IcoMoon App. We will use css3 transitions and pseudo-elements to add a fancy effect on hover.

Sweet and Subtle Free Hearts PSD Patterns
This time I share with you a pack of sweet and subtle seamless photoshop patterns. Full of hearts, they may be especially useful for Valentine’s Day. Enjoy!

Css-only Lavalamp-like Fancy Menu Effect
In this tutorial we create a css-only sliding menu effect (also known as Lavalamp effect). No javascript, just css3 transitions and the general sibling combinator selector.

50 Abstract Geometric Wallpapers
This time we prepared for you a pack of fifty 1920px x 1200px background images. You can use them as desktop wallpapers or simply as backgrounds in your designs. Free for personal and commercial use. Enjoy !