Archives du mot-clé CSS

extractCSS – Online CSS Extractor

extractCSS is an online tool which can extract ids, classes and inline styles from HTML document and output them as CSS stylesheet. All you have to do is to type or paste your HTML document and let extractCSS to do the rest for you!

via extractCSS – Online CSS Extractor.

Publicités

the Last Horizontal Menu Item in CMS Made Simple CMSMS

Update Your StyleSheetNow you can turn off the border or whatever you’d like on the last menu item through your StyleSheet.#menu li#last { border: none; }

viaEdward Robirds | The Last Horizontal Menu Item in CMS Made Simple CMSMS.

> pas de bordure droite après le dernier élément d’un menu. I ncroyagble d’élégance et de simplciité !

Humeur avec Orders

Après avoir passé quelques heures à peaufiner un « invoice template » pour faire mes factures via le module Orders, je me suis enfin posé la question de savoir à quoi sert la petite loupe qui se trouve à droite des lignes de commande dans l’admin.
(bonne) surprise : elle permet de faire apparaître la facture !
(mauvaise) surprise : sans CSS !
Donc, penser à faire un template spécifique pour le back-end avec les CSS dedans…

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; }

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