CSS : trucs et astuces partie 1

Voici quelques trucs et astuces en CSS.

Exemple 1

Un "cadre" avec coins arrondis (support cross-navigateurs).

.mon_cadre {
border: solid 4px #C0C0C0;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #EAEAEA;
}

Exemple 2

Un texte (de type titre) avec un effet <shadow>.

.mon_titre {
font-family: Tahoma, sans-serif;
line-height: 1em;
color: brown;
font-weight: bold;
font-size: 20px;
text-shadow: 0px 0px 0 rgb(227, 227, 227), 1px 1px 0 rgb(209, 209, 209),
2px 2px 0 rgb(191, 191, 191), 3px 3px 0 rgb(173, 173, 173), 4px 4px 0
rgb(155, 155, 155), 5px 5px 0 rgb(137, 137, 137), 6px 6px 0
rgb(119, 119, 119), 7px 7px 0 rgb(101, 101, 101), 8px 8px 0
rgb(83, 83, 83), 9px 9px 8px rgba(0, 0, 0, 0.6), 9px 9px 1px
rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, .2);
}

Pour générer la propriété <text-shadow>, vous pouvez utiliser cet utilitaire fort pratique.

Exemple 3

Un "cadre" avec scrolling vertical (qui apparaît automatiquement si nécessaire) et sans scrolling horizontal.

.mon_cadre {
height: 90%;
margin: 0px;
padding: 0px;
border: 0px;
overflow-x: no;
overflow-y: auto;
background-color: #EDEEFF;
}

Exemple 4

Centrer un <div> dans une page.

#mon_div {
margin: 0 auto;
width: 300px;
}

Le <div> fait dans notre exemple 300px de largeur.

Exemple 5

Customiser un bouton.

.button1 {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 11px/100% Arial, Helvetica, sans-serif;
font-weight: bold;
padding: .5em 1em .35em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
background-color: #667CFF;
color: white;
}

.button1:hover {
text-decoration: none;
}

.button1:active {
position: relative;
top: 1px;
}

Vous pouvez customiser par exemple la couleur de fond du bouton (<background-color>).