Rare Programmer

Programming, ML, Tech, and more
Create a cool 3D Game card in CSS

Create a cool 3D Game card in CSS

Today we will create a stunning 3D Game card using CSS. CSS can do many things it’s one of them. To create a 3D Game card we will use the CSS rotate() function and transition property. Also Read - How to apply background color on background image in CSS Result For those who are are impatient, here is the end result. See the Pen 3D Card by Gayane Gasparyan (@gayane-gasparyan) on CodePen....

January 29, 2023 · 2 min · 379 words · Govind Panchawat
How to apply background color on background image in CSS

How to apply background color on background image in CSS

Sometimes we need to add a colored mask on the background image of an element. Here’s how to apply background color on a background image in CSS We can use the background-image CSS property to apply background color on the background image. First, provide a linear-gradient and then the background image URL. Here is the syntax - background-image: linear-gradient(0deg, transparent, red), url(“link to image”); Also Read - Make a cool Image hover effect using CSS only...

January 23, 2023 · 2 min · 318 words · Govind Panchawat
CSS Spinner

11 CSS Spinners

This is a free collection of hand-picked CSS Spinners code examples and projects from Codepen.

January 19, 2023 · Govind Panchawat

Animated Gradient Border Generator

Hello guys! This is an Animated Gradient Border Generator that I have made for you. With this you can create a cool animated gradient border card and copy the CSS code of it. If you want to learn more about Animated Gradient border then I have written an article on it which you can find here - How to Create an Animated Gradient Border with CSS

January 17, 2023 · 1 min · 66 words · Govind Panchawat
Godot 4 2D top-down movement

How to make a 2D top-down character controller in Godot 4

A lot has changed in Godot 4. From rendering to the GD script. And this post is for those who are looking for a Godot 4 2D top-down character controller. We can create a 2D character controller using the new Godot 4 CharacterBody2D node. It is a 2D physics body node specialized for the characters moved by script. We will start by creating a separate scene for our player character. This step is optional but follow along for the sake of this tutorial....

January 15, 2023 · 5 min · 914 words · Govind Panchawat
Make a cool Image hover effect using CSS only

Make a cool Image hover effect using CSS only

Once a wise man said to become a great frontend developer let your creativity go wild. So I let my creativity run wild and came up with this awesome cool image hover effect using CSS only. Also Read - Which CSS property controls the text size? (The font-size CSS property) Learning the CSS hover effect on an image can make you archive a beautiful website. So we will learn some basic CSS animations in this post....

January 14, 2023 · 4 min · 754 words · Govind Panchawat
The font-size CSS property

Which CSS property controls the text size? (The font-size CSS property)

As a CSS beginner, you must wonder which CSS property controls the text size. I have been in this state and worry not because as you practice you will learn all the basic CSS properties. It is the font-size CSS property that controls the text size. This property can take values in 4 types of units px, em, rem, and % (percentage). These are the most used units in CSS. It can also take absolute values....

January 12, 2023 · 2 min · 331 words · Govind Panchawat
Three js games

Three js games

This is a free collection of hand-picked Three js games code examples from Codepen. Get ready to immerse yourself in the world of three.js gaming! In this article, we’ll showcase exciting games that demonstrate the power and versatility of this JavaScript library. From mind-bending puzzle games to fast-paced action games, these examples are sure to inspire you to start creating your own three.js masterpieces. Whether you’re a seasoned game developer or a curious beginner, you won’t want to miss out on these amazing examples of what’s possible with three....

January 11, 2023 · Govind Panchawat
Popup contact form using JQuery

Popup contact form using JQuery

Hello 👋 my fellow coders, In this post we will learn how to create a popup contact form for your website. Contact forms are a crucial element of any website, allowing users to get in touch with you. While there are many ways to create a contact form, using a popup form can be particularly effective. Also Read - 3D marquee effect using CSS In this post, we’ll show you how to create a popup contact form using HTML, CSS, and jQuery....

January 10, 2023 · 3 min · 431 words · Govind Panchawat
3D marquee effect using CSS

3D marquee effect using CSS

Hello 👋 my fellow developers. Today we will learn how to create a 3D marquee text effect using CSS. As a web developer, you know that adding animation to your website is an important way to engage visitors. Also Read - Beautiful animated search bar using CSS One way to do this is by using CSS to create eye-catching text effects. In this post, we’ll explore how to create a 3D text marquee effect using CSS....

January 9, 2023 · 2 min · 300 words · Govind Panchawat