BC HTML
Saved by @Jacobtldr

How to make single div(any element) CSS art - A mini thread 🧵

Spoiler: No magic 🪄 All that's required is patience and knowing your way around some properties 👍

Let's gooo! 👇

Starting with this timelapse ⏳

 The "Big" trick? Layered background images 😮

With CSS you can give many backgrounds to an element. Comma separate background images and you're golden ✨🏆

What would this give for a 60px square? 🤔

👉 https://t.co/3N2SzXNn61
It's common that you'll not repeat your background image layers.

Don't repeat yourself(DRY) and drop:

"background-repeat: no-repeat;"

Beneath your background declaration 👍😎
If you watched the timelapse above, it slows where the order of background images are swapped 🤔

Layered backgrounds are a little counter-intuitive because they work the opposite way to z-index stacking. The first is the highest, the last the lowest.

Save the last for backdrop!
What shapes can we make? Pretty much anything that we can > 1 element 😎

Examples? Create quadrilaterals using a linear-gradient from one color to the same color. Create circles with a radial-gradient from one color to transparent with a color stop.

https://t.co/x6ZfnaBrV7
How about a triangle?

1. Use a linear-gradient.
2. One side transparent, the other the color you want.
3. Define the angle.
4. Use a color stop to create a sharp line 💪

https://t.co/wlZ1RC6m7n
Get comfortable with the background-image property 😎
If a shape seems complex, break it down into smaller shapes and layer up 👍

Consider the spectacles in the demo above. It's 11 background images positioned accordingly. 4 for each frame, 1 for the bridge, 1 for each lens 👍
Which leads to an important part!

background-size && background-position are what allow you to create and move the building blocks around your element 💪

We are using the shorthand style structure for the backgrounds.

We could break it up but that gets confusing!
Check out this demo where you can change the background-position and background-size for a background-image 👍😎

Try changing the coefficients or the bounds and see how it reacts 🤓

👉 https://t.co/sls8iMlsdR
That's the bulk of the "magic" behind single element CSS art 🙌

But, it's worth discussing some tips to make life a little easier 😎
Split your background images up into variables 👍😎

Then you can easily identify what's what. Consider this demo. Each component is identifiable. It also makes switching the order around much easier to see 😎

Try changing some property values 😉

https://t.co/3MtGGIihjs
Using CSS variables to power things is huge 💪

In that demo, you can control sizing, colors, features, etc. ✨

Because of scope, you can generate many unique combinations by using JavaScript. Consider the 100
demo 😎

https://t.co/fxPFWVE83b
In the 100
demo, JavaScript generates inline variables for every element. That means so many unique combinations get generated.

Find the "for" loop on line 170 and you can change the number of people generated 😉

Or check out this demo 😎

https://t.co/506EoRFrbl
Last but not least 😅

You've got more than you think 👀 Need a transform or a rotate? Running out of room?

For most elements, you also get two elements for free! 😎

The pseudo-elements :after and :before 👍

https://t.co/NtXjz1XHvw
That's it!

A spontaneous mini-thread about drawing things in CSS with a single element 😅

Had a few questions about the "100 Members of HR" demo and figured I'd throw something together.

The gist: Layer up background images! Layer! Layer! Layer! 😂
Got any other tips or tricks you use?

Still not sure about how to do something?

Let me know! 😄

You May Also Like

f1talks.pl
f1talks.pl
@f1talks
Oleg Karpov pisze, że gdyby Siergiej Sirotkin zdobył w pierwszej części sezonu więcej punktów od Strolla, to jego kontrakt z automatu zostałby przedłużony na kolejny sezon. Tak się nie stało i Williams ma możliwość szukania innych opcji i to właśnie robi. #F1pl

Czego w artykule brakuje, to informacji, że SMP prawdopodobnie przekazało Williamsowi część środków na sfinansowanie sezonu 2019. W przypadku zakończenia współpracy ekipa z Grove będzie musiała zwrócić te środki. #F1pl

To tłumaczy wysokie kwoty jakich Williams ma oczekiwać za fotel od nowego kierowcy. Jest pewnie próg opłacalności i dopóki nie zostanie osiągnięty, to zmiana z finansowego punktu widzenia nie będzie się zwyczajnie opłacała. #F1pl

Tyle można znaleźć w oświadczeniach prasowych... 😂😂😂
SPORT
Chris Herd
Chris Herd
@chris_herd
I've spoken to 1,500+ people about remote work in the last 9 months

A few predictions of what is likely to emerge before 2030

[ a thread ] 💻🏠🌍

🚜 Rural Living: World-class people will move to smaller cities, have a lower cost of living & higher quality of life

These regions must innovate quickly to attract that wealth. Better schools, faster internet connections are a must

⏰Asynchronous Work: Offices are instantaneous gratification distraction factories where synchronous work makes it impossible to get stuff done

Tools that enable asynchronous work are the most important thing globally remote teams need. A lot of startups will try to tackle this

⚽️Hobbie Renaissance: Remote working will lead to a rise in people participating in hobbies and activities which link them to people in their local community

This will lead to deeper, more meaningful relationships which overcome societal issues of loneliness and issolation

🌍Diversity & Inclusion: The most diverse and inclusive teams in history will emerge rapidly

Companies who embrace it have a first-mover advantage to attract great talent globally. Companies who don't will lose their best people to their biggest competitors
REMOTE WORK
Advertisement
Billy Bostickson \U0001f3f4\U0001f441&\U0001f441 \U0001f193
Billy Bostickson 🏴👁&👁 ...
@BillyBostickson
@EricTopol @NBA @StephenKissler @yhgrad B.1.1.7 reveals clearly that SARS-CoV-2 is reverting to its original pre-outbreak condition, i.e. adapted to transgenic hACE2 mice (either Baric's BALB/c ones or others used at WIV labs during chimeric bat coronavirus experiments aimed at developing a pan betacoronavirus vaccine)

@NBA @StephenKissler @yhgrad 1. From Day 1, SARS-COV-2 was very well adapted to humans .....and transgenic hACE2 Mice


@NBA @StephenKissler @yhgrad 2. High Probability of serial passaging in Transgenic Mice expressing hACE2 in genesis of SARS-COV-2


@NBA @StephenKissler @yhgrad B.1.1.7 has an unusually large number of genetic changes, ... found to date in mouse-adapted SARS-CoV2 and is also seen in ferret infections.
https://t.co/9Z4oJmkcKj


@NBA @StephenKissler @yhgrad We adapted a clinical isolate of SARS-CoV-2 by serial passaging in the ... Thus, this mouse-adapted strain and associated challenge model should be ... (B) SARS-CoV-2 genomic RNA loads in mouse lung homogenates at P0 to P6.
https://t.co/I90OOCJg7o
ALL
SK
SK
@sk_diary1
A #story from #Thiruvilayadal puranam- one of divine leelas of Bhagwan Shiva

#threadseries #madurai

Koodal Kaandam

Story 21 - it is about how stone elephant came to life and ate sugarcane - When Raja Abhisheka Pandyan met Ellam Valla Siddhar

கல்யானைக்கு கரும்பருத்திய படலம்


Raja Abhisheka Pandiyan went ahead to meet Ellam Valla Siddhar on the premises of the temple.On seeing the arrival of Raja, people surrounding Siddhar moved back. Abhisheka Pandiyan introduced himself to Siddhar &asked about his whereabouts.Also his purpose of visit to Madurai.

Raja asked why he performed magical acts, does he expect anything from him or people of Madurai.

Siddhar laughed & replied to Raja that he was from Kasi. He had heard a lot about Madurai in Kashi.Also told that this place is a Mukti Kshetram,so he had come to stay here.

Siddhar asked Raja if he has the capability &power to give anything that he asks for. Siddhar told King that he has power to do things even if he think of it.Siddhar asked King to ask whatever he wants & it would be provided, whatever these people had asked, they were granted.


Abhisheka Pandyan was shocked to receive such a reply from Siddhar,& he decided to test the power of this Siddhar. By that time, Raja saw a person in crowd having Sugarcane.

Raja took Sugarcane from that person.
ALL
Talha
Talha
@dhiblawe1990
Thread: History of Mogadishu and it’s conquest by Imaam Al Yaqubi


One of the First Imaams of the Hiraab Imamate was Mohamed Ibn Imaam Ahmed ibn Imam Ahmed Ibn Imaam Mohamoud Ibn Imaam Cumar Halol Al Yacquubi (Abgaal) during the year 1097 hijri.


After the collapse of the Ajuuran Abgaal nomads from the interior had started moving to take over the strategic port town of Mogadishu which was then under the muzzafar dynasty. By the 1600s Abgaal warriors had captured the city and set up their base in shingaani.


Mogadishu at the time was a large and well known port town. The Abgaal clan taking over control allowed them to obtain political power and world wide recognition.


Under Imaam Yaqubi’s time in power it’s reported that French merchants had arrived at the port in 1701
and stayed for 11 days. They had attempted to take the city but were successfully repulsed.
HISTORY