Archives du mot-clé gagner du temps

Les formulaires me donnent des boutons

Bon c’est pas vrai mais je suis fanatique des jeux de mots débiles.

Qui dit formulaire dit « boutons »…

Très complet et gratuit : As Button Generator. exemple :

Celui-ci permet de faire des onglets avec des dégradés : Fresh Generator

Page récapitulative : 6 Online Web 2.0 Button Generators

A combiner avec http://www.iconspedia.com/

Et les propriétés CSS qui vont bien :

.submit {border:none;color:#fff; background: transparent url(‘images/monimage.png’) no-repeat top left; width:75px; height:20px; }

Publicités

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