Let's create Phineas using 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
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 👨‍💻🚀

6 amazing GitHub repositories that can help you as a developer

🧵 👇🏻

1️⃣ HTML Best Practice

- This repo will help you writing maintainable and scalable HTML documents


2️⃣ 30 Days Of React

- Learn React in 30 days. A well divided topics of React in days. Definitely check it out

🔗 https://t.co/8WTc1RQOGV

3️⃣ Design resources

- Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

🔗 https://t.co/82o5Eyhlji

4️⃣ Websites a programmer should visit

- A well curated list of websites a programmer should visit

🔗 https://t.co/ltdIqcQ6cT
5 amazing GitHub repositories for every self taught developer

A Thread 🧵

1️⃣ Computer Science

🎓 Path to a free self-taught education in Computer Science!


2️⃣ Free Certifications

Curated list of free courses & certifications

🔗 https://t.co/4XtlAVlovs

3️⃣ Free Programming Books

📚 Freely available programming books

🔗 https://t.co/eOWLCtwtIV

4️⃣ JavaScript Question

A long list of (advanced) JavaScript questions, and their explanations ✨

🔗 https://t.co/UvEl1Esvh3

More from Software

Are you a Designer or a Developer?👨‍💻

Here are some Google Chrome extensions that can make you better in 2021. 🔥🍀

(Thread) 🧵👇

https://t.co/zGir5E5U0J: https://t.co/PVx1wlX0Se is the easiest way to stay updated on the latest programming news. Get the hottest dev news from the best tech blogs on any topic you can think of.

2. CSS Peeper: CSS Peeper is a CSS viewer tailored for Designers. Get access to useful styles with our Chrome extension. Its mission is to let Designers focus on design, and spend as little time as possible digging in a

3. UX Check: UX Check makes heuristic evaluations quick and easy. The extension will open up Nielsen's Ten Heuristics in a side pane next to your website.

4. Checkbot: Checkbot finds critical SEO, speed & security problems before your website visitors do
Tests 100s of pages at once for broken links, duplicate titles, invalid HTML, insecure pages, and 50+ other

You May Also Like