Introduction au CSS les bordures

Cours introduction au CSS les bordures, tutoriel & guide de travaux pratiques en pdf.

Les bordures arrondies

Réaliser des bordures arrondies en utilisant l’actuel CSS n’est pas chose facile. Toutefois, il existe de nombreuses méthodes disponibles, mais aucune n’est vraiment simple. De plus, la création d’images pour chaque bordure est souvent nécessaire. En utilisant le CSS3, la création d’une bordure arrondie devient incroyablement facile. Elle peut être appliquée à tous les coins ou individuellement et sa largeur/couleur est facilement modifiable. Le code CSS est :
.border_rounded { background-color: #ddccb5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #897048; padding: 10px; width: 310px; }
Exemple de bordures arrondies avec le CSS3

Les dégradés

Les bordures dégradées peuvent s’avérer efficaces si elles sont correctement utilisées. Ce code est un peu plus complexe, vous obligeant à définir chaque couleur du dégradé. Le code CSS est:
.border_gradient { border: 8px solid #000; -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; padding: 5px 5px 5px 15px; width: 300px; }