Dernière modification : juin 2022
Démonstration d'un système de changement de mise en page responsive en pur CSS.
Switch inline layout
<input type="radio" id="grille" name="contenu_switch" checked>
<label for="grille">Affichage par grille</label>
<input type="radio" id="liste" name="contenu_switch">
<label for="liste">Affichage par liste</label>
<div class="contenu_demo">
<div class="contenu">
<div class="article">
<h3>Titre</h3>
<img src=https://unsplash.it/300/300/?random alt/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis eos blanditiis odit sit, neque excepturi, fugiat officiis magni! Ducimus deserunt culpa debitis obcaecati, cumque non a fugiat. Consectetur, itaque, praesentium.</p>
<ul>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
<li><a href="">tag</a></li>
</ul>
</div>
<div class="article">
.....
</div>
</div>
</div>
*,*::before,*::after{box-sizing: border-box;}
ul{list-style: none;padding-left:0}
img{max-width:100%;display:block;height:auto}
p{text-align: justify}
input[type="radio"]{
position: absolute;
left: -9999px
}
input[type="radio"] + label{
line-height: 1.2;
padding: 5px;
margin: 2rem auto 2rem 2rem;
display: inline-block;
cursor: pointer;
border: 1px solid;
color: #6753ea
}
input[type="radio"]:checked + label{
background-color: #6753ea;
color: white
}
.contenu_demo{
padding:1rem;
overflow:hidden;
text-align:center;
margin:auto
}
.contenu_demo img{
border-radius: .5rem;
margin:auto
}
.article{
background:white;
display:inline-block;
border:1px solid hsl(0,0%,87%);
padding:10px;
margin-bottom:20px;
border-radius:.25rem
}
.article ul li{
display: inline-block
}
.article li a{
font-size:.875rem;
display:inline-block;
background-color:#6753ea;
padding:5px;
color:white;
margin:3px
}
#grille:checked ~ .contenu_demo .article{
width:48%
}
#liste:checked ~ .contenu_demo img{
float:left;
margin-right: 20px
}
/*animation lorsqu'on clique sur l'affichage liste*/
#liste:checked ~ .contenu_demo {
animation: anim-demo .5s cubic-bezier(.23,1,.32,1)
}
/*animation lorsqu'on clique sur l'affichage grille*/
#grille:checked ~ .contenu_demo .contenu {
animation: anim-demo .5s cubic-bezier(.23,1,.32,1)
}
@media screen and (min-width:62.75em) {
.article ul li{
float:left
}
.article li a{
font-size:1rem
}
.article li a:hover{
transition:.6s;
background-color:#543ee5
}
#grille:checked ~ .contenu_demo ul,.contenu_demo p{
text-align:justify
}
#liste:checked ~ .contenu_demo h3{
text-align:left
}
#liste:checked ~ .contenu_demo ul{
float:right
}
#grille:checked ~ .contenu_demo .article{
width:32%
}
}
/*animation*/
@keyframes anim-demo{0%{transform:translatey(100%)} 100%{transform:translatey(0%)}}
@-webkit-keyframes anim-demo{0%{-webkit-transform:translatey(100%)}100%{-webkit-transform:translatey(0%)}}