100 Days of CSS: Day 19

Slider with Radio Buttons: Why use JavaScript when you can use CSS? Selectors can be wildly combined with each other.

Unsplash ↗

Project Structure

The project consists of 2 main files:

• index.html - the HTML structure.
• style.css - for styling.

HTML Structure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

<div class="frame">
  <div class="center">
		<input type="radio" id="check-1" name= "rd"/>
		<label class="circle" for="check-1" id="c1"></label>
		<input type="radio" id="check-2" name= "rd"/>
		<label class="circle" for="check-2" id="c2"></label>
		<input type="radio" id="check-3" name= "rd"/>
		<label class="circle" for="check-3" id="c3"></label>
		<div class="active"></div>
		<div class="bg"></div>
  </div>
</div>

CSS Styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere erat at mi sagittis ultricies. Aenean cursus libero vitae odio congue volutpat.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 400px;
	margin-top: -200px;
	margin-left: -200px;
	border-radius: 2px;
	box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
	font-family: "Open Sans", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
	position: absolute;
	text-align: center;
	width: 400px;
	height: 400px;
	overflow:hidden;
	top: 0;
	left: 0;
}

input[type="radio"] {
	display: none;
}


.circle {
	box-sizing: border-box;
	position:absolute;
	z-index: 5;
	top: 175px;
	left: 115px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid #fff;
	cursor: pointer;
}

#c2 {
	left: 175px;
}

#c3 {
	left: 235px;
}

.active {
	position: absolute;
	z-index: 10;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
	top: 180px;
	left: 120px;
	transition: all .5s ease;
}

#check-1:checked ~ .active {
	transform: translateX(0px);
}

#check-2:checked ~ .active {
	transform: translateX(60px);
}

#check-3:checked ~ .active {
	transform: translateX(120px);
}

.bg {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 0;
	left: 0;
	background: #3498db;
	border-left: 400px solid #9b59b6;
	border-right: 400px solid #1abc9c;
	transition: all 1s ease;
	transform: translateX(0px);
}

#check-1:checked ~ .bg {
	transform: translateX(0px);
}

#check-2:checked ~ .bg {
	transform: translateX(-400px);
}

#check-3:checked ~ .bg {
	transform: translateX(-800px);
}

Reflection