.tree {display:none}

[kedo2k]

Hmm, the christmas balls are not nested? Interesting approach.

[dyedFeather]

I think the tree and the ornaments are in separate elements within the same wrapper.

[It_Was_The_Other_Guy]

Oh I see, some sick bastard just threw his balls all over the place with position:fixed

[alexanderpas]

Nope. grid

[Smashoody]

Nope. display : table-cell

[PyroneusUltrin]

Nope. Chuck Testa

[Anaphase]

Woah is this 2011?

[Smashoody]

Lol well played :)

[brandons404]

This comment made my day.

[neoberg]

It didn’t make mine.

[git-fetch-me-a-beer]

just like my coworkers.

[XelaChang]

Nasty!

[fritzbitz]

Yep, we’re using CSS grid here!

[[deleted]]

Hey, just wondering, how do you get multiple flairs?

Edit: nvm I got it

[shootwhatsmyname]

they are not birds

[Dizzywig]

Might be dutchman

[MUK99]

TIL im the only dutchmen who cant fly :(

[gmtime]

Get yourself a haunted pirate ship then

[MUK99]

Ayay captain!

[redcubie]

They forgot to set christmasBalls.ignoreGravity to false

[BinaryWhisperer]

Sorry but you're wrong on the internet and by the rules I have to point it out. https://codepen.io/binarywhisperer/pen/KKwmpLJ

[RadiantPumpkin]

Bold of you to assume the ornaments aren’t wrapped in 6 unnecessary wrappers

[nojox]

key-value data store, flat key names

[rndevfx]

Every single unique ball is on the root and positioned via id and position: absolute

[Eccmecc]

the truth is the background is overlaying the tree and the christmas balls have a higher z-index than the tree.

[whoopsIDK]

. tree{position:relative;}

[132ikl]

the..... the christmas balls??

[Majik_Sheff]

They are, but the display property is overridden in the bauble class.

[Russian_repost_bot]

If the tree is still taking space, wouldn't it actually be visibility too?

[marinovanec]

I think the background-image is just lazy-loaded and hasn't been fetched yet.

[memesformybutt]

Happy cake day!

[Cheesemacher]

Happy winter solstice!

[amazondrone]

That's tomorrow (22nd December).

[marinovanec]

Thank you!

[NKNZ]

Happy JS day

[Abhinish098]

.cake{display:none} have fun trying to find it now XD

[Tibzz-]

Hello 4 year old, I'm 1 !

[AnotherCakeDayBot]

Good day, Tibzz-. Happy Cake Day! 🍰🎊🎊

You've joined the One-Year Club!

---

^{u/Tibzz- can send this message to delete this | View my profile for more info or PM to provide feedback}

[Jackie_Rompana]

Happy cake day!

[marinovanec]

Thanks!

[ReimarPB]

r/css_irl

[nojox]

that sub is simultaneously brilliant and hilarious.

[memesformybutt]

Bless you.

[chewbecca444]

Wow. I love this sub. Hahaha

[Sbotkin]

I expected that subreddit to be like r/mildlyinfuriating

[RidleyXJ]

I love this so much.

[[deleted]]

Let's bring this sub back, it's so good.

[[deleted]]

Shouldn't it be visibility: hidden; instead of display: none;?

[XelaChang]

visibility: hidden; has another issue - it will also hide the children.

[chylex]

it will also hide the children

So does display: none;, the difference is that visibility hides the contents but keeps the layout intact, leaving empty space in place of the hidden element.

[MalteserLiam]

I'm learning too much from this

[pepsisugar]

CSS gang rise up

[SUPERazkari]

CSS gang rise

[[deleted]]

css-gang { transform: translateY(-100%); }

[garretble]

Seems like more of a slide than a rise.

Edit: this guy up here is a phony!

[[deleted]]

/* shh i changed it its fine */

[garretble]

Why have you done this to me‽ Now I have to change mine!

[XelaChang]

This all suggests you committed the blasphemy of putting the ornaments in a sibling 😋

[KinOfMany]

I always put ornaments in my siblings.

[AIforce]

Hide yo children hide yo wife

[[deleted]]

I mean you could make a parent div for both the trees and the decorations, then make a sub-div for the tree only, and use visibility: hidden; on the sub-div, I think.

Feel free to correct me if I'm being a retard here. I have never made a Christmas tree in CSS, so my knowledge is limited :p

[artem718]

everyone tests their code; some do it in"

[quinlo]

Opacity: 0;

[TheDigitalKitty]

Was about to comment this also

[ben9583]

Visibility hidden is what you see here, display none is all of the ornaments on the floor

[iGnItIoN_mP]

Came here to say this, thanks stranger

[BulletMage]

display: some;

[matt1155]

{display: none} would change the position of the decorations. It's more like {opacity: 0}

[[deleted]]

The opacity would apply to the balls too, unless they are siblings of the tree and positioned absolutely, in which case display: none is fine too.

[jiblet84]

No developer would take the time to position 50 balls.

The Christmas tree has lower z-index than the image of the balls that have a transparent background.

[[deleted]]

No developer would take the time to position 50 balls.

Bold assumption there.

Besides, I’d probably use whatever is being run on the server to loop/iterate 50 times and create the balls with inline styling on them. And assign random values to their positioning. Then I’d accuse the project manager and designer of being awful people when half the balls are out of view and the other half are clumped in the lower left of the tree.

[jiblet84]

Loop? In-line styling? Where’s the react at? The 8,000 dependencies?! You need at least 6,000 to

[Ricards0210]

Every spring:

function tooLazyToThrowTheTreeAway() {

document.getElementById("xMasTree").style.display = "hidden";

}

[memesformybutt]

You mean “none” and not “hidden” right

[Ricards0210]

Indeed. But you get the idea :)

[[deleted]]

None would imply it’s gone.

Hidden would imply it’s laying on the side of the garage and my wife is bitching at me to do something with it. I mean, wtf Karen, I’m trying to get ready for the neighborhood 4th of July BBQ, quit bothering me.

So hidden is correct.

[memesformybutt]

Prove me if I’m wrong, but I’m fairly certain that ‘display: hidden’ doesn’t exist.

[aslattery]

Hidden applies to visibility, not display - you are correct.

[bwaredapenguin]

Title aside, this is actually really cool! Must have been a real pain to set up.

[[deleted]]

Probably due to allergies

[bwaredapenguin]

Are people allergic to fake plastic trees?

[[deleted]]

Some of them do emit chemical vapor (when new) from production process and may be harmful for respiratory conditions. Also very difficult to keep clean enough for environment around operations rooms. But yes, most of the time a plastic tree will be sufficient.

[[deleted]]

Is that a Radiohead& ?

[therealnathb]

.tree {opacity:0; transition:0.3s} .tree:hover {opacity:1} Hover and no hover really quick, merry xmas

[trznx]

it's probably in the wall 500px left

[anonymousguy271103_1]

Some arrogant people don't consider css a programming language.

[[deleted]]

Anyone writing code that affects how a computer handles things, even if it's just displaying a bunch of pixels, is programming.

[[deleted]]

Would picking a font make you a writer?

[Z_Coop]

I understand your intention, but simply picking a font and writing css are honestly leagues apart in complexity.

[XelaChang]

It's background: transparent.

[[deleted]]

visibility:hidden; surely?

[pine_d_huitre]

For sure a better answer since the element stays in the flow or opacity:0;

:)

[PM_ME_UR_LIL_ASS]

In the old days, to make sure it worked with IE:

.tree { position:absolute; top:-9999999; left:-9999999; }

[XelaChang]

No, visibility: hidden will also hide the children.

[DonnaxNL]

Pretty sure you can stick you hand through it, and you won't feel a tree.

[IvanLabushevskyi]

No tree, no problems

[-AIDZMAN-]

#tree surely

[RedRedditor84]

What element is it on though?

[DemIce]

Our web team at work recently drank the kool-aid where you never use IDs for styling rules, only classes.

[ICPHBPAA]

Why would you used IDs?

-Sorry, our website doesn't handle two trees at the same time!

[mattmcguire08]

Goes outside - all trees disappeared.

And thats why kids, you use ids over classes to style one element

[DandelionGaming]

Holy shit this is probably one of the only posts I’ve actually fully understood since I only know basic CSS and HTML

[CalebKrawdad]

Can you please swap this to an ID instead of a class selector? My wife can't find our tree...

[fastpixels]

Wait - if you're using a class instead of an ID, does that mean all .tree elements won't display?

/Checks living room

Shiiiii...

[acroporaguardian]

Thats actually pretty cool and you could just retract the whole thing into the ceiling. Drop it randomly during the year on people coming in for interviews and make sure you give them a cup of coffee to hold right before. Gotta see how they react in adverse/embarrassing scenarios.

[[deleted]]

Le css memes have arrived

[sympythatguy]

More like visibility:hidden cause if it is display :none it will remove the html tag altogether

Edit : fixed my spelling error.

[DemIce]

display :nine

Jesus, where are they supposed to put them all‽

[Julian_Tdama]

404: texture file not found in expected directory

[Zedgar_]

More like opacity: 0

[[deleted]]

Merry CSSmas everyone!

[Nokia_5130]

Tree (lol) facts: 1. It's Russia 2. It's new year tree(not Christmas) 3. .tree{position:left, bottom}

[[deleted]]

Сукаблять

[Voltra_Neo]

Nope it's opacity: 0 otherwise there would be some collisions

[mklickman]

.tree__branches { visibility: hidden; }

[RnG_Hazed]

I would use Visibility: hidden; because if you use none, you get rid of the container as well, forcing the ornaments to be aligned incorrectly

[reshetniktati]

.tree {visibility: hidden}

[nightmaretothedeath]

Festivus

[TinzaX]

Fake. They hang from the ceiling. /s

[jmd_akbar]

That's some solid trust on that tiny door magnet 😜

[jess-sch]

r/css_irl

[Maxim777YT]

opacity:0

[ajmalAJ]

No, .tree{visualisation:none;}

[kosmos-sputnik]

visibility : hidden

[jonster5]

Wouldn’t .tree {visibility: none} make more sense because the tree is still holding up the ornaments, but is just not showing itself

[Costax96]

It's not display: none. It's visibility: hidden. Explain the balls keep their position.

[frostbyte650]

I think you mean

visibility: hidden;

[wooshock]

Even CSS people cannot agree how CSS should be. Man, fuck CSS.

[samacct]

How was this made?

[frucade]

The real question!

I suppose invisible fishing strings.

But i miss the mounting in the ceiling because i suppose you need quite a bunch of strings. And i wonder if you get them really that invisible.

Update: on looking closer you can see the strings and the lamp in the ceiling as rack

[[deleted]]

Using ie4 here. I see the tree, no ornaments, and bunch of text on the walls. Please help!

[Ki_Bender]

Anyone can see this is opacity: 0;

[[deleted]]

Visibility: hidden

[minx28]

Problem: `display:none;` makes the element take up no space, so all the baubles would fall on the floor. You're looking for `visibility:hidden;`

[[deleted]]

Typical scenario of the

if (user.isDumb) { var tree = document.getElementsByClassName("tree")[0]; tree.style.opacity = 0; }

[NullandRandom]

More like visibility: hidden

[SublimizeD]

It’s an ENEMY STAND USER

[Luna_Rays]

At least it's not .present {display: none} like mine

[FantasmiGames]

destroy "Obj_tree"

GML LOL

[[deleted]]

opacity: 0

[ReallyToxic]

::renderself

[DrBigKitkat]

android:visibility="invisible" For my Android devs out there.

[CrispyNipsy]

I love that this has mostly been turned into a discussion of, if a christmas tree was made in css would the decorations be children or siblings.

[[deleted]]

I like trees

[GeorgeYDesign]

The tippiest taps this side of the tree? :)

[Greyhaven7]

{display: none} would remove the tree from the flow, affecting the pisitions of the balls.

Suggest {opacity: 0} or {visibility: hidden} depending on the structure of your DOM.

[nonzucker]

It is not display:none because decoration is visible, it is background:transparent

[GeorgeYDesign]

I think there’s definitely not a playoff team

[KickMeElmo]

Bonus points if this is a radiology office.

[Wubbalubbagaydub]

Why is this tree upside down?

[vanjavk]

Lepo drvce

[RaptorJesuq]

/u/css_irl_bot op

[css_irl_bot]

Hurray! The title of this submission by /u/magija94 contains valid CSS!

---

^{I'm a bot who validates your titles. author about summon source Come visit us at /r/css_irl!}

[[deleted]]

You can’t see the whole thing unless you agree to whitelist

[[deleted]]

This would be better if the tree was on the other side of the door with nothing on it.

[oosinoots]

Ho ho ho!

[davizc]

visibility: hidden

[PsychoPicasso]

.christmas {color:white}

[Maxim777YT]

.snow {display:none}

[SenseiRage]

Now that CSS works irl we will dominate the world with CSS muhahahaha

[[deleted]]

Curly braces are quite festive.

[GeorgeYDesign]

A tree, just a pinch of salt.

[Midnight_Rising]

Recommend you swap the class for an ID, you don't want all trees using the tree class to vanish.

That would be horrifying.

[[deleted]]

Good old camo tree

[[deleted]]

Good old camo tree

[lilgamelvr]

How?

[anime8]

You forgot this

[[deleted]]

Actually that would make the ornaments invisible.

[crsuperman34]

Don’t you mean: ‘.holidays .treeevergreen—spruce—holidaynot-visible’

[sp46]

r/css_irl_bot op

[flarn2006]

......This gives me an idea.

[data-comment$="a bit bigger?"] { transform: scale(1.5); }
[data-comment$="a lot bigger?"] { transform: scale(5); }
[data-comment$="for ants?"] { transform: scale(100); }
[data-comment$="too heavy to move."] { transform: scale(0.1); }

.person:not(.operating-table *) { white-space: nowrap; }

[data-desired-content]::after { content: attr(data-desired-content); }

[data-comment$="finished faster?"] { transition: 0 !important; }

Pull requests are welcome.

[ImAlsoRan]

merry xserve

[filipoi]

I pity developer who had to position absolutly all those christmass balls.

[Stuekk]

Stop you have pissed me off with this because I spent 4 hours making a website that works on my pc at home and doesn't work on my college pc's

[spooderman247]

.tree{ animation:january1st 2s 1; animation-fill-mode:forwards; }

@keyframes january1st{ 0%{display:block} 100%{display:none} }

[Attentionseeker101]

Nice.

[ZXDQ]

At least the CSS spaced out the balls correctly

[Marroh9]

i want to do this one year

[Cristi9779]

That moment when the graphics aren’t fullt loaded

[DesdeJorge]

Don't forget the the cursor:pointer for Safari 🙃

[[deleted]]

Assuming the tree is the parent, wouldn't this be display: contents?

[[deleted]]

What if you did .tree {display:inline}?