Pratham Profile picture
17 May, 11 tweets, 5 min read
CSS art is a good way to enhance and improve your CSS knowledge.

Let's create Phineas using pure CSS in few simple steps πŸ§΅πŸ‘‡πŸ»
STEP 1. Create a head

create a triangle and rotate it so that it looks like a head
STEP 2. Create smile and ear

We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before. Its a good way to learn about pseudo-elements
STEP 3. Create eyes

This is the most trickiest part because in order to make an eye we have to create

- One bigger white circle
- then a small black pupil inside white circle
- then a small white reflection in black pupil

Let's create a outer white circle first
STEP 3(I). Create a black pupil

We can create pupil using pseudo element
STEP 3(II). Create white reflection in black pupil

Again make use of pseudo element and create small little white reflection inside pupil
STEP 4. Create moles

Well CSS art is all about creative ideas and solution. In previous step we made oval shape white reflection. We can also create moles using shadow of the white element(reflection) and align them properly
STEP 5. Create second eye

Same as step 3
STEP 6. Create hair spike

This is the easiest part in my opinions because all you need to make are just random spikes.

What I have done here is just created a border-top 20px and rotate it in order to give it a spike look.
STEP 7. Create hairs

Repeat step 6 and create multiple spikes so that they look like hairs
That's it!! Wasn't it easy and fun? Create any cartoon face with CSS and post the link below. I'll be more than happy to check it out.

If you want to get started with CSS arts, chec out this thread

β€’ β€’ β€’

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!


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

18 May
Some of my handmade JavaScript notes and cheat sheets that can help you πŸ§΅πŸ‘‡
1. JavaScript Function Anatomy Image
2. JavaScript Arrow Function Image
Read 9 tweets
18 May
5 amazing GitHub repositories for every React developer

🧡 πŸ‘‡πŸ»
1️⃣ Beautiful React Hooks

A collection of beautiful and (hopefully) useful React hooks to speed-up your components and hooks development

πŸ”—… Image
2️⃣ React cheat sheet

Cheatsheets for experienced React developers getting started with TypeScript

πŸ”—… Image
Read 6 tweets
18 May
Glassmorphism is a unified name for the popular frosted Glass design. It is trendy web design nowadays which looks super cool

Let's create a glassmorphic form using few simple CSS steps

A thread 🧡
Few days back I have covered neumorphic design in one of my thread and now in this thread we will be creating glassmorphic form.

Glassmorphism design is all about one CSS property which is backdrop-filter. Let's start πŸ”½
Step 1: Starting of the basic structure

Just start with writing all necessary tags for form layout. You can any number of input field according to you. ImageImage
Read 11 tweets
18 May
React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance πŸ§΅πŸ‘‡πŸ» Image
useEffect hook is the heart of React functional components

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods. Instead we have a powerful hook called useEffect
By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our β€œeffect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first

3/15 Image
Read 15 tweets
17 May
5 great background websites for every web developer and designer

1. Magic pattern

Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.

2. Cool backgrounds

Collection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers

Read 6 tweets
17 May
Have you heard the term "Tooltip" in web development?

Tooltips guide your visitors to take action and hence provides extra layer of guidance without any difficulties and hence increase the user experience

Let's create a tooltip using HTML and CSS only πŸ§΅πŸ‘‡πŸ»
We just need to create an element that we will be visible only when user moves the mouse pointer over an elment

STEP1: Let's start with the HTML structure <div class="content">WHAT IS A TOOLTIP?   <span cl
STEP2: Popup text

- Add some width and padding
- Hide the popup element throughout and show it only on hover
- Place it above the element
- Add little transition for smooth rendering
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

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!