Casillas de verificación de sables de luz de Star Wars con CSS3 puro

682 zegarkidawida

Abrir en el editor Publica tu código

Casillas de verificación de sables de luz de Star Wars con CSS3 puro

Recomendado

11 July 2025

Menú de alternancia CSS con iconos de Font Awesome

10 May 2025

Un código de Mete

13 July 2024

Plantilla de formulario de inicio de sesión más sencilla

HTML

<section class="the-demo">
		<div class="example-item">
			<div class="lightsaber">
				<label for="yoda-example"></label>
				<input type="checkbox" id="yoda-example" checked="checked">
				<div class="switch"></div>
				<div class="plasma yoda"></div>
			</div>
			<h3>Yoda</h3>
		</div>
		<div class="example-item">
			<div class="lightsaber">
				<label for="darth-vader-example"></label>
				<input type="checkbox" id="darth-vader-example" checked="checked">
				<div class="switch"></div>
				<div class="plasma vader"></div>
			</div>
			<h3>Vader</h3>
		</div>
		<div class="example-item">
			<div class="lightsaber">
				<label for="windu-example"></label>
				<input type="checkbox" id="windu-example">
				<div class="switch"></div>
				<div class="plasma windu"></div>
			</div>
			<h3>Windu</h3>
		</div>
		<div class="example-item clearfix">
			<div class="lightsaber">
				<label for="obi-wan-example"></label>
				<input type="checkbox" id="obi-wan-example">
				<div class="switch"></div>
				<div class="plasma obi-wan"></div>
			</div>
			<h3>Obi</h3>
		</div>

</section>

.the-demo {
			width: 960px;
			margin: 0 auto;
		}

.example-item {
			float: left;
			width: 25%;
			padding-top: 325px;
		}

</style>

CSS

.lightsaber { position: relative; }

.lightsaber label {
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 88;
	text-indent: -9999px;
	width: 15px;
	height: 50px;
	border-bottom: solid 4px grey;
	border-top: solid 5px grey;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	background: rgb(226,226,226); /* Old browsers */
	background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */
	background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); /* IE6-9 */
}

.lightsaber .switch {
	background: #B94A37;
	width: 5px;
	height: 10px;
	display: block;
	position: absolute;
	bottom: 25px;
	left: 13px;
	transition: left 200ms;
	-moz-transition: left 200ms;
	-webkit-transition: left 200ms;
	-o-transition: left 200ms;
	-ms-transition: left 200ms;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
}

.lightsaber input[type=checkbox] {
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	z-index: 77;
}

.lightsaber .plasma {
	transition: height 300ms,;
	-moz-transition: height 300ms;
	-webkit-transition: height 300ms;
	-o-transition: height 300ms;
	-ms-transition: height 300ms;
	border-radius: 12px 12px 0 0;
	position: absolute;
	bottom: 55px;
	left: 2px;
	width: 10px;
	display: block;
	filter: blur(1px);
	-moz-filter: blur(1px);
	-webkit-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	height: 0;
}

.lightsaber input[type=checkbox]:checked ~ div.plasma {
	height: 250px;
}

.lightsaber input[type=checkbox]:hover ~ div.switch {
	background: #c09853;
	left: 12px;
}

.lightsaber input[type=checkbox]:checked ~ div.switch {
	background: #468847;
}

.yoda {
	background: rgb(135,220,90); /* Old browsers */
	background: linear-gradient(to right, rgb(135,220,90) 0%,rgb(254,254,254) 30%,rgb(254,254,254) 50%,rgb(254,254,254) 70%,rgb(135,220,90) 100%); /* W3C */
	background: -moz-linear-gradient(left, rgb(135,220,90) 0%, rgb(254,254,254) 30%, rgb(254,254,254) 50%, rgb(254,254,254) 70%, rgb(135,220,90) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(135,220,90)), color-stop(30%,rgb(254,254,254)), color-stop(50%,rgb(254,254,254)), color-stop(70%,rgb(254,254,254)), color-stop(100%,rgb(135,220,90))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgb(135,220,90) 0%,rgb(254,254,254) 30%,rgb(254,254,254) 50%,rgb(254,254,254) 70%,rgb(135,220,90) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgb(135,220,90) 0%,rgb(254,254,254) 30%,rgb(254,254,254) 50%,rgb(254,254,254) 70%,rgb(135,220,90) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgb(135,220,90) 0%,rgb(254,254,254) 30%,rgb(254,254,254) 50%,rgb(254,254,254) 70%,rgb(135,220,90) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87dc5a', endColorstr='#87dc5a',GradientType=1 ); /* IE6-9 */
	animation-name: yoda;
	-moz-animation-name: yoda;
	-webkit-animation-name: yoda;
	-o-animation-name: yoda;
	-ms-animation-name: yoda;
	animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

.vader {
	background: rgb(229,17,21); /* Old browsers */
	background: linear-gradient(to right, rgba(229,17,21,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(229,17,21,1) 100%); /* W3C */
	background: -moz-linear-gradient(left, rgba(229,17,21,1) 0%, rgba(254,254,254,1) 30%, rgba(254,254,254,1) 47%, rgba(254,254,254,1) 71%, rgba(229,17,21,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(229,17,21,1)), color-stop(30%,rgba(254,254,254,1)), color-stop(47%,rgba(254,254,254,1)), color-stop(71%,rgba(254,254,254,1)), color-stop(100%,rgba(229,17,21,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(229,17,21,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(229,17,21,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(229,17,21,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(229,17,21,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(229,17,21,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(229,17,21,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51115', endColorstr='#e51115',GradientType=1 ); /* IE6-9 */
	animation-name: vader;
	-moz-animation-name: vader;
	-webkit-animation-name: vader;
	-o-animation-name: vader;
	-ms-animation-name: vader;
	animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

.windu {
	background: rgb(202,116,221); /* Old browsers */
	background: linear-gradient(to right, rgba(202,116,221,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(202,116,221,1) 100%); /* W3C */
	background: -moz-linear-gradient(left, rgba(202,116,221,1) 0%, rgba(254,254,254,1) 30%, rgba(254,254,254,1) 47%, rgba(254,254,254,1) 71%, rgba(202,116,221,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,116,221,1)), color-stop(30%,rgba(254,254,254,1)), color-stop(47%,rgba(254,254,254,1)), color-stop(71%,rgba(254,254,254,1)), color-stop(100%,rgba(202,116,221,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(202,116,221,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(202,116,221,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(202,116,221,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(202,116,221,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(202,116,221,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(202,116,221,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca74dd', endColorstr='#ca74dd',GradientType=1 ); /* IE6-9 */
	animation-name: windu;
	-moz-animation-name: windu;
	-webkit-animation-name: windu;
	-o-animation-name: windu;
	-ms-animation-name: windu;
	animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

.obi-wan {
	background: rgb(55,132,214); /* Old browsers */
	background: linear-gradient(to right, rgba(55,132,214,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(55,132,214,1) 100%); /* W3C */
	background: -moz-linear-gradient(left, rgba(55,132,214,1) 0%, rgba(254,254,254,1) 30%, rgba(254,254,254,1) 47%, rgba(254,254,254,1) 71%, rgba(55,132,214,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(55,132,214,1)), color-stop(30%,rgba(254,254,254,1)), color-stop(47%,rgba(254,254,254,1)), color-stop(71%,rgba(254,254,254,1)), color-stop(100%,rgba(55,132,214,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(55,132,214,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(55,132,214,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(55,132,214,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(55,132,214,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(55,132,214,1) 0%,rgba(254,254,254,1) 30%,rgba(254,254,254,1) 47%,rgba(254,254,254,1) 71%,rgba(55,132,214,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3784d6', endColorstr='#3784d6',GradientType=1 ); /* IE6-9 */
	animation-name: obi-wan;
	-moz-animation-name: obi-wan;
	-webkit-animation-name: obi-wan;
	-o-animation-name: obi-wan;
	-ms-animation-name: obi-wan;
	animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
}

div {
	-webkit-transform : translateZ(0); 
	-o-transform : translateZ(0); 
	-moz-transform : translateZ(0); 
	transform : translateZ(0); 
}

/* Animations */
@keyframes yoda {
	from { box-shadow: 0 0 10px #7EC855; }
	50% { box-shadow: 0 0 16px #7EC855; }
	to { box-shadow: 0 0 10px #7EC855; }
}
@-moz-keyframes yoda {
	from { box-shadow: 0 0 10px #7EC855; }
	50% { box-shadow: 0 0 16px #7EC855; }
	to { box-shadow: 0 0 10px #7EC855; }
}
@-webkit-keyframes yoda {
	from { box-shadow: 0 0 10px #7EC855; }
	50% { box-shadow: 0 0 16px #7EC855; }
	to { box-shadow: 0 0 10px #7EC855; }
}
@-o-keyframes yoda {
	from { box-shadow: 0 0 10px #7EC855; }
	50% { box-shadow: 0 0 16px #7EC855; }
	to { box-shadow: 0 0 10px #7EC855; }
}
@-ms-keyframes yoda {
	from { box-shadow: 0 0 10px #7EC855; }
	50% { box-shadow: 0 0 16px #7EC855; }
	to { box-shadow: 0 0 10px #7EC855; }
}

@keyframes vader {
	from { box-shadow: 0 0 10px #e51115; }
	50% { box-shadow: 0 0 16px #e51115; }
	to { box-shadow: 0 0 10px #e51115; }
}
@-moz-keyframes vader {
	from { box-shadow: 0 0 10px #e51115; }
	50% { box-shadow: 0 0 16px #e51115; }
	to { box-shadow: 0 0 10px #e51115; }
}
@-webkit-keyframes vader {
	from { box-shadow: 0 0 10px #e51115; }
	50% { box-shadow: 0 0 16px #e51115; }
	to { box-shadow: 0 0 10px #e51115; }
}
@-o-keyframes vader {
	from { box-shadow: 0 0 10px #e51115; }
	50% { box-shadow: 0 0 16px #e51115; }
	to { box-shadow: 0 0 10px #e51115; }
}
@-ms-keyframes vader {
	from { box-shadow: 0 0 10px #e51115; }
	50% { box-shadow: 0 0 16px #e51115; }
	to { box-shadow: 0 0 10px #e51115; }
}

@keyframes windu {
	from { box-shadow: 0 0 10px #ca74dd; }
	50% { box-shadow: 0 0 16px #ca74dd; }
	to { box-shadow: 0 0 10px #ca74dd; }
}
@-moz-keyframes windu {
	from { box-shadow: 0 0 10px #ca74dd; }
	50% { box-shadow: 0 0 16px #ca74dd; }
	to { box-shadow: 0 0 10px #ca74dd; }
}
@-webkit-keyframes windu {
	from { box-shadow: 0 0 10px #ca74dd; }
	50% { box-shadow: 0 0 16px #ca74dd; }
	to { box-shadow: 0 0 10px #ca74dd; }
}
@-o-keyframes windu {
	from { box-shadow: 0 0 10px #ca74dd; }
	50% { box-shadow: 0 0 16px #ca74dd; }
	to { box-shadow: 0 0 10px #ca74dd; }
}
@-ms-keyframes windu {
	from { box-shadow: 0 0 10px #ca74dd; }
	50% { box-shadow: 0 0 16px #ca74dd; }
	to { box-shadow: 0 0 10px #ca74dd; }
}

@keyframes obi-wan {
	from { box-shadow: 0 0 10px #3784d6; }
	50% { box-shadow: 0 0 16px #3784d6; }
	to { box-shadow: 0 0 10px #3784d6; }
}
@-moz-keyframes obi-wan {
	from { box-shadow: 0 0 10px #3784d6; }
	50% { box-shadow: 0 0 16px #3784d6; }
	to { box-shadow: 0 0 10px #3784d6; }
}
@-webkit-keyframes obi-wan {
	from { box-shadow: 0 0 10px #3784d6; }
	50% { box-shadow: 0 0 16px #3784d6; }
	to { box-shadow: 0 0 10px #3784d6; }
}
@-o-keyframes obi-wan {
	from { box-shadow: 0 0 10px #3784d6; }
	50% { box-shadow: 0 0 16px #3784d6; }
	to { box-shadow: 0 0 10px #3784d6; }
}
@-ms-keyframes obi-wan {
	from { box-shadow: 0 0 10px #3784d6; }
	50% { box-shadow: 0 0 16px #3784d6; }
	to { box-shadow: 0 0 10px #3784d6; }
}

Recomendado

Menú de alternancia CSS con iconos de Font Awesome

Un código de Mete

Plantilla de formulario de inicio de sesión más sencilla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS