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

Jaya_Upadhyaya
Jaya_Upadhyaya
@Jayalko1
MEENAKSHI AMMAN, MADURAI (TN)
#bharatmandir #navratri2021

A paadal Petra sthalam where Shiva took the form of Sundareswarar (the handsome one) and married Devi Parvati (Meenakshi).
Devi is also known by the name Angayarkanni (mother with the beautiful fish eyes).
@GunduHuDuGa


Devi Meenakshi emerged from yagna fire as a 3 year old girl when Pandyan King Malayadwaja and Kanchanamalai were praying for a child.
It is said that Devi was born with three breasts and there was a prophesy that her superfluous breast would melt away when she met her husband.


Devi ruled over Madurai and captured Indralok. She went on to capture Kailasha. When she saw Shiva, her 3rd breast disappeared and she realised that Shiva would be her consort.
The divine marriage was attended by all Devas and Sri Vishnu (as her brother) gave her hand to Shiva.


It is said that Indra found a swayambhu lingam at Kadamba Vanam. He placed it in Madurai where the kshetram stands. Here, Shiva is seen on the vehicle of Indra.
The Golden Lotus Tank is said to be the place where a golden lotus blossomed for the puja performed by Indra.


The Meenakshi Thirukalyanam festival is celebrated in the Chithirai month to mark the divine marriage of Meenakshi Amman. The festival includes a procession where Meenakshi and Sundareshwara travel in a chariot and Sri Vishnu gives away his sister in marriage to Shiva.
ALL
Suhas S. Hardutt
Suhas S. Hardutt
@HarduttSuhas
THE BATTLE OF PRATAPGARH (10 Nov, 1659)

Chhatrapati Shivaji Maharaj's impeccable military genius and matchless courage humbled the Adil Shahi Sultanate.

The beginning of what was to come later for the M0ghuls from one of the most indefatigable defenders of Dharma!

(Thread)


Shivajiโ€™s growing influence in Maval region, made him a threat to the Adil Shahi ruler of Bijapur who sought to restrain him. The man who was given the responsibility of this mission, was their commander, Afzal Khan. Afzal was a formidable warrior known for his ruthlessness.(1)

His strategy was to bring Shivaji out into the plains, where he held an advantage, compared to the rocky Deccan terrain. Afzal attacked the holy town of Pandharpur, and later demolished the temple of Bhavani at Tuljapur to instigate Shivaji in a bid to bring him out.(2)

Shivaji was angry but remained patient. Knowing that he could not defeat Bijapuri Sultanate in an open battle, Shivaji moved to Pratapgarh fort, located on rocky heights, surrounded by thick forests of Jawali.(3)

This set the pattern for future Maratha attacks, using guerrilla warfare against larger invading armies rendering them ineffective in unfavorable terrain.(4)
HISTORY
Advertisement
Stephen Fasenfeld \U0001f600
Stephen Fasenfeld ๐Ÿ˜€...
@fasenfeld
1. โ€œWho Are Irelandโ€™s Members Of The World Economic Forum Implementing The Great Reset In 2021 ? ๐Ÿงต1/28

๐Ÿ•ต๏ธ๐Ÿ”Ž Politicians, Musicians, Clergy, Bankers, Journalists, Human Rights, Artificial Intelligence, Sustainability, Corporations & Agriculture


2. In previous threads I have looked at ๐Ÿ‡ฎ๐Ÿ‡ช key players in the Trilateral Commission as well as ๐Ÿ‡ฎ๐Ÿ‡ช people who have attended the Bilderberger meetings. I also looked at the ๐Ÿ‡ฎ๐Ÿ‡ช in the Young Global Leaders which is a site run by the WEF. You will see a lot of crossover between them.

3. The purpose of this thread is to compile all the Irish members into one thread for ease of access and reading rather than having to dive through the WEF site. This is by no means definitive and I will be adding more over time when they pop out of the woodwork.

4. Irelandโ€™s WEF members are drawn from all walks of life but can be split into 2 separate areas. The WEF calls the first category โ€œpeopleโ€ and the 2nd one โ€œagenda contributorsโ€. In total Ireland has a minimum of 61 members. Some of the names will be familiar and others will not

5. In this thread Iโ€™m just going to concentrate on the 21 people (there are probably a lot more). There are also 40 โ€œagenda contributorsโ€ which I will cover in a separate thread. The agenda contributors are those who write articles or do research for the WEF site.
ECONOMY
\u2745\u1710\u170b\u1713\u170e
โ…แœแœ‹แœ“แœŽ...
@uglyluhan
First thread of the year because I have time during MCO. As requested, a thread on the gods and spirits of Malay folk religion. Some are indigenous, some are of Indian origin, some have Islamic


Before I begin, it might be worth explaining the Malay conception of the spirit world. At its deepest level, Malay religious belief is animist. All living beings and even certain objects are said to have a soul. Natural phenomena are either controlled by or personified as spirits

Although these beings had to be respected, not all of them were powerful enough to be considered gods. Offerings would be made to the spirits that had greater influence on human life. Spells and incantations would invoke their


Two known examples of such elemental spirits that had god-like status are Raja Angin (king of the wind) and Mambang Tali Arus (spirit of river currents). There were undoubtedly many more which have been lost to time

Contact with ancient India brought the influence of Hinduism and Buddhism to SEA. What we now call Hinduism similarly developed in India out of native animism and the more formal Vedic tradition. This can be seen in the multitude of sacred animals and location-specific Hindu gods
RELIGION
Sara Benincasa
Sara Benincasa
@SaraJBenincasa
Spent a quaint half hour in a cafe listening to a guy yell at his dad after his dad said that the women Trump molested wanted it: "Dad, that's like saying the Jews who died in the Holocaust were asking for it!" ENJOY YOUR TERRIBLE FAMILIES THIS WEEK!

"Mom, has a man ever touched you without your consent?"
"Of course."
"Did you report it?"
"No."
"Dad, your WIFE has been through this!"

Dad was unmoved and told the guy to stop arguing with him.

At this point we learned the boy child has allergies.

I forgot to remark upon the presence of the very cute grandson, who was very small and gave not one shit about the yelling. I believe a sister or aunt was present and feeling very stressed. I wanted to hand her a Xanax or seven.

It was really hard to not jump in and say, "Sounds like you guys are going to have a fun meal tomorrow!" so they could unite in hatred against me, the outsider, and stop squabbling. Instead I exchanged glances with a nearby fellow lady patron, who also emotionally ate a cookie.

Anyway, I want to thank the random family for yelling about rape and the Holocaust in an Israeli cafe in the US of A today because it reminded me that while this country isn't the greatest, it is inevitably my stupid favorite and I am never, ever bored.
SOCIETY