Let's create Phineas using CSS in few simple steps😄

THREAD🧵

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
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 all😍

Thanks for reading this thread. Drop a link of your creations below. I love to check them out

More from Pratham 👨‍💻🚀

7 amazing websites that will help you improve your CSS skills

🧵👇

1️⃣ Learn to code HTML and CSS

- Learn how to build beautiful and intuitive websites by way of clear and organized lessons

🖇️
https://t.co/bl2rx2q8vk


2️⃣ CSS reference

- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content

🖇️ https://t.co/XAlj33g1Zk


3️⃣ CSS tutorial

- These tutorials on web design & CSS makes learning this stuff fun and easy

🖇️ https://t.co/y9vAj6fMGk


4️⃣ CSS Layouts

- This site teaches the CSS fundamentals that are used in any website's layout.

🖇️ https://t.co/n4EGLScpDF
65 JavaScript resources that can help you

Mega Thread 🧵 👇🏻

🔹 Websites

1. Java5cript
https://t.co/2gdB6LdfQ8

2. JavaScript Tutorial
https://t.co/YyH7YEZtOL

3. JavaScript 30
https://t.co/X2e6T9qFW5

4. JavaScript Info
https://t.co/GLcMZmyfC9

5. JavaScript by

🔹 Learn through visualizing

6. JS Visualizer
https://t.co/DKXfCA5bnv

7. UI dev visualizer
https://t.co/IsnNdAGANq

8. JS

🔹 Documents

9. MDN
https://t.co/XkMlZQOF0h

10. W3 Schools
https://t.co/aJB14ha9KT

11. DevDocs
https://t.co/sVwCCrYKwA

12. JavaScript Info
https://t.co/VJaTfVOIa8

13. JavaScript

🔹 GitHub repo

14. Modern JavaScript tutorials
https://t.co/vDgTJKbz74

15. Awesome JS Learning
https://t.co/CUCBjfJEcY

16. JS by example
https://t.co/VLT6dRwLSp

17. 33 JS concepts
https://t.co/F5KDOSaACD

18. 30 seconds of

More from Software

You May Also Like