If you know CSS then you can use these amazing generators and save your time

Thread 🧵👇🏻

Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps

THREAD🧵

Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow

We'll be creating a neumorphic form in steps👇🏼

2.

STEP 1:

Place a light source(virtually) on screen. In this example I'm considering that my light source is placed top left corner of the screen

3.

STEP 2:

Create a container div and set background color slightly darker than white. I picked #ecf0f3

* Make sure that the color of body and container should be same

CONTINUE...

4.

As we placed our light source on top-left corner, make sure left and top border of container should be brighter than right and bottom border.

This will make the element looks like it has the light source illuminating from the top left corner of the screen.

5.

Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇

There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be focusing on relative and absolute positioning as both are widely used

Let's start with understanding what document flow is?

📌 Elements are displayed on the screen as they written in the HTML document

Consider the following piece of code:

H1, P, H3 and div are displayed on the screen in exact order as they written in the HTML file.

As now you know about document flow, let's start with Relative positioning

📌 Relative Position

- Relative positioning do not take an element out of document flow
- Relative positioning is relative to element's original position which can be changed using offset

🔹 Relative position is relative to itself.

For example: Consider the code and output in the attached image below

As you can see red box is shifted 100px from left because I applied left offset after giving it relative positioning