Dator Blog

Parfois, on se demande pourquoi on a des marges sur des conteneurs CSS.

Pour régler ce problème il existe un fichier CSS nommé reset qui permet d’avoir une page complètement vierge en CSS.

Il suffit de créer un fichier CSS nommé reset.css et de mettre ces propriétés suivant :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Pour conclure, un reset CSS n’est pas une solution en soit dans la conception de ces CSS mais juste une petit plus dans le commencement de ses styles.

• 0 commentaire

Vous avez toujours chercher à faire du flash ? En vain ? Tu as les qualités d’un développeur et tu connais la programmation objet et les principes du XML ? Tu veux épater tes collègues de boulot avec des applications WEB en flash ? Cette technologie est pour toi !

Flex, et plus récemment Flex 3, vient d’arriver sur nos écrans. Cette technologie crée par Adobe permet de créer des applications Flash, uniquement avec du développement . La recette : 2 cuillères d’ActionScript 3, un zeste de CSS et une pincée de XML permet de faire de délicieuses et agréable application pour vos sites internet !

Pour l’occasion, Adobe à mis en place le Flex Builder 3, Un IDE (Environnement de développement logiciel) basé sur Eclipse, la référence du logiciel libre pour le développement. Ce logiciel propose une interface claire et intuitive avec 2 partie : Une partie consacrée au code (la vue standard) et une partie graphique pour positionner vos composants graphiques simplement et rapidement.

De plus, Flex Builder 3 permet , en mode design, de définir les propriétés de tes composants en leur donnant des couleurs ou des attributs en CSS. Comme les plus grands IDE, ce logiciel permet aussi la compilation du code en mode débug afin de corriger les erreurs de vos applications rapidement et simplement.

Rapidement, vous allez voir apparaitre sur ce blog des tutoriaux et aide au développement au Flex.

Conclusion : Cette technologie à l’air vraiment très prométeuse dans un avenir très proche . En plus d’utiliser les 3 notions les plus importantes dans le développement WEB (CSS, Objet et XML), vous pouvez réaliser des sites simplement et rapidement entièrement en flash, en agrémentant vos applications de différents effets déjà conçus par Adobe .

Liens :

Télécharger Flex Builder 3 

Voir un exemple en direct 

• 0 commentaire

Je pense que vous avez le même soucis que moi … comment faire des conteneurs CSS avec les coins arrondis ? non ?

Bon si c’est oui ! J’ai la solution ! Et la solution c’est la propriété moz !

Voici les propriétées CSS :

#content{
 	-moz-border-radius-topright: 20px;
 	-moz-border-radius-bottomright: 20px;
 	-moz-border-radius-bottomleft: 20px;
 	-moz-border-radius-topleft: 20px;
 	width:100px;
 	background-color:#FDD99B;
 	border-color:#D9BB7A;
 	border-style:solid;
 	border-width:1px 5px 5px 1px;
 	padding:1ex 1ex 1ex 1ex;
 	text-align:justify;
 	vertical-align:middle;
 }

Télécharger la source

Et voila, un joli petit effet à la Ubuntu !

Attention cette propriété est uniquement compatible avec Firefox (ou autre navigateur qui respecte les normes w3c )

• 5 commentaires

Un article retrouvé de mon ancien blog.

Bon, je viens de me rendre compte qu’une propriété CSS nommée focus existait … je sais je suis en retard mais bon mais je me suis souvent demandé comment faisait certains sites pour changer le style de leurs balises CSS au moment ou le focus etait dessus…

input:focus, select:focus, textarea:focus

Même pas besoin de javascript ! Tout ce fait tout seul ! MAGIE

Exemple

Style.css

 input, select, textarea {
        border-top:1px solid #666;
        border-left:1px solid #666;
        border-bottom:1px solid #ccc;
        border-right:1px solid #ccc;
}
input:focus, select:focus, textarea:focus {
        background-color: #cddefd;
        border:1px solid #248;
         color:#000;
}

Télécharger la source

Et voila !
Si c’est pas beau ça !

• 1 commentaire