CSS et HTML

En cherchant des astuces en webdesign css , je suis tombé sur le site 456 Berea Street qui est une mine d’informations pour tout ce qui touche au css, html et javascript.

Le site, sous forme de de blog, liste une collection de méthodes et astuces qui peuvent être utilisées sur tout type de sites. Certaines de ces techniques sont créées par l’auteur du blog, d’autres sont basées sur des tutoriels, et des idées qu’il a rencontré sur le web, sur des listes de diffusion, dans des livres…

Il existe des milliers de sites comme celui ci, mais ce site est très clair, et surtout, vous pouvez voir en live ce que donne le code sur plusieurs types de navigateurs.

Par exemple, pour personnaliser un formulaire uniquement en css et html, plus précisément l’élément « select » :

Le code html :

<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

Les différents codes css :

#el01 {width:100%} /* Width */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#ddd;
}
#el03 {background:url(/i/icon-info.gif) no-repeat 100% 50%} /* Background image */
#el04 {border-width:6px} /* Border width */
#el05 {border:2px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family: »Courier New »,Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */

Ensuite, on peut constater le rendu sur son propre navigateur, et sur plus d’une dizaine de navigateurs différents (Camino, Firefox, Internet Explorer, Safari, Opera).

En image :