Des boxes à coins arrondis en CSS et en images

Pour le site des cours de photo, qui sera prochainement lancé, j’ai dû faire des boxes à coins arrondis.

Voici les ressources que j’ai utilisées :

Un bon résumé, bien que je ne sois pas à proprement parler débutante (quand même douze ans d’expérience en création de sites web, hein, mais je ne retiens jamais les syntaxes exactes !) :  Image de fond en CSS background-image dans une page html – CSS Debutant.

Ils proposent cette ressource sympa : http://www.pompage.net/pompe/les-bases-du-background/ qui fait le point définitif sur la question

Et la découverte du jour :le site qui va me faire gagner un temps insensé à chaque fois que je devrai faire une box à coins arrondis. Il les fait en CSS ou en GIF.  Magnifque !

http://www.roundedcornr.com/

Puisque mon propos est de me souvenir des   propriétés du fond :

• background-color: #000000; /* | transparent | inherit */

• background-image: url(image.gif);  /* pas de guillemets, je m’en souviendrai !*/
• background-repeat: no-repeat /* | repeat-x = dans le sens horizontal | repeat-y | repeat | inherit*/
• background-position: 100px 200px /* 100px du côté gauche de l’élément, et à 200px sous son côté supérieur */
• background-position: 70% 50% /* left: 70% et top: 50% */
• background-position: left top; /* sympa aussi */
• background-position: center top; /* équivaut à 50% 0% */
• background-attachment: scroll /* | fixed | inherit ,; je ne m'en sers jamais : une image de fond est toujours placée par rapport à la fenêtre d’affichage, et pas par rapport à l’élément dans lequel elle réside.*/

• background-color: inherit; /*inherit permet à l’élément d’hériter de la propriété background-color de son parent.*/

Publicités