Notes

Une boite aux coins arrondis avec une seule image en background

Tags : ,

Ceci est une astuce trouvée sur usabilitypost.com qui permet de construire une boite aux coins arrondis, en CSS, étirable en hauteur avec une seule image de fond.

Sur son post, Dmitry s’étais lancé le challenge de trouver une technique pour faire une boite arrondie avec une seule image de fond.

Il a trouvé une solution qui marche mais qui a le défaut de limiter la hauteur de la boite à la hauteur de l’image. Cela demande donc la création d’une image très haute (1000px), ce qui charge en poids inutilement la page et n’est pas très propre.

C’est plus bas, dans les commentaires de l’article que la réponse ultime arrive, postée par un certain Sebastian Steinmann. La solution n’est toujours pas étirable en largeur mais est plus propre et plus pratique à utiliser que les éternelles découpes.

L’idée c’est d’arriver à ce résultat :

L’image fait un peu penser au texturing pour la 3D. On a donc le header en haut à gauche, le footer en bas à gauche et à droite on a le content à répéter sur toute la hauteur de la boite :

- Voir l’image

On commence par poser le html qui suit :

<div class="contentbox">
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet.</p>
</div>

Ensuite on joue sur l’alignement droite/gauche haut/bas de l’image en background dans les CSS pour afficher une partie puis une autre de l’image en background :

.contentbox {
        width: 300px;
        background: url(background.png) no-repeat left bottom;
        padding-bottom: 17px;
        margin: 0 auto;
}
.contentbox h2 {
        height: 24px;
        width: 270px;
        background: url(background.png) no-repeat left top;
        padding: 5px 15px;
        font-size: 16px;
        color: #fff;
}
.contentbox p {
        width: 268px;
        background: url(background.png) repeat-y right top;
        padding: 10px 16px 0 16px;
}

Voir en ligne le résultat : http://sebs.ng5.as/files/content2.html

Voir en ligne : usabilitypost.com

© 2017 - Abel Poucet web design