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 👨‍💻🚀

Do not write CSS code, use these free generators instead that can help you immensely

A Thread 🧵

1️⃣ Stripes generator

- Pure CSS Stripes Generator that you can use for backgrounds.

🔗
https://t.co/5uTPrwA5xD


2️⃣ Gradient generator

- As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

🔗 https://t.co/Yr6pueoWgx


3️⃣ Pattern generator

- It lets you create background pattern for free

🔗 https://t.co/NQuV7pxLIz


4️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

🔗 https://t.co/x0qaDhN0z9
Use these 6 AI websites to finish hours of work in minutes (take a look):

1. Sheet+

Become a spreadsheet master with Sheet+ AI-powered tools.

• Convert text to formula
• Convert formula to explanation
• Debug formulas
• Generate VBA code
• Get instant answers to any spreadsheet question

🔗
https://t.co/fWsAeKa6ko


2. DeepCode

DeepCode's AI-based code review notifies you about critical bugs in real time and shows you how to fix them.

🔗 https://t.co/dPTPq9syoy


3. Akkio

Grow your business with data-driven decisions.

Go from data to AI in 10 minutes — no code or data science skills required.

🔗 https://t.co/I29FIHDIs0


4. Autocode

Instant endpoints for webhooks, bots, and APIs.

Build and host Node.js endpoints in seconds.

Connect to your favorite APIs like Airtable, Discord, Notion, Slack, Webflow, and more.

🔗 https://t.co/uQZB0NCHJT
JavaScript is powerful.

But sometimes, you can do great things using CSS.

A long thread of CSS tips and tricks:

1. Smooth


2. Change marker styling


3. Add styling to video


4. Change input caret

More from Software

As the year wrap's up, let's run through some of the worst public security mistakes and delays in fixes by AWS in 2020. A thread.

First, that time when an AWS employee posted confidential AWS customer information including including AWS access keys for those customer accounts to


Discovery by @SpenGietz that you can disable CloudTrail without triggering GuardDuty by using cloudtrail:PutEventSelectors to filter all events.


Amazon launched their bug bounty, but specifically excluded AWS, which has no bug bounty.


Repeated, over and over again examples of AWS having no change control over their Managed IAM policies, including the mistaken release of CheesepuffsServiceRolePolicy, AWSServiceRoleForThorInternalDevPolicy, AWSCodeArtifactReadOnlyAccess.json, AmazonCirrusGammaRoleForInstaller.

You May Also Like