Create 7 complicated figures using CSS ♾️➡️⭐🔍❤️

🧵👇🏻
1️⃣ Infinity Symbol

It may look tough but trust me I created this symbol using border-radius only .infinity {   position: relative; }     .infinity::before {
2️⃣ Arrow

Combination of rectangle and a triangle .arrow {   height: 40px;   width: 100px;   background: black
3️⃣ Star

Combination of two triangles .star {       position: relative;       display: block;
4️⃣ Magnifying glass

You guessed it right! Its just a simple circle and small rectangle .magnifying-glass {   height: 100px;   width: 100px;   borde
5️⃣ Heart

- Two rectangles with top round border-radius .heart {   position: relative;   height: 160px;   width: 100
6️⃣ Pacman    .pacman {       width: 0px;       height: 0px;       bord
7️⃣ 8 Point Star

Two squares overlapping each other    .star-8 {       background: black;       width: 80px;
Check out full source code here

codepen.io/prathamkumar/p…

• • •

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

5 Apr
Are you planning to learn Front-end development in 2021?

Here is a quick start guide 👇🏻

Thread 🧵 Image
You can start learning web development with backend as well but starting with Front-end is more beneficial.

Well it depends on person to person. Let's move forward 🔽

{ 2 / 28 }
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?

Many built-in features
It's fast
Large community
IntelliSense code completion and debugging

{ 3 / 28 }
Read 28 tweets
4 Apr
Seven amazing tools / websites a developer should visit

A Thread 🧵👇🏻
1️⃣ linuxsurvival.com

Linux Survival is a free tutorial designed to make it as easy as possible to learn Linux. Even though Linux has hundreds of commands, there are only about a dozen you need to know to perform most basic tasks. Image
2️⃣ learn-anything.xyz

Search anything here and it will show you the correct roadmap Image
Read 8 tweets
4 Apr
Everything you need to know about CSS position property

Thread🧵👇 Image
There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be look at all of them

{ 2 / 19 }
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

{ 3 / 19 } ImageImage
Read 19 tweets
3 Apr
2️⃣8️⃣ github.com/streamich/reac…

A great collection of pre built custom hooks that you can use in your project straight away. Hooks are divided into categories.
2️⃣9️⃣ github.com/Developer-Y/cs…

List of Computer Science courses with video lectures.
3️⃣0️⃣ github.com/leonardomso/33…

33 concepts every JavaScript developer should know.
Read 4 tweets
3 Apr
30 GitHub repositories that can help you as a developer

Mega Thread 🧵👇🏻
1️⃣ github.com/lydiahallie/ja…

Just found a great GitHub repository for JavaScript lovers.
2️⃣ github.com/dypsilon/front…

An amazing GitHub repository for Front-end development resources
Read 29 tweets
2 Apr
10 HTML and CSS tips that you need to know😉

🧵👇🏻
1️⃣ Customize the text selection

- The ::selection pseudo-element matches the portion of an element that is selected by a user. h1::selection {   background: #e11d74;   color: white; }
2️⃣ Range Input

- You can change the styling of input type="range"
Read 11 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

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

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!