J'ai généré un sujet de conversation en bulle à partir de http://www.ilikepixels.co.uk/drop/bubbler/
Dans ma page, je mets un numéro à l'intérieur
.bubble {
position: relative;
width: 20px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #FFF;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
Je veux que le background-color
De la bulle change en fonction du nombre à l'intérieur de celle-ci via rgb
donc si mon div est
<div class="bubble" style="background-color: rgb(100,255,255);"> 100 </div>
Je veux que la couleur soit rgb(100,255,255)
La chose est que cela n'affecte pas le triangle.
Comment puis-je écrire le css en ligne afin qu'il inclue le: before et: after?
Tu ne peux pas. Avec les styles en ligne, vous ciblez directement l'élément. Vous ne pouvez pas utiliser d'autres sélecteurs ici.
Cependant, vous pouvez définir différentes classes dans votre feuille de style, définir différentes couleurs, puis ajouter la classe à l'élément.
La clé est d'utiliser background-color: inherit;
sur le pseudo-élément.
Voir: http://jsfiddle.net/EdUmc/
Vous pouvez utiliser variables CSS (plus précisément appelées propriétés personnalisées CSS).
style="--my-color-var: orange;"
background-color: var(--my-color-var);
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid black;
}
div:after {
background-color: var(--my-color-var);
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div style="--my-color-var: orange;"></div>
.bubble {
position: relative;
width: 30px;
height: 15px;
padding: 0;
background: #FFF;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
background-color: var(--bubble-color);
}
.bubble:after {
content: "";
position: absolute;
top: 4px;
left: -4px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent var(--bubble-color);
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 4px;
left: -5px;
border-style: solid;
border-width: 3px 4px 3px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
}
<div class='bubble' style="--bubble-color: rgb(100,255,255);"> 100 </div>
Si vous en avez vraiment besoin en ligne, par exemple parce que vous chargez de manière dynamique des couleurs définies par l'utilisateur, vous pouvez toujours ajouter un <style>
élément juste avant votre contenu.
<style>#project-slide-1:before { color: #ff0000; }</style>
<div id="project-slide-1" class="project-slide"> ... </div>
Exemple de cas d'utilisation avec PHP) et certaines fonctions factices (inspirées de Wordpress):
<style>#project-slide-<?php the_ID() ?>:before { color: <?php the_field('color') ?>; }</style>
<div id="project-slide-<?php the_ID() ?>" class="project-slide"> ... </div>
Depuis HTML 5.2, il est valide de placer des éléments de style dans le corps, bien qu'il soit toujours recommandé de placer des éléments de style dans la tête.
Référence: https://www.w3.org/TR/html52/document-metadata.html#the-style-element