Attribut COLUMN-RULE-COLOR
Rôle
L’attribut column-rule-color permet de spécifier la couleur du trait de séparation d’un bloc de contenu divisé en colonnes.
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.columnRuleColor
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
p {
text-align: justify;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
-webkit-column-rule-width: 2px;
-moz-column-rule-width: 2px;
column-rule-width: 2px;
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
-webkit-column-rule-color: red;
-moz-column-rule-color: red;
column-rule-color: red;
}
– Le code HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae magni unde consequatur ipsa deserunt vero deleniti voluptates accusantium, non laboriosam, earum, animi ab expedita impedit obcaecati molestiae nihil soluta Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident explicabo cupiditate perspiciatis nemo, laudantium repudiandae quo qui voluptatibus doloremque voluptates tempora, assumenda unde, alias cumque esse asperiores. Repellendus quidem, inventore..</p>
Résultat
Compatibilité
A partir de IE-10. Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit- (Chrome, Safari, Android…), -moz- (Mozilla).
Valeurs
Les différentes valeurs de l’attribut column-rule-color sont:
- Couleur en hexadécimal
- Composer votre couleur en utilisant des nombres (0 à 9) et les lettres de l’alphabet (de A à F). Les deux premières valeurs sont consacrés à la teinte primaire rouge, les deux suivantes sont consacrés à la teinte primaire verte, les deux dernières sont consacrés à la teinte primaire bleu .
Syntaxe :
column-rule-color : #ff0022 - Couleur en RGB
- Permet de représenter le codage d’une couleur en définissant le taux de saturation en rouge, en vert, en bleu sur une échelle de 0 à 255 inclus pour chaque teinte.
Syntaxe :
column-rule-color : rgba(210,255,128) - Couleur en RGBA
- Permet de représenter le codage d’une couleur avec gestion de l’opacité. Ce codage définit le taux de saturation en rouge, en vert, en bleu sur une échelle de 0 à 255 inclus puis le taux d’opacité entre 0 et 1 (exemple 0.5 pour 50%) .
Syntaxe :
column-rule-color: rgba(210,255,128,0.6) - Couleur nommée
- Les navigateurs peuvent prendre en charge des noms de couleur (140) en anglais (exemple : red) .
Syntaxe :
column-rule-color: grey - transparent
- La couleur doit être transparent.
Syntaxe :
column-rule-color: transparent - initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
column-rule-color : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
column-rule-color : inherit
A voir aussi
display– clear– z-index– flex– align-content– align-items– align-self– vertical-align
