Webleb - fragmentos de código - Lámpara de calle interactiva

HTML

CSS

:root {
	--pole-dark: #1e2635;
	--pole-light: #233451;
	--sewer-dark: #3a392f;
	--sewer-light: #4a4a3d;
	--ground-light: #83744b;
	--ground-dark: #6d5f45;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #17175f, #ffd844);
}

body:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(#FFF9 0%, #fff0 .000075%, #fff0 .0005%, #fff0 .12345%);
	filter: blur(0.5px) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}

.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.buildings {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(180deg, #021023, #222329); 
	clip-path: polygon(0% 41%, 15% 26%, 27% 42%, 32% 42%, 33% 40%, 29% 40%, 46% 16%, 63% 39%, 59% 39%, 61% 42%, 68% 41.5%, 70% 27%, 89% 27%, 92% 41%, 100% 40%, 100% 100%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.window {
	background: 
		linear-gradient(88deg, #fff0 0 calc(50% - 0.2vw), #111 calc((50% - 0.2vw) + 1px) calc(50% + 0.2vw), #fff0 calc((50% + 0.2vw) + 1px) 100%), 
		repeating-linear-gradient(182deg, #fff0 0 calc(30% - 0.2vw), #111 calc((30% - 0.2vw) + 1px) calc(30% + 0.2vw), #fff0 calc((30% + 0.2vw) + 1px) 37%), #e7d09a;
	width: 5vmin;
	height: 7vmin;
	position: absolute;
	left: 5vw;
	transform: scale(0.8);
	margin-top: 3vmin;
	clip-path: polygon(0 0, 100% 0, 85% 100%, 10% 100%);
}

.window:nth-child(2) {
	left: 16vw;
	margin-top: 3.25vmin;
}

.window:nth-child(3) {
	left: 12vw;
	margin-top: -26vmin;
	clip-path: polygon(5% 0%, 97% 1%, 85% 65%, 10% 63%);
}

.window:nth-child(4) {
	right: 12vw;
	margin-top: -4vmin;
	left: inherit;
}

.window:nth-child(5) {
	right: 22vw;
	margin-top: -4vmin;
	left: inherit;
	transform: scale(0.85) rotateY(180deg);
}

.ground {
	background: radial-gradient(circle at 50% 350vh, var(--ground-light) 0 343vh, #333 calc(343vh + 2px) 346vh, var(--ground-dark) calc(346vh + 2px) 100%);
	position: absolute;
	width: 150vw;
	height: 26vh;
	bottom: 0;
	border-radius: 100% 100% 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
}

.sewer {
	position: absolute;
	width: 130px;
	height: 50px;
	margin-left: -500px;
	margin-top: -50px;
	clip-path: polygon(0% 33%, 65% 10%, 100% 35%, 40% 80%);
	background: 
		linear-gradient(-188deg, var(--sewer-dark) 0 19px, #fff0 20px 100%), 
		linear-gradient(-16deg, var(--sewer-dark) 0 34px, #fff0 35px 100%), 
		linear-gradient(-163deg, var(--sewer-dark) 0 19px, #fff0 20px 100%), 
		linear-gradient(25deg, var(--sewer-dark) 0 33px, var(--sewer-light) 34px 39px, var(--sewer-dark) 40px 46px, var(--sewer-light) 47px 52px, var(--sewer-dark) 53px 59px, var(--sewer-light) 60px 67px, var(--sewer-dark) 68px 73px, var(--sewer-light) 74px 90px, #fff0 0 100%);
}

.streetlamp {
	width: 80px;
	height: 72vh;
	position: absolute;
	top: 20vh;
	margin-left: -4vmin;
	max-width: 80px;
	min-width: 80px;
}

.base {
	bottom: 0;
	right: 0;
	position: absolute;
	width: 81%;
	height: 24%;
	background: linear-gradient(-94deg, var(--pole-dark) 0 23%, #fff0 calc(23% + 1px) 100%), linear-gradient(-1deg, var(--pole-dark) 0 3.65%, #fff0 calc(1.65% + 1px) 100%), linear-gradient(85deg, var(--pole-dark) 0 58%, var(--pole-light) calc(58% + 1px) 100%);
	border-radius: 2px;
	clip-path: polygon(15% 0, 76% 0, 95% 99%, 0% 99%);
	z-index: 1;
}

.basetop {
	background: #1e2634;
	width: 75%;
	height: 3%;
	position: absolute;
	bottom: 24%;
	left: 16%;
	border-radius: 2px;
	z-index: 2;
	transform: rotate(-0.5deg);
}

.pole {
	position: absolute;
	width: 25%;
	height: 56.5%;
	background: linear-gradient(-1deg, var(--pole-dark) 0 1.65%, #fff0 calc(1.65% + 1px) 100%), linear-gradient(-91deg, var(--pole-dark) 0 35%, #fff0 calc(35% + 1px) 100%), linear-gradient(89.5deg, var(--pole-dark) 0 40%, var(--pole-light) calc(40% + 1px) 100%);
	bottom: 26.25%;
	left: 45%;
	clip-path: polygon(17% 0, 60% 0, 95% 99%, 0% 99%);
	z-index: 1;
}

.poletop {
	width: 20%;
	height: 1.5%;
	background: var(--pole-dark);
	position: absolute;
	bottom: 82%;
	left: 44%;
	z-index: 1;
	clip-path: polygon(0% 0, 100% 0, 95% 65%, 10% 72%);
}

.head {
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: 83%;
	z-index: 1;
}

.head .top {
	background: conic-gradient(from 131deg at 55% 0, var(--pole-light) 0 12%, var(--pole-dark) 13% 29.5%, #fff0 0 100%);
	width: 100%;
	height: 30%;
	top: 20%;
	position: absolute;
	transform: rotate(-3deg);
}

.head .bot {
	width: 75%;
	height: 5%;
	background: 
		linear-gradient(45deg, #fff0 12%, var(--pole-dark) 0 65%, #fff0 0 100%), 
		linear-gradient(-50deg, #fff0 8%, var(--pole-dark) 0 65%, #fff0 0 100%);
	left: 17%;
	position: absolute;
	bottom: 1%;
	transform: rotate(-3deg);
}

.glass {
	background: 
		linear-gradient(-79deg, #fff0 0 12%, var(--pole-dark) 13% 16%, #fff0 17% 100%), 
		conic-gradient(from -46deg at 53% 200%, #fff0 0 13%, var(--pole-dark) 13.2% 14%, #fff0 14.2% 100%), 
		linear-gradient(70deg, #fff0 0 21%, var(--pole-dark) 22% 25%, #fff0 26% 100%), 
		radial-gradient(circle at 37% 250%, #fff0 0 73%, #e4ce8b 75% 100%), 
		radial-gradient(circle at 37% 300%, #fff0 0 73%, #e4ce8b 75% 100%), 
		conic-gradient(from -46deg at 53% 200%, #fff0 0 7%, #f5f3b0 0 13%, var(--pole-dark) 13.2% 14%, #fff0 14.2% 100%), 
		linear-gradient(-79deg, #fff0 0 12%, var(--pole-dark) 13% 16%, #ffe5ad 17% 50%, #fff0 17% 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%, 100% 100%, 33% 42%, 50% 35%, 100% 100%;
	background-position: 0 0, 0 0, 0 0, 90% 0, 20% 0, 0 0;
	width: 100%;
	height: 45%;
	top: 50%;
	position: absolute;
	transform: rotate(-3deg);
	opacity: 0.5;
}

.light {
	background: linear-gradient(180deg, #dac47080, #dac47020 90%, #fff0 100%);
	width: 650px;
	height: 64vh;
	position: absolute;
	left: -274px;
	bottom: 1.5%;
	clip-path: polygon(43% 1%, 53% 0.35%, 100% 100%, 0 100%);
	opacity: 0;
}

.ground-light {
	background: #dac47080;
	width: 650px;
	left: -275px;
	position: absolute;
	bottom: -28px;
	height: 80px;
	border-radius: 100%;
	z-index: 0;
	opacity: 0;
}

.top:before {
	content: "";
	position: absolute;
	background: var(--pole-light);
	width: 8px;
	height: 12px;
	border-radius: 100%;
	left: 48%;
	top: -40%;
	border: 3px solid var(--pole-dark);
	border-left-width: 0;
}

.top:after {
	content: "";
	position: absolute;
	background: var(--pole-dark);
	width: 4px;
	height: 12px;
	border-radius: 100%;
	left: 52%;
	top: -70%;
}

#btn {
	display: none;
}

label[for=btn] {
	position: absolute;
	width: 80%;
	height: 55%;
	z-index: 5;
	top: 45%;
	left: 11%;
	border-radius: 50% 50% 100% 150%;
	cursor: pointer;
}

#btn:checked + .content .light,
#btn:checked + .content .ground,
#btn:checked + .content .ground-light,
#btn:checked + .content .head .glass {
	animation: turn-on 2s ease 0s 1;
	opacity: 1;
}

@keyframes turn-on {
	0%, 10%, 25% { opacity: 0; }
	5%, 15%, 35%, 100% { opacity: 1; }
}

@media screen and (orientation:landscape) and (max-width: 767px) {
	.light {
		bottom: 11%;
	}
	.ground-light {
		bottom: -9px;
	}
}

Lámpara de calle interactiva

Recomendado

Una página de inicio alternativa

Presentación de diapositivas de paralaje

contraseña de inicio de sesión

HTML

CSS

JS

Recomendado

Una página de inicio alternativa

Presentación de diapositivas de paralaje

contraseña de inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS