Avec le CSS, nous pouvons réaliser énormément de choses. Actuellement, avec l’utilisation grandissante des mobiles, nous voyons les sites se transformer devant nos yeux grâce au responsive.
Mais est-il possible de réaliser un carré responsive ? Un carré qui s’adaptera à la taille de votre écran…
Je vais vous démontrer simplement que c’est tout à fait possible.
Voici une petite animation représentant l’effet d’un bloc responsive lorsque la largeur de l’écran diminue puis augmente.
Pour commencer, nous allons créer une div que nous allons la nommer “bloc” (pour exemple) dans notre fichier HTML.
<div class="bloc">
</div>
En temps normal pour pouvoir créer un carré nous aurions utilisé des valeurs de largeur et de hauteur en pixels ou en pourcentages.
/* En pixel */
.bloc {
background-color: red;
width: 300px;
height: 300px;
}
/* En pourcentage */
.bloc {
background-color: red;
width: 80%;
height: 80%;
}
Mais pour pouvoir obtenir l’effet responsive que nous souhaitons, nous allons seulement utiliser la valeur de la largeur en pourcentage, puis nous allons utiliser le pseudo élément ::before avec un padding-bottom à 100%.
.bloc {
background-color: red;
width: 100%;
}
.bloc::after {
content: '';
display: block;
padding-bottom: 100%;
}
Pour pouvoir ajouter du contenu dans votre nouveau bloc, il vous faudra ajouter une nouvelle class en position absolute. Si vous ajoutez votre contenu sans cette position votre bloc va se déformer.
Pour cela nous allons reprendre notre code HTML
<div class="bloc">
<div class="content">
Votre contenu
</div>
</div>
Puis nous allons modifier notre fichier CSS
.bloc {
position: relative;
background-color: red;
width: 100%;
}
.bloc::after {
content: '';
display: block;
padding-bottom: 100%;
}
.bloc .content {
position: absolute;
width: 100%;
height: 100%;
}
Et voilà, si vous avez bien suivi mes explications, vous obtenez un carré responsive qui restera proportionnel sur tout vos écrans.