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

1520 zegarkidawida

Abrir en el editor Video Publica tu código

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

Recomendado

2 March 2025

Un código de Komplex

26 October 2024

Bot de planes (página de inicio)

17 October 2025

Plantilla HTML para portafolio de diseñador web

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

Un código de Komplex

Bot de planes (página de inicio)

Plantilla HTML para portafolio de diseñador web

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS