Pratham Profile picture
May 11, 2021 12 tweets 5 min read Read on X
Step by step guide to create this drop using CSS 💧 🧵
This drop looks tough to create but trust me its super easy and fun.

The heart of this art is border-radius and box-shadow properties. If sounds good, continue reading.... 👇🏻
First thing first, we need to create a distorted shape so that it will looks like a drop.
We can create this shape using border-radius property only.

Here's a tool if you find some difficulty making this drop shape

🔗 9elements.github.io/fancy-border-r…
Now drop is ready, We are good to go.

- Create a blue background and centralize your drop .drop {   border-radius: 51% 49% 48% 52% / 62% 44% 56% 38%;
- Add some opacity and border of almost same shade.
- Adding a border of approximately the same color will not be visible at a glance, but it will add some sort of volume to your drop opacity: 0.8;   border: 2px solid #3d93ff;
- Add a layer using ::before pseudo-element
- Height, width and border-radius should be same as drop
- Background color should be same as body color
- Add some dark blue shadow in order to give it a 3d look .drop::before {   content: "";   position: absolut
- Extend the same shadow
- Now add four layers of inset shadows

1. Blue inset shadow at right side
2. Blue inset shadow on top
3. White inset shadow at bottom-left
4. White inset shadow at bottom-left with large intensity
- CSS code for shadows mentioned in above tweet 👆🏻 .drop::before {   box-shadow: -40px 60px 32px #1b6cfb,
- Now will create a small white reflection using ::after pseudo-element.
- Create a blob and align it above the white intensity as shown in the given image below .drop::after {   content: "";   position: absolute
Final Step

- Create another small white reflection using box-shadow of ::after-element
- Reduce opacity box-shadow: 16px 40px 0 -10px white;   opacity: 0.8;
Great! This is pretty much it. Wasn't it easy and simple?

Share a screenshot of your creation below. Try it with different color scheme. Let's see how it goes 😉
Check out the full source code here:

codepen.io/prathkum/pen/x…

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

Sep 23
5 GitHub repositories will make your life 90% easier as a developer:
1. StackQL

StackQL allows you to query multiple cloud and SaaS providers (Google, AWS, Azure, Okta, GitHub, etc.) using SQL.

github.com/stackql/stackql
Image
2. Open SaaS

Starter kit for your next SaaS.

Tech stack used:

• React
• Node.js
• Tailwind
• Stripe
• Plausible

And much more...

github.com/wasp-lang/open…
Image
Read 6 tweets
Apr 30
CORS is the biggest headache for developers.

In the next 3 minutes, you will be able to tackle CORS errors much more effectively.
CORS is not rocket science.

It's the biggest pain for developers because the majority of us don't know its core concept.

Let's try to build a solid fundamental.

Stands for Cross-Origin Resource Sharing.
It is a security feature implemented by web browsers (almost all) that controls how web pages from one domain can request resources hosted on another domain.
Read 9 tweets
Apr 7
APIs are the backbone of development.

Let me show you how to build your first basic REST API in four simple steps.
Step 1: Install Node.js

I'm assuming you have Node.js installed on your machine. If you haven't installed it, click on the following link and install it simply.

nodejs.org/en
Step 2: Initialize the project

Let's start; create an empty directory and initialize your project by running the following command. Image
Read 17 tweets
Apr 4
5 GitHub repositories will make your life 90% easier:
1. StackQL

StackQL allows you to query multiple cloud and SaaS providers (Google, AWS, Azure, Okta, GitHub, etc.) using SQL.

🔗 github.com/stackql/stackql
Image
2. 50 Projects 50 Days

50+ mini web projects using HTML, CSS & JavaScript.

🔗 github.com/bradtraversy/5…
Image
Read 6 tweets
Feb 2
Convert your Python application into a website in 2 minutes.

Let me show you how:
There's no easy way than this to build a data, AI-based web applications.

I came across Taipy.

It is an open-source Python library for building production-ready front-end & back-end in no time.
Let's see in five simple steps how to build a movie recommendation system using Taipy.
Read 11 tweets
Jan 23
6 free Books to learn web development:
1. The Magic of CSS

The content in this eBook is for all-level developers. Learn about layout, box-model, positioning etc. with sample code snippets.

adamschwartz.co/magic-of-css/
Image
2. DOM Enlightenment

"DOM Enlightenment" is a free online book that explores DOM in-depth, providing a clear and detailed understanding of how it works.

domenlightenment.com
Image
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(