Embedding Style Sheet Switcher

HTML & CSS
15

Hi Paul, nice to have you here, your solution is indeed short and sweet, using only CSS, it is a very nice addition, and option to have. I did try your version, of course, and the idea of transition is a fine one, really nice.
That is why I like people, the more the better, everyone has something unique. The only thing was that you did not include an option of going back to the original style, when the page was loaded, so I hope you don’t mind, because I added that in, here it is:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
.wrap {
    max-width:960px;
    margin:auto;
    background:#f9f9f9;
    padding:10px;
    border:1px solid #000;
    transition:all 1s ease;
}

#style1:checked ~ .wrap {
    max-width:960px;
    margin:auto;
    background:#f9f9f9;
    padding:10px;
    border:1px solid #000;
}

#style2:checked ~ .wrap {
     max-width:600px;
     background:red;
     color:#fff;
}
#style3:checked ~ .wrap {
     max-width:1200px;
     background:orange;
     color:#fff;
     display:flex;
}
#style3:checked ~ .wrap p, #style3:checked ~ .wrap h1 {
    border:1px solid #ccc;
    background:blue;
    padding:20px;
    margin:0;
}
#style4:checked ~ .wrap {
     max-width:980px;
     background:yellow;
     color:#000;
     margin:auto;
}

</style>
</head>

<body>
<input type="radio" name="style" id="style1">
<label for="style1">Style 1</label>
<br>
<input type="radio" name="style" id="style2">
<label for="style2">Style 2</label>
<br>
<input type="radio" name="style" id="style3">
<label for="style3">Style 3</label>
<br>
<input type="radio" name="style" id="style4">
<label for="style4">Style 4</label>
<div class="wrap">
  <h1>This is a test</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus, magna et feugiat ullamcorper, augue risus imperdiet nunc, ut placerat felis elit ac quam. Mauris accumsan vulputate eleifend. Nulla id sapien elit. Duis ac nibh pharetra, dignissim nisi eu, ullamcorper lectus. Vivamus vulputate ex vel augue venenatis egestas. Praesent ut hendrerit enim. Morbi id aliquam eros. Praesent vulputate ut nunc sit amet efficitur. Proin iaculis sit amet eros sed porttitor. Phasellus fermentum pretium viverra. Donec bibendum viverra faucibus.</p>
</div>
</body>
</html>

And John is doing a nice job at keeping track of those versions, and placing those control switches at the top. Indeed is worth having them all in one place for reference, you never know when you might want to use one, two or all of them. Myself I will be using each version on a different website, just because I like variety, and different ideas.

Mittineague!! I did play quite a bit with your versions, and I think I’m going to have to ask for help about the second one, but not yet, I will try a bit more, and if I don’t figure it out I will be back with the question, or questions, because I have two of them on my mind right now. The first version works excellent, actually so does the second version, is just that I’m a bit lost, well… anyway let me poke around some more.

Thank you guys and have a good night!

3 Likes