Category: Tutorial

background-image

Gold Text effect in Procreate – Digital Handlettering on iPad

YouTube Video

This is the real time version of how I do gold effects for text in Procreate.

The Gold shades I use are the ones from (Wikipedia)[https://en.wikipedia.org/wiki/Gold_(color)]
You can download the gold swatch palette for procreate (here)[http://bit.ly/halfapxGold]

background-image

Sass image slider with text animation

A responsive image slider with textoverlay, without any JavaScript

A few months ago I showed you how to write an image slider with Sass only. A while ago I was asked to write a slider with text and animating that text as well. So I took the code and modified it to suit my needs. Today I wanted to sit down and write a post about it, because it has been a while, sorry for that.

Continue reading “Sass image slider with text animation”

background-image

A Responsive Multi-Level-Menu without JavaScript

Using the checked-hack to create a responsive dropdown menu

It’s been a while since I wrote something about doing JavaScript work with CSS. So I decided to create this responsive navigation using the :checked hack.

Continue reading “A Responsive Multi-Level-Menu without JavaScript”

background-image

Previous and Next Links within jekyll Collections

how a navigator for jekyll collections is written

If you want to add some navigation links within jekyll posts that bring you to the previous and next one, it’s a fairly simple thing to achieve, since all articles are found within the paginator. I’m showing you how to do the same thing for collections.

Continue reading “Previous and Next Links within jekyll Collections”

background-image

A sticky navbar for blogger that is not 100% wide

how to fix a blogger navbar without it having to be 100% wide.

I think the first thing I did using JavaScript in Blogger was wa sticky nav. For me this always meant a sticky nav that’s 100% wide. That’s pretty simple to accomplish, but what do we need to do, to make this nav only the width of the content, like we have it in pretty much all of the original blogger templates. With a little plugin a wrote a while ago, this will be done in minutes.

Continue reading “A sticky navbar for blogger that is not 100% wide”

background-image

A responsive Image Slider with Sass

Do JavaScript-Work with a Sass mixin

I was looking for a simple responsive image Slider featuring as little markup as possible. It should not be fancy or packed with features, just plain old scrolling through some images. While searching CodePen for inspiration I acutally ran over this pen which was doing exactly what I wanted. Also with CSS only. But when I was trying to write keyframes for another amount of images I though that it would get way overboard if I needed to recalculate the numbers whenever I wanted to change the image count. So I took over the CSS into my Sass workspace and wrote a mixin for the keyframes. This is what I want to go over today. You can check out the demo here if you want to have it full screen.

Continue reading “A responsive Image Slider with Sass”