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.*/

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s