Flipcard screenshot

Bootstrap card with flip side

Just looked into implementing a card with flip side based on Bootstrap’s cards (I love cards, everything is a card in this WordPress theme). I wanted to show some more contents when the visitor hovers over a card.

Here is the repo: https://github.com/seabadger-io/blog.flipcard

Here is the demo: https://seabadger-io.github.io/blog.flipcard

I’m not really impressed how it looks on mobiles, so probably I will skip such option or only use it for desktop and use some alternative on smaller screens. Also, since I wasn’t using an additional wrapper class it can result in surprises if someone edits a card, so fine tune it before using 😉 Nevertheless, it might be useful for some, so sharing it.



Tagged with
Comment

Sudoku grid – responsive squares

Admittedly not the most challenging task, but I found it entertaining. Generally speaking CSS is not very supportive when it comes to square based grids. To be more specific, making a responsive one which scales nicely. At the end I even decided to rather go with JS to make the rubrics squares, but I also reviewed the other option of making an equal side grid.



Tagged with
Comment

Star rating using CSS gradient

I had this idea, that I could use the CSS gradient background to display the ratings of a restaurant. The results might be more interesting, than useful, but it certainly has some pros as well. At the end, it may look something like this:

Hearts and stars filled with gradient

In this example the rating can be set from 0 to 5 with 1/100 increments (or smaller I guess, if that makes sense). Looks the best though if I don’t go beyond 0.5 increments as otherwise it’s not really a pixel perfect solution.



Tagged with
Comment