Kilma Basita 4

For this version, I created a custom “Kilma” background using Inkscape.

The image here is rendered as a png.

If you go to Codepen, make sure you change the view to Full to get the er Full Effect.

Next step (Kilma 5), will be to render it as an embedded SVG file — but suddenly there’s a web design / aesthetic problem to deal with now.

Notice how boring and square the card looks next to this cool (for someone who is not a graphical design artist!) background?

The two elements do not “go” together at all.

Can anything be done about that?

Kilma Basita 3

So now I’ve added a 1-sec fade to when you transition from seeing a word, then view its definition on the “back” of the card. I also blurred a free pic of a mosque (photo by Manprit Kalsi) that I downloaded from Pexels to use as background.

So far so good.

But what if I wanted to see not just 1 word, but a bunch of them?

Meaning in more formal terms:

  1. provide the ability to store a lexicon of words
  2. let 1 mouse click bring up the next word in a fixed sequence (ie, from the lexicon)

For this, we are going to have to add JavaScript functions.

But before we do that, would it be possible to have an embedded SVG image as  background, instead of a link to a jpg pic (which is what Basita 3 does)?

If so, then it might also be instructive to try some SVG special effects, such as blurring.

Okay, these next posts will be technical, so I will put them up on my technical blog, and link to them from here with a general audience non-technical post.


leaving america

Kilma Basita 2

Here is an improvement over the initial version.
I got rid of the flip or card rotation, and made it so that you can see a word, then, if you hover a cursor anywhere over the card, its definition on the “back” of the card.
That is a good start.
I won’t go over the code, because this is not a tech blog.


All’s well and good so far, what if I wanted to slow down the transition from front to back of the card? Can this be done?