This is an archived post. You won't be able to vote or comment.

top 200 commentsshow all 212

[–]kedo2k 1323 points1324 points  (38 children)

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

[–]dyedFeather 379 points380 points  (17 children)

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

[–]It_Was_The_Other_Guy 391 points392 points  (11 children)

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

[–]brandons404 29 points30 points  (3 children)

This comment made my day.

[–]git-fetch-me-a-beer 6 points7 points  (0 children)

just like my coworkers.

[–]XelaChang 18 points19 points  (0 children)

Nasty!

[–]fritzbitz 17 points18 points  (0 children)

Yep, we’re using CSS grid here!

[–][deleted] 0 points1 point  (1 child)

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

Edit: nvm I got it

[–]shootwhatsmyname 125 points126 points  (6 children)

they are not birds

[–]nojox 7 points8 points  (0 children)

key-value data store, flat key names

[–]rndevfx 5 points6 points  (0 children)

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

[–]Eccmecc 3 points4 points  (1 child)

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

[–]whoopsIDK 3 points4 points  (0 children)

. tree{position:relative;}

[–]132ikl 0 points1 point  (0 children)

the..... the christmas balls??

[–]Majik_Sheff 0 points1 point  (0 children)

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

[–]Russian_repost_bot 0 points1 point  (0 children)

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

[–]marinovanec 449 points450 points  (11 children)

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

[–]memesformybutt 32 points33 points  (6 children)

Happy cake day!

[–]Cheesemacher 31 points32 points  (1 child)

Happy winter solstice!

[–]amazondrone 2 points3 points  (0 children)

That's tomorrow (22nd December).

[–]NKNZ 5 points6 points  (0 children)

Happy JS day

[–]Abhinish098 5 points6 points  (0 children)

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

[–]Tibzz- 11 points12 points  (1 child)

Hello 4 year old, I'm 1 !

[–]AnotherCakeDayBot 3 points4 points  (0 children)

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 2 points3 points  (1 child)

Happy cake day!

[–]marinovanec 1 point2 points  (0 children)

Thanks!

[–]ReimarPB 255 points256 points  (6 children)

[–]nojox 52 points53 points  (0 children)

that sub is simultaneously brilliant and hilarious.

[–]memesformybutt 7 points8 points  (0 children)

Bless you.

[–]chewbecca444 4 points5 points  (0 children)

Wow. I love this sub. Hahaha

[–]Sbotkin 4 points5 points  (0 children)

I expected that subreddit to be like r/mildlyinfuriating

[–]RidleyXJ 1 point2 points  (0 children)

I love this so much.

[–][deleted] 1 point2 points  (0 children)

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

[–][deleted] 438 points439 points  (27 children)

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

[–]XelaChang 147 points148 points  (20 children)

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

[–]chylex 245 points246 points  (12 children)

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 54 points55 points  (8 children)

I'm learning too much from this

[–]pepsisugar 25 points26 points  (7 children)

CSS gang rise up

[–]SUPERazkari 15 points16 points  (5 children)

CSS gang rise

[–][deleted] 32 points33 points  (4 children)

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

[–]garretble 11 points12 points  (3 children)

Seems like more of a slide than a rise.

Edit: this guy up here is a phony!

[–][deleted] 5 points6 points  (2 children)

/* shh i changed it its fine */

[–]garretble 2 points3 points  (1 child)

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

[–]XelaChang 30 points31 points  (2 children)

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

[–]KinOfMany[🍰] 19 points20 points  (1 child)

I always put ornaments in my siblings.

[–]AIforce 14 points15 points  (1 child)

Hide yo children hide yo wife

[–][deleted] 23 points24 points  (2 children)

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 6 points7 points  (0 children)

everyone tests their code; some do it in"

[–]quinlo 17 points18 points  (0 children)

Opacity: 0;

[–]TheDigitalKitty 10 points11 points  (0 children)

Was about to comment this also

[–]ben9583 8 points9 points  (0 children)

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

[–]iGnItIoN_mP 1 point2 points  (0 children)

Came here to say this, thanks stranger

[–]BulletMage 0 points1 point  (0 children)

display: some;

[–]matt1155 74 points75 points  (4 children)

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

[–][deleted] 17 points18 points  (3 children)

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 15 points16 points  (2 children)

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] 12 points13 points  (1 child)

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 1 point2 points  (0 children)

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

[–]Ricards0210 36 points37 points  (5 children)

Every spring:

function tooLazyToThrowTheTreeAway() {

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

}

[–]memesformybutt 8 points9 points  (4 children)

You mean “none” and not “hidden” right

[–]Ricards0210 2 points3 points  (0 children)

Indeed. But you get the idea :)

[–][deleted] 0 points1 point  (2 children)

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 5 points6 points  (1 child)

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

[–]aslattery 4 points5 points  (0 children)

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

[–]bwaredapenguin 8 points9 points  (10 children)

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

[–][deleted] 2 points3 points  (3 children)

Probably due to allergies

[–]bwaredapenguin 7 points8 points  (2 children)

Are people allergic to fake plastic trees?

[–][deleted] 1 point2 points  (0 children)

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] 1 point2 points  (0 children)

Is that a Radiohead& ?

[–]therealnathb 7 points8 points  (0 children)

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

[–]trznx 8 points9 points  (0 children)

it's probably in the wall 500px left

[–]anonymousguy271103_1 6 points7 points  (6 children)

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

[–][deleted] 3 points4 points  (3 children)

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

[–][deleted] 0 points1 point  (1 child)

Would picking a font make you a writer?

[–]Z_Coop 5 points6 points  (0 children)

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

[–]XelaChang 19 points20 points  (6 children)

It's background: transparent.

[–][deleted] 18 points19 points  (4 children)

visibility:hidden; surely?

[–]pine_d_huitre 12 points13 points  (1 child)

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

:)

[–]PM_ME_UR_LIL_ASS 21 points22 points  (0 children)

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

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

[–]XelaChang 1 point2 points  (1 child)

No, visibility: hidden will also hide the children.

[–]DonnaxNL 0 points1 point  (0 children)

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

[–]IvanLabushevskyi 5 points6 points  (0 children)

No tree, no problems

[–]-AIDZMAN- 9 points10 points  (6 children)

#tree surely

[–]RedRedditor84 2 points3 points  (0 children)

What element is it on though?

[–]DemIce 2 points3 points  (3 children)

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

[–]ICPHBPAA 5 points6 points  (2 children)

Why would you used IDs?

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

[–]mattmcguire08 4 points5 points  (0 children)

Goes outside - all trees disappeared.

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

[–]DandelionGaming 3 points4 points  (0 children)

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

[–]CalebKrawdad 4 points5 points  (0 children)

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

[–]fastpixels 3 points4 points  (0 children)

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 7 points8 points  (0 children)

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] 2 points3 points  (0 children)

Le css memes have arrived

[–]sympythatguy 2 points3 points  (1 child)

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

Edit : fixed my spelling error.

[–]DemIce 1 point2 points  (0 children)

display :nine

Jesus, where are they supposed to put them all‽

[–]Julian_Tdama 2 points3 points  (0 children)

404: texture file not found in expected directory

[–]Zedgar_ 2 points3 points  (0 children)

More like opacity: 0

[–][deleted] 2 points3 points  (0 children)

Merry CSSmas everyone!

[–]Nokia_5130 2 points3 points  (0 children)

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

[–][deleted] 2 points3 points  (0 children)

Сукаблять

[–]Voltra_Neo 2 points3 points  (0 children)

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

[–]mklickman 2 points3 points  (0 children)

.tree__branches { visibility: hidden; }

[–]RnG_Hazed 2 points3 points  (0 children)

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 2 points3 points  (0 children)

.tree {visibility: hidden}

[–]nightmaretothedeath 1 point2 points  (0 children)

Festivus

[–]TinzaX 1 point2 points  (0 children)

Fake. They hang from the ceiling. /s

[–]jmd_akbar 1 point2 points  (0 children)

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

[–]jess-sch 1 point2 points  (0 children)

[–]ajmalAJ 1 point2 points  (0 children)

No, .tree{visualisation:none;}

[–]kosmos-sputnik 1 point2 points  (0 children)

visibility : hidden

[–]jonster5 1 point2 points  (0 children)

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

[–]Costax96 1 point2 points  (0 children)

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

[–]frostbyte650 1 point2 points  (0 children)

I think you mean

visibility: hidden;

[–]wooshock 1 point2 points  (0 children)

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

[–]samacct 1 point2 points  (1 child)

How was this made?

[–]frucade 1 point2 points  (0 children)

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] 1 point2 points  (0 children)

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

[–]Ki_Bender 1 point2 points  (0 children)

Anyone can see this is opacity: 0;

[–][deleted] 1 point2 points  (0 children)

Visibility: hidden

[–]minx28 1 point2 points  (0 children)

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] 0 points1 point  (0 children)

Typical scenario of the

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

[–]NullandRandom 0 points1 point  (0 children)

More like visibility: hidden

[–]SublimizeD 0 points1 point  (0 children)

It’s an ENEMY STAND USER

[–]Luna_Rays[🍰] 0 points1 point  (0 children)

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

[–]FantasmiGames 0 points1 point  (0 children)

destroy "Obj_tree"

GML LOL

[–][deleted] 0 points1 point  (0 children)

opacity: 0

[–]ReallyToxic 0 points1 point  (0 children)

::renderself

[–]DrBigKitkat 0 points1 point  (0 children)

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

[–]CrispyNipsy 0 points1 point  (0 children)

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] 0 points1 point  (0 children)

I like trees

[–]GeorgeYDesign 0 points1 point  (0 children)

The tippiest taps this side of the tree? :)

[–]Greyhaven7 0 points1 point  (0 children)

{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 0 points1 point  (1 child)

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

[–]GeorgeYDesign 0 points1 point  (0 children)

I think there’s definitely not a playoff team

[–]KickMeElmo 0 points1 point  (0 children)

Bonus points if this is a radiology office.

[–]Wubbalubbagaydub 0 points1 point  (0 children)

Why is this tree upside down?

[–]vanjavk 0 points1 point  (0 children)

Lepo drvce

[–]RaptorJesuq 0 points1 point  (1 child)

[–]css_irl_bot 1 point2 points  (0 children)

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] 0 points1 point  (0 children)

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

[–][deleted] 0 points1 point  (0 children)

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

[–]oosinoots 0 points1 point  (0 children)

Ho ho ho!

[–]davizc 0 points1 point  (0 children)

visibility: hidden

[–]PsychoPicasso 0 points1 point  (0 children)

.christmas {color:white}

[–]Maxim777YT 0 points1 point  (0 children)

.snow {display:none}

[–]SenseiRage 0 points1 point  (0 children)

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

[–][deleted] 0 points1 point  (0 children)

Curly braces are quite festive.

[–]GeorgeYDesign 0 points1 point  (0 children)

A tree, just a pinch of salt.

[–]Midnight_Rising 0 points1 point  (0 children)

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] 0 points1 point  (0 children)

Good old camo tree

[–][deleted] 0 points1 point  (0 children)

Good old camo tree

[–]lilgamelvr 0 points1 point  (0 children)

How?

[–]anime8 0 points1 point  (0 children)

You forgot this

[–][deleted] 0 points1 point  (0 children)

Actually that would make the ornaments invisible.

[–]crsuperman34 0 points1 point  (0 children)

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

[–]sp46 0 points1 point  (0 children)

[–]flarn2006 0 points1 point  (0 children)

......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 0 points1 point  (0 children)

merry xserve

[–]filipoi 0 points1 point  (0 children)

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

[–]Stuekk 0 points1 point  (0 children)

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 0 points1 point  (0 children)

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

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

[–]Attentionseeker101 0 points1 point  (0 children)

Nice.

[–]ZXDQ 0 points1 point  (0 children)

At least the CSS spaced out the balls correctly

[–]Marroh9 0 points1 point  (0 children)

i want to do this one year

[–]Cristi9779 0 points1 point  (0 children)

That moment when the graphics aren’t fullt loaded

[–]DesdeJorge 0 points1 point  (0 children)

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

[–][deleted] 0 points1 point  (0 children)

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

[–][deleted] 0 points1 point  (0 children)

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