- Create a blue background and centralize your drop
- 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
- 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
- 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 👆🏻
- 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
Final Step
- Create another small white reflection using box-shadow of ::after-element
- Reduce opacity
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 😉
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.