Sistema solar en cascada

3,332 Andev.web

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

19 October 2026

Sistema de temas CSS de modo oscuro con variables personalizadas

4 September 2026

La aventura de Alto

15 May 2026

Asiento muerto

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="layout">
	<div class="content">
		<h1><strong>C</strong>ascading <strong>S</strong>olar <strong>S</strong>ystem</h1>
	</div>

<ol class="solar-system">
		<li class="orbit">
        	<div class="label">Sun</div>
			<div class="planet sun"></div>
		</li>
		<li class="orbit">
			<div class="label">Mercury</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mercury"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Venus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet venus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Earth</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet earth"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Mars</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet mars"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Jupiter</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet jupiter"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Saturn</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet saturn"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Uranus</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet uranus"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Neptune</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet neptune"></div>
			</div>
		</li>
		<li class="orbit">
			<div class="label">Pluto</div>
			<div class="orbit-ring"></div>
			<div class="axis">
				<div class="planet pluto"></div>
			</div>
		</li>
	</ol>
</div>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
}

.solar-system {
	--sun-diameter: 12dvh;
	--sun-spacing: .15;

/* very much not to scale */
	--mercury-size: .2;
	--venus-size: .25;
	--earth-size: .25;
	--mars-size: .25;
	--jupiter-size: .75;
	--saturn-size: .6;
	--uranus-size: .4;
	--neptune-size: .4;
	--pluto-size: .1;

/* to scale! https://en.wikipedia.org/wiki/Orbital_period#Examples_of_sidereal_and_synodic_periods */
	--mercury-period: .24;
	--venus-period: .615;
	--earth-duration: 5s;
	--mars-period: 1.88;
	--jupiter-period: 11.86;
	--saturn-period: 29.46;
	--uranus-period: 84;
	--neptune-period: 164;
	--pluto-period: 248;

padding: 1rem 0 0 0;
	overflow: hidden;

display: grid;
	gap: calc(var(--sun-diameter) * .15);
	grid-template-rows: repeat(10, auto);
	grid-template-areas:
		"pluto"
		"neptune"
		"uranus"
		"saturn"
		"jupiter"
		"mars"
		"earth"
		"venus"
		"mercury"
		"sun";

.orbit {
		--sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
		--planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);

grid-column: 1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		grid-template-columns: subgrid;
		justify-items: center;

&:has(.sun) {
			--planet-size: 1;
			grid-area: sun;
			padding-block: var(--sun-margin);
            .label {
                color: transparent;
            }
		}
		&:has(.mercury) {
			--planet-size: var(--mercury-size);
			--planet-duration: calc(var(--earth-duration) * var(--mercury-period));
			grid-row: mercury-start / sun-end;
			.planet, .label {
				grid-area: mercury;
			}
		}
		&:has(.venus) {
			--planet-size: var(--venus-size);
			--planet-duration: calc(var(--earth-duration) * var(--venus-period));
			grid-row: venus-start / sun-end;
			.planet, .label {
				grid-area: venus;
			}
		}
		&:has(.earth) {
			--planet-size: var(--earth-size);
			--planet-duration: var(--earth-duration);
			grid-row: earth-start / sun-end;
			.planet, .label {
				grid-area: earth;
			}
		}
		&:has(.mars) {
			--planet-size: var(--mars-size);
			--planet-duration: calc(var(--earth-duration) * var(--mars-period));
			grid-row: mars-start / sun-end;
			.planet, .label {
				grid-area: mars;
			}
		}
		&:has(.jupiter) {
			--planet-size: var(--jupiter-size);
			--planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
			grid-row: jupiter-start / sun-end;
			.planet, .label {
				grid-area: jupiter;
			}
		}
		&:has(.saturn) {
			--planet-size: var(--saturn-size);
			--planet-duration: calc(var(--earth-duration) * var(--saturn-period));
			grid-row: saturn-start / sun-end;
			.planet, .label {
				grid-area: saturn;
			}

}
		&:has(.uranus) {
			--planet-size: var(--uranus-size);
			--planet-duration: calc(var(--earth-duration) * var(--uranus-period));
			grid-row: uranus-start / sun-end;
			.planet, .label {
				grid-area: uranus;
			}
		}
		&:has(.neptune) {
			--planet-size: var(--neptune-size);
			--planet-duration: calc(var(--earth-duration) * var(--neptune-period));
			grid-row: neptune-start / sun-end;
			.planet, .label {
				grid-area: neptune;
			}
		}
		&:has(.pluto) {
			--planet-size: var(--pluto-size);
			--planet-duration: calc(var(--earth-duration) * var(--pluto-period));
			grid-row: pluto-start / sun-end;
			.planet, .label {
				grid-area: pluto;
			}
		}
	}

.planet {
		height: var(--planet-diameter);
		aspect-ratio: 1;
		border-radius: 50%;
		/* background-color: rgb(255 0 0 / .9); */
		z-index: 1;
		background-image: radial-gradient(circle at center 80%, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 50%);

&.sun {
			--sun-color: #ffd800;
			background-color: var(--sun-color);
			background-image: none;
			box-shadow: 0 0 42px 0 color-mix(in oklch, transparent, var(--sun-color) 50%);
		}
		&.mercury {
			background-color: #989494;
		}
		&.venus {
			background-color: #e1d59d;
		}
		&.earth {
			background-color: #008bb3;
		}
		&.mars {
			background-color: #dfa272;
		}
		&.jupiter {
			background-color: #af7045;
		}
		&.saturn {
			background-color: #d3b57c;
		}
		&.uranus {
			background-color: #77aac4;
		}
		&.neptune {
			background-color: #3a80a4;
		}
		&.pluto {
			background-color: #989494;
		}
	}

.orbit-ring {
		grid-area: 1 / 1 / -1 / -1;
		height: calc(2 * (100% - var(--planet-diameter) / 2 - var(--sun-diameter) / 2 - var(--sun-margin)));
		aspect-ratio: 1;
		translate: 0 calc(var(--planet-diameter) / 2);
		border-radius: 50%;
		border: 1px solid rgb(255 255 255 / .5);
		z-index: 0;
	}

.axis {
		grid-area: 1 / 1 / -1 / -1;
		display: grid;
		grid-template-rows: subgrid;
		transform-origin: center calc(100% - var(--sun-diameter) / 2 - var(--sun-margin));
		animation: orbit var(--planet-duration) linear infinite;
	}

.label {
		align-self: center;
		translate: 0 -.5lh;
		z-index: 2;
	}
}

@keyframes orbit {
	from {
		rotate: 0turn;
	}

to {
		rotate: 1turn;
	}
}

body {
	font-family: system-ui, sans-serif;
	color: white;
	background: linear-gradient(to bottom, #112, #223);
}

a {
	color: currentcolor;
}

h1 {
	font-weight: 400;
}

.layout {
	min-height: 100dvh;
	display: grid;

& > .solar-system {
		align-self: end;
	}
}

.content {
	max-inline-size: 40rem;
	margin: 8px;
	& > * + * {
		margin-block-start: 1em;
	}
}