Automatic Today’s day name card

Today I am writing a useful code snippet which you can use in your websites or may be for yourself if you often forget the current day name like me.  This code snippet is similar to my previous snippet as it’s also based on HTML CSS card, and I am using Date object in it to get the current date and showing in a card. See the Pen Automatic Today’s day name card – simple and easy by Tayab Raza (@TayabRaza) on CodePen.

Read More

Automatic Happy New Year’s Card

I am going to share a very interesting code snippet which you can edit easily with basic knowledge of JavaScript. In this code snippet I have created a simple card with HTML, CSS and programmed it with Date object in JavaScript many of you are already familiar with Date object and some of you use it often. However, to see the result of this code snippet you have to wait until 1st January 2025 as I have configured it with time, so when the clock hit the 00:00:00 on 1st…

Read More

Card design with dynamic rainbow colours

Today I’m presenting you a very useful code snippet which you can use on your websites for different purposes. It is a Card with dynamic rainbow colours, currently the time interval is 1 second, but of course you can change it according to your needs. Also, you can change the colours or add a fade effects to the colours to make the dynamic colours card more attractive.  See the Pen Pure JavaScript Card with dynamic rainbow colors – simple and easy by Tayab Raza (@TayabRaza) on CodePen.

Read More

Card flip with CSS3 – simple and easy

Today I am going to share a Card flip effect in which I have used some CSS3 properties i.e. transform, transform-style and transition. Initially, I wanted to make this Card flip effect in pure CSS, but I had to use JavaScript’s onclick event to keep this code snippet simple. However, if you really want to achieve this Card flip effect without the JavaScript then there are some techniques to avoid JavaScript’s onclick event, for instance you can use a hidden radio button to accomplish the Card flip effect.  For the…

Read More