Responsive Website Design: Change background on button click, using CSS only

Only Create Index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
 text-align:center;
 color:white;
 font:300 12px 'Open Sans'
}
.background {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #eee;
 z-index: -1;
 background-size: cover;
 transition: background-color .3s;
}
input[type=text] {
 width: 10px;
 float:left;
 z-index: 10;
 border:0;
 background-color: rgba(255, 255, 255, 0.5);
 padding: 15px;
}
input[type=text]:focus {
 background-color: rgba(255, 255, 255, 1);
 outline: none;
}
 #color1:focus ~ .background {
 background-color: #E3E3E3;
}
 #color2:focus ~ .background {
 background-color: #A6A6A6;
}
 #color3:focus ~ .background {
 background-color: #545454;
}
label {
 display:block;
 margin-top:50px;
}
</style>
</head>
<body>
<h2 style="color:#CC9900">Click block to choose background color</h2>
<input type="text" id="color1" placeholder="color1" style="background: #E3E3E3">
<input type="text" id="color2" placeholder="color1" style="background:#A6A6A6">
<input type="text" id="color3" placeholder="color1" style="background:#545454">
<div class='background'></div>
</body>
</html>

Friday 9 October 2015

Change background on button click, using CSS only

Only Create Index.html

No comments:

Post a Comment