Stories by RareProgrammer on Medium

Sliding Tabs using CSS

RareProgrammer — Sat, 03 Dec 2022 02:41:11 GMT

Sliding tabs using CSS can be helpful when creating a tab bar on a website. This Tab bar uses purely created using CSS and HTML.

Also, Read- How to Create an Animated Gradient Border with CSS

How to create Sliding Tabs using CSS?

To create a sliding Tab bar we first need to write the HTML code for it

First, We will create an index.html file with the below code.



  
    
    
    
    
    Sliding Tabs using CSS
  
  
    
      
        
                  >Upcoming2        >
        
        Development
        
        Completed

Now, create a style.css file and copy the below code to it

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
:root {
  --primary-color: #185ee0;
  --secondary-color: #e6eef9;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: rgba(230, 238, 249, 0.5);
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: 0.75rem;
  border-radius: 99px;
}
.tabs * {
  z-index: 2;
}

input[type="radio"] {
  display: none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  width: 200px;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  border-radius: 50%;
  background-color: var(--secondary-color);
  transition: 0.15s ease-in;
}

input[type="radio"]:checked + label {
  color: var(--primary-color);
}
input[type="radio"]: checked + label >
.notification {
  background-color: var(--primary-color);
  color: #fff;
}

input[id="radio-1"]:checked ~ .glider {
  transform: translateX(0);
}

input[id="radio-2"]:checked ~ .glider {
  transform: translateX(100%);
}

input[id="radio-3"]:checked ~ .glider {
  transform: translateX(200%);
}

.glider {
  position: absolute;
  display: flex;
  height: 54px;
  width: 200px;
  background-color: var(--secondary-color);
  z-index: 1;
  border-radius: 99px;
  transition: 0.25s ease-out;
}

@media (max-width: 700px) {
  .tabs {
    transform: scale(0.6);
  }
}

Boom! It’s done

The source code is available on GitHub.

If you find this post helpful then please share it with your friends.

Originally published at https://www.rareprogrammer.com on December 3, 2022.

Top 9 awesome form attributes in HTML — Rare Programmer

RareProgrammer — Sat, 12 Feb 2022 23:30:00 GMT

Top 9 awesome form attributes in HTML — Rare Programmer

form attributes in HTML

Form attributes in HTML are useful for a form tag or element. Forms are required for a website to take input from the user. Forms can contain many input fields such as text, email, checkbox, radio button, etc.

Also, Read- CSS before and after pseudo elements

What is a form tag in HTML?

A form tag is useful to create many interactive input fields for the user. Whenever a website needs input from the user a form tag is useful to create a form for the user.

What are attributes in HTML?

To change or add the functionality to HTML elements we use attributes. We add attributes in the start tag of the HTML element.

What is the form attributes in HTML?

There is a total of 9 attributes we can use with the form tag in HTML. We use 2 attributes (“action” and “method”) on the form tag.

accept-charset — This attribute specifies the character encodings for the form submission
action — This attribute is useful to specify the sending location for the form data
autocomplete — This attribute is useful to toggle the form autocomplete feature
enctype — This attribute specifies how the form data is encoded when the method is post
method — This attribute is useful to specify the sending HTTP method
name — This attribute is useful to give the name to the form
novalidate — This attribute is useful to specify that the form should not be validated on submission
rel — To specify the relationship between the current document and the linked resource.
target — This attribute is useful to specify the display location on the form submit.

Form attributes in HTML

With that said, I hope you have enjoyed this guide. If you find this article helpful then please share it with others. They might be looking for help. And don’t forget to comment your thoughts on the topic “form attributes in the HTML”.

Originally published at https://www.rareprogrammer.com on February 12, 2022.

3D Bounce loading animation using CSS -Rare Programmer

RareProgrammer — Sat, 05 Feb 2022 18:05:00 GMT

3D Bounce loading animation using CSS — Rare Programmer

3D Bounce loading animation using CSS is a cool loading animation that brings attention to the website.

Step 1:

First, we will create an HTML file and write the below code.

       3D Bounce Loading   Loading

Step 2:

Now, we will create a style.css file so we can give our animation some style and cool look. You can copy the below code

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap"); html, body { padding: 0; margin: 0; height: 100%; } body { display: flex; justify-content: center; align-items: center; background: rgb(209, 209, 209); } .loading { display: flex; color: aliceblue; font-size: 4em; font-family: "Baloo Bhaijaan", cursive; text-transform: uppercase; } .loading span { text-shadow: 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.1), 0 3px rgba(0, 0, 0, 0.1), 0 4px rgba(0, 0, 0, 0.1), 0 5px rgba(0, 0, 0, 0.1), 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.2); transform: translateY(20px); animation: bounce 0.5s ease infinite alternate; } @keyframes bounce { to { text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.1); transform: translateY(-20px); } }

Step 3:

Finally, we will add some javascript to animate our loading animation. The trick here is to animate every character with some delay.

let loading = document.querySelector(".loading"); let letters = loading.textContent.split(""); loading.textContent = ""; letters.forEach((letter, i) => { let span = document.createElement("span"); span.textContent = letter; span.style.animationDelay = `${i / 10}s`; loading.append(span); });

Boom! We did it.

The source code is on Github.

Thanks for reading. If you find this article helpful then, please do share it with your friends and comment. It motivates me to write more articles.

Originally published at https://www.rareprogrammer.com on February 5, 2022.

Beautiful 3D spinner in CSS “ Rare Programmer

RareProgrammer — Tue, 25 Jan 2022 10:18:00 GMT

Today we will create a 3D spinner in CSS. You can use it as a loading animation on your website or make it a decorative element.

Step 1:

First, we will create our HTML file and write the below code to it.

Now, we will create a style.css file write the below code

https://medium.com/media/51cc5c84ece670984b50698806d2196b/href

And you have it.

The source code is available at Github. Click here for the source code.

If you find this post helpful then please share and comment.

Originally published at https://www.rareprogrammer.com on January 25, 2022.

CSS Hover Effect on Image Easiest Way

RareProgrammer — Sat, 01 Jan 2022 13:44:09 GMT

Learning CSS hover effect on an image can make you archive a beautiful website. So we will learn some basic CSS animations in this post.

Website designs usually involve hover effects. Hover effects give the user feedback about the element they are trying to click.

How does CSS know that the user hovered on an element?

CSS has a selector called “:hover” which we can use to add hover effects to any elements.

Why use hover effects?

Hover effects are a great way to interact with the user and keep him engaged with the website. So to show an interactive element of the website, like a button, we use the hover effect.

Also read: How to create shapes in CSS

How to create CSS hover effect on an Image?

First, here is the result

See the Pen CSS hover effect on Image by Rare Programmer (@rareprogrammer) on CodePen.

Alright, enough talking, let’s get started.
First, of all as with any new vanilla web project, we will be writing HTML code.

So let’s create an index.html file and then write some boilerplate code to it. Then we will create a CSS file named main.css.


  
  
  
  
  CSS Hover effect on Image

Woh! Take it easy. It’s not gonna eat you. We will understand it bit by bit.

In the head section, we linked our main.css file. And add a title called “CSS Hover effect on Image”. The rest of the code is boilerplate, you can copy and paste.

Now let’s add some more code to work with


  
  
  
  
  CSS Hover effect on Image


  
    
      
        Jhon

        I am a cool guy

      

    

     https://picsum.photos/200" alt="random pic" />

Here we have added a div tag to represent a container for our image and text slides. Then we have txtSlide and imgSlide. We put txtSlide before imgSlide, So it can cover txtSlide.

Now let’s write CSS

First, we will give our container width of 200 pixels so that we can hover over it.

.container { width: 200px; }

Then we will give our image and text slides a height and width of 200 pixels, so they are the same size. It’s important to hide text slides behind image slides.

.imgSlide {
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 5px gray;
}
.txtSlide {
  height: 200px;
  width: 200px;
  background-color: white;
  box-shadow: 0px 0px 5px gray;
}

Now we will decorate our text, and depends on the website design. Therefore, this is up to you how you want to do it. But for now, you can copy and paste the below code.

.text {
  text-align: center;
  padding-top: 50px;
  text-shadow: 0 0 10px gray;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

Now we will translate our image on Y-axis by -200 pixels, as a result we are sliding the imgSlide on the txtSlide.
We can do this by using the transform property. The transform property applies a transformation to an element.

.imgSlide {
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 5px gray;
  transform: translateY(-200px); /* Add this */
}

Now we will use “:hover” selector to the container. And when it’s hovered we will change imgSlide and txtSlide transformation.

.container:hover .imgSlide { transform: translateY(-300px); } .container:hover .txtSlide { transform: translateY(100px); }

Almost done. Our hover effect is working, but it’s not smooth.
We need to animate this, So it feels smooth. We can do this by adding transition property to “imgSlide” and “txtSlide” with a value of 0.8 seconds.

.imgSlide {
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 5px gray;
  transform: translateY(-200px);
  transition: 0.8s; /* Add this */
}
.txtSlide {
  height: 200px;
  width: 200px;
  background-color: white;
  box-shadow: 0px 0px 5px gray;
  transition: 0.8s; /* Add this */
}

Wow! We did it.

Do comment and share, It motivates me to write more new posts like this. And don’t hesitate to ask any questions in the comment section.

Read more posts on my website: rareprogrammer.com

Originally published at https://www.rareprogrammer.com on January 1, 2022.

How to Create Shapes in CSS — Rare Programmer

RareProgrammer — Sun, 19 Dec 2021 17:29:46 GMT

How to Create Shapes in CSS — Rare Programmer

Today we will learn how to create shapes in CSS.

What is CSS?

CSS is a Cascading style sheet. We can create UI for modern web pages with CSS. W3C first introduced CSS on December 17, 1996. And Håkon Wium Lie is the father of CSS.

What is a shape in CSS?

In Math, You can define a shape as the outline or as the form of an object, This is true for CSS as well, but in CSS it is in 2D form.

Why do we need to create shapes in CSS?

Shapes are an important part of the UI. If you are a UI designer, then you should know that how important are shapes.

Everything in the UI is some kind of a shape. It is very helpful when creating the UI.

You can create new and complex shapes using some simple shapes.

Let’s learn how to create shapes in CSS

Square shapes in CSS

First of all, we have to write some HTML code for our CSS to work.

Let’s break it down. First, we write a tag, and inside that, we write another which has the square class attribute.
Why do I write inside a

tag? Well, it is a personal preference. I like to have my HTML code sectioned by tags.

Next, we write CSS to create a square.

.square { height: 50px; width: 50px; background-color: blue; }

Let’s Understand this code.
First, we selected our square class. And then we give it a Height of 50 pixels and a width of 50 pixels.
Why 50 pixels in height and width?

you can replace 50 with any number but since it is a square its height and width must be equal.
Then we give it a background color which is blue, to see the shape on a white webpage.

Here is How to center in HTML

Rectangle shape in CSS

The code is the same for both square and rectangle, but now you have the freedom to change height and width.
First, we write HTML

this time we changed the class name to the rectangle. again it is a personal preference.

Now its CSS time

.rectangle { height: 50px; width: 200px; background-color: green; }

Now as you can see we can give different heights and widths. And we get a rectangle.

Now comes some tricky shapes. Let’s learn them together

Circle shape in CSS

As always we have to write HTML code, so let’s write it

Now you have learned enough that I don’t need to explain this code.

Let’s head over to our CSS section.

.circle{ height: 50px; width: 50px; border-radius: 50%; background-color: red; }

Woh! I know what’s in your mind, but let me explain it to you.
First, we set height and width to 50 pixels and background color to red.

With only height and width set to 50 pixels, we get a square.
but when we set border-radius to 50% we get a circle.
Here border-radius is 50% of height and width which is 25 pixels.

Means we get a perfect circle.

Oval shape in CSS

We will write HTML

Now its CSS turn

.oval { height: 50px; width: 100px; border-radius: 50%; background-color: black; }

Here we increased the width of the circle and we got an oval shape. This is a horizontal oval but what if we wanted a verticle oval shape.
No problem We need to increase the height.

Triangle shape in CSS

As always HTML

This is gonna be a tricky one

.triangle { height: 0; width: 0; border: 25px solid transparent; border-bottom: 50px solid orange; }

You might be thinking of “What?”
In CSS borders are a trapezoid shape.

Let’s understand this

First, we will create a rectangle

It’s CSS time

.shape{ height: 50px; width: 50px; background-color: black; }

Now Let’s give its borders some width and different colors

.shape{ height: 50px; width: 50px; background-color: black; border-top: 5px solid red; border-bottom: 5px solid green; border-left: 5px solid yellow; border-right: 5px solid blue; }

Now, as you can see borders are in a trapezoid shape.

Let’s set height and width to 0 pixels.

.shape{ height: 0; width: 0; background-color: black; border-top: 5px solid red; border-bottom: 5px solid green; border-left: 5px solid yellow; border-right 5px solid blue; }

At this point, you get that how triangles in CSS works. if not, then bear with me.

Let me remove the background color since it has no use.

Let’s make all borders, transparent except the bottom one.

.shape{ height: 0; width: 0; border-top: 5px solid transparent; border-left: 5px solid transparent; border-right 5px solid transparent; border-bottom: 5px solid green; }

And we get a tringle. Cool huh!

If you still didn’t understand then do a comment I will make a video on this topic.

Trapezoid shape in CSS

Since borders are trapezoid shape we can make a trapezoid shape as well.

Let’s do it

We need to increase the width in our previs example

.trapzoid{ height: 0; width: 100px; border: 25px solid transparent; border-bottom: 50px solid green; }

Boom! We have a trapezoid shape. It is a bottom border with a length of 100 pixels.

Parallelogram shape in CSS

Let me do the boring task

Now here is the CSS for a Parallelogram shape

.parallelogram{ height: 50px; width: 100px; background-color: red; transform: skew(20deg); }

In CSS skew() function distorts every point in an element by a certain angle.

Its syntax is skew(ax, ay) or skews (ax) where ax is an angle along the x-axis and ay is an angel along the y-axis.

Here we distorted a rectangle by 20 degrees to get a Parallelogram shape.

Conclusion

This is not over yet, you can create new shapes by combining these shapes. It all depends on your creativity. Like we can create a diamond shape by using two tringles or a parallelogram and a tringle.

Remember CSS is vast and we still don’t know its full power. CSS has many properties and we will discover them together.

If you find this post useful then please share this post and do comment. It helps a lot by motivating me. And I am starting a flutter series on my website Rare Programmer, so if you want to learn about flutter you can go to my website https://www.rareprogrammer.com as well.

Once again Thanks for reading.

Originally published at https://www.rareprogrammer.com on December 19, 2021.

How to retrieve deleted WhatsApp messages from iPhone? Get them red-handed Immediately

RareProgrammer — Sun, 28 Nov 2021 07:37:06 GMT

Hello Guys,
Today we are going to see how to retrieve deleted WhatsApp messages from an iPhone.
Sometimes we want to see deleted WhatsApp messages from the sender.
If you are an Android user then it’s easy, but if you are an iPhone user then it’s going to be a tricky one.

Let’s see How to retrieve deleted WhatsApp messages from iPhone-

WhatsApp messages stay in the notification center even if the sender deletes them.

Steps-

Go to the notification center
don’t click the notification
If you can’t read the full message, then long press to read it better.

Done

Hurry! You caught someone red-handed.

Thanks for reading this post guys.
If you find this post helpful then please share.

More about it here.